Question

我正在尝试使用sample from the createJS/easelJS网站设置createjs.Shape（）并将其作为子项添加到createjs.stage()。

然后使用mousedown / mousemove / mouseup处理程序，使用图形方法更新舞台 - setStrokeStyle，beginStroke和curveTo。

主要区别在于我还添加了new Bitmap(url)，并将其作为孩子添加到我的舞台上（在为绘图添加createjs.Shape之前）。

然而，当我测试它时，我只能“绘制”未被Bitmap占用的区域。我怎样才能使它工作，所以我可以在Bitmap上绘制/绘画？

最终目标是一个着色页 - 能够添加不同的黑白图像，并有多个颜色画笔为其着色。

Answer 1

没关系，我通过从Image对象创建new createjs.Bitmap对象而不是将图像的url传递给Bitmap的构造函数来实现它。然后将drawingCanvas的createjs.Shape对象和Bitmap的对象添加到加载的事件处理程序中。所以这有效：

var image, stage, drawingCanvas, bitmap;
function init(){
 image = new Image();
 image.onload = handleImgLoad();
 image.src = 'image-source-url.png';
 stage = new createjs.Stage("testCanvas");
 createjs.Touch.enable(stage);
 drawingCanvas = new createjs.Shape();
}

function handleImgLoad(){
 bitmap = new createjs.Bitmap(image);
 stage.addChild(bitmap, drawingCanvas);

 ... code to handle mouseup/down/move events...
}

如何使用EaselJS在位图上绘制/绘制线条？

1 个答案: