不要な複数ドットの問題を伴うイエルJS線描画

Question

キャンバスに線を描画するときに、線内に複数の点が作成されます。キャンバスの描画にeaselJSを使用しています。添付のスクリーンショットを参照してください。

線引きのコードは次のとおりです。

Line with multiple dots

scope.init = function(){ 
    stage = new createjs.Stage(element[0].id); 
    stage.enableDOMEvents(true); 
    createjs.Touch.enable(stage); 
    shellWrapper = new createjs.Container(); 
    shellWrapper.id = mainContainerId; 
    shellWrapper.hitArea = new createjs.Shape(new createjs.Graphics().f('#000').dr(0,0,cacheWidth,cacheHeight)); 
    shellWrapper.cache(0,0,cacheWidth,cacheHeight); // Cache it. 
    stage.addChild(shellWrapper); 
    drawing = new createjs.Shape(); 
    shellWrapper.addChild(drawing); 
    stage.update(); 
} 

scope.mouseDown = function(event) { 
    oldX = event.stageX; 
    oldY = event.stageY; 

    shellWrapper.addEventListener('pressmove', function(evt){ 

    drawing.graphics.beginStroke(color) 
     .setStrokeStyle(size, 'round') 
     .moveTo(oldX, oldY) 
     .lineTo(evt.stageX, evt.stageY); 

    oldX = evt.stageX; 
    oldY = evt.stageY; 
    shellWrapper.updateCache(erase?'destination-out':'source-over'); 
    drawing.graphics.clear(); 
    stage.update(); 
    }); 
}; 

Answer 1

一行は、その限界を丸めているので、それは実際にこのように見えるので、これは、起こる：

を丸みを帯びたエッジが少し行くストロークに応じて、（幅）を線の境界から外して、それが描画された過去の線を越えるようにします。この線のオーバーレイは、小さな円を描いたように見えますが、ストロークで半透明の色を使用しているため、描画されません。個々の線が相互に関連して完全に不透明になりますが、彼らはなります。この方法は、問題を解決するため、ストロークの色を不透明にしてmyDisplayObj.alpha = 0.5;

を使用して図面全体に透明性を追加するには

シーン内の他の表示オブジェクトに対して半透明である。