EaselJS线条绘制带有不必要的多点问题

Question

在画布上绘制线条时，它会在线条中创建多个点。我正在使用画架绘制画布。请参阅随附的屏幕截图。

画线的代码如下。

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;

使笔触颜色不透明，并为整个图形添加透明度

这样，各个线条相对于彼此完全不透明，但相对于场景中的其他显示对象，它们将是半透明的。