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

Posted 2023-03-05

【中文标题】如何使用 EaselJS 在位图上绘制/绘制线条？

【英文标题】：How do I draw/paint lines on top of a Bitmap using 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 用于绘图之前）。

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

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

【参考方案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...