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

【问题标题】：How do I draw/paint lines on top of a Bitmap using EaselJS?如何使用 EaselJS 在位图上绘制/绘制线条？
【发布时间】：2014-04-11 04:38:57
【问题描述】：

我正在尝试使用 sample from the createJS/easelJS 站点，它设置了 createjs.Shape() 并将其作为子级添加到 createjs.stage()。

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

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

但是，当我测试它时，我只能在位图未占用的区域上“绘制”。我怎样才能让它工作，这样我就可以在位图上绘制/绘画？

最终目标是一个着色页 - 能够添加不同的黑白图像并使用多种颜色画笔对其进行着色。

【问题讨论】：

标签： javascript html canvas easeljs createjs

【解决方案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...
}

【讨论】：