如何解决使用EaselJS,如何获取自动绘制的内容以掩盖其下方的位图?
我对EaselJS相对较新,我正在开发一个程序,该程序允许用户在已添加到舞台的位图上绘制。
绘制后,如果随后移动/旋转了位图,则在位图上绘制的图形部分应随之移动。
位图功能(移动/旋转它们)工作正常。当前,我能够在位图上绘制(并从位图上绘制),但是当我移动/旋转位图时,在顶部绘制的内容不会随之移动。未在位图顶部绘制的图形部分应保持“卡在”画布上,以便位图可以位于其顶部。
我正在使用两个容器,container
用于位图,drawingContainer
用于自动绘制内容,它们都是stage
的子级。
<pre>
function initPaint() {
var oldPt,oldMidPt,color,stroke;
stage.enableDOMEvents(true);
stage.addChild(drawingContainer);
drawingContainer.cache(0,1200,800);
stage.update();
}
function startPaint() {
stage.addEventListener("stagemousedown",handleMouseDown);
stage.addEventListener("stagemouseup",handleMouseUp);
}
function handleMouseDown(event) {
if(!event.primary) {return; }
color = "#000000";
stroke = 20;
oldPt = new createjs.Point(stage.mouseX,stage.mouseY);
oldMidPt = oldPt.clone();
stage.addEventListener("stagemousemove",handleMouseMove);
}
function handleMouseMove(event) {
if (!event.primary) { return; }
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1,oldPt.y + stage.mouseY >> 1);
drawing.graphics.clear().setStrokeStyle(stroke,'round','round').beginStroke(color).moveTo(midPt.x,midPt.y).curveTo(oldPt.x,oldPt.y,oldMidPt.x,oldMidPt.y);
drawingContainer.addChild(drawing);
drawing.cache(0,800);
//get object being moused over (if there is one)
var obj = stage.getObjectsUnderPoint();
//get bitmap from object
bitmapToMask = obj[0];
// now what?
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
drawingContainer.updateCache("source-over");
container.addChild(drawingContainer);
stage.update();
}
function handleMouseUp(event) {
if (!event.primary) { return; }
stage.removeEventListener("stagemousemove",handleMouseMove);
}
</pre>
根据我的阅读,看来我可以为每个位图和每个绘制的元素addChild
创建一个唯一的容器,但是如果我在舞台上有很多位图,这似乎并不理想。
如果有人可以指出正确的方向,我将不胜感激!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。