Javascript 使用EaselJS，我如何获得自动绘制内容以屏蔽其下方的位图？

我对EaselJS比较陌生，我正在开发一个程序，允许用户在已经添加到舞台上的位图上绘制

绘制后，如果随后移动/旋转位图，则在位图上绘制的图形部分应随之移动

位图功能（移动/旋转它们）工作正常。目前，我可以在位图的顶部绘制（也可以在位图之外绘制），但当我移动/旋转位图时，在顶部绘制的内容不会随之移动。图形中未绘制在位图顶部的部分应保持“固定”在画布上，以便位图可以放置在其顶部

我使用两个容器，

container

用于位图，而

drawingContainer

用于自动绘制内容，这两个容器都是

stage

的子容器

<pre>

function initPaint() {

    var oldPt, oldMidPt, color, stroke;
    
    stage.enableDOMEvents(true);
    stage.addChild(drawingContainer);
    drawingContainer.cache(0,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, 0, 1200, 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>

函数initPaint（）{
变量oldPt、oldMidPt、颜色、笔划；
阶段。使能事件（真）；
stage.addChild（drawingContainer）；
drawingContainer.cache（0,01200800）；
stage.update（）；
}
函数startPaint（）{
stage.addEventListener（“stagemousedown”，handleMouseDown）；
stage.addEventListener（“stagemouseup”，handleMouseUp）；
}
功能handleMouseDown（事件）{
如果（！event.primary）{return；}
color=“#000000”；
冲程=20；
oldPt=newcreatejs.Point（stage.mouseX，stage.mouseY）；
oldMidPt=oldPt.clone（）；
stage.addEventListener（“stagemousemove”，handleMouseMove）；
}
功能handleMouseMove（事件）{
如果（！event.primary）{return；}
var midPt=new createjs.Point（oldPt.x+stage.mouseX>>1，oldPt.y+stage.mouseY>>1）；
drawing.graphics.clear（）.setStrokeStyle（笔划，'round'，'round'）.beginStroke（颜色）.moveTo（midPt.x，midPt.y）.curveTo（oldPt.x，oldPt.y，oldPt.x，oldPt.y）；
drawingContainer.addChild（绘图）；
drawing.cache（0,0,1200,800）；
//获取鼠标悬停的对象（如果有）
var obj=stage.getObjectsUnderPoint（）；
//从对象获取位图
bitmapToMask=obj[0]；
//现在怎么办？
oldPt.x=stage.mouseX；
oldPt.y=stage.mouseY；
oldMidPt.x=midPt.x；
oldMidPt.y=midPt.y；
drawingContainer.updateCache（“源代码结束”）；
container.addChild（drawingContainer）；
stage.update（）；
}
功能handleMouseUp（事件）{
如果（！event.primary）{return；}
stage.removeEventListener（“stagemousemove”，handleMouseMove）；
}

从我所读到的内容来看，似乎我可以为每个位图创建一个唯一的容器，并为每个绘制的元素创建一个

addChild

，但如果舞台上有许多位图，这似乎并不理想

如果有人能给我指出正确的方向，我将不胜感激