Canvas easljs/Animate CC画布：可拖动的遮罩

我想在动画CC画布内制作一个可拖动的面具

长方体是包含矢量黑色正方形的电影剪辑

bg是一个movieClip，其中包含一个位图，我想将该框作为遮罩应用于该位图并在其上拖动

两者都显示在屏幕上，但dragBox只能拖动，但它不会遮掩背景图像。我错过了什么

var backgroundImage = new lib.bg();
backgroundImage.x = backgroundImage.y = 0;
stage.addChild(backgroundImage);

var dragBox = new lib.box();
dragBox.x = dragBox.y = 0;
stage.addChild(dragBox);    

backgroundImage.mask = dragBox;
stage.update();    

dragBox.addEventListener("pressmove", dragMe.bind(this));
function dragMe(evt) {
    this.addChild(evt.currentTarget);
    var p = this.globalToLocal(evt.stageX, evt.stageY);
    evt.currentTarget.x = p.x;
    evt.currentTarget.y = p.y;
}

---

面具不应该是舞台上的孩子。将其添加到舞台上，使其既是面具，也是可见的孩子

有两种简单的方法

将可拖动的子对象放在内容后面。这使它不可见，但由于图像没有任何鼠标交互，它将通过鼠标按下。唯一的副作用是，由于遮罩上的舞台子对象别名，会出现可见光晕

下面是一个快速示例：

另一个选项是使用阶段事件，并将可拖动的子级从阶段中移除。stage总是分派

stagemousedown

、

stagemouseup

和

stagemousemove

事件，因此您可以监听这些事件，并相应地进行处理。它不像

pressmove

事件那样干净，但工作量也不多

下面是一个快速示例：

希望有帮助

var offset = new createjs.Point();
var listener = null;
stage.on("stagemousedown", function(e) {
    offset.setValues(s.x - e.stageX, s.y-e.stageY);

  listener = stage.on("stagemousemove", function(e) {
    s.x = e.stageX+offset.x; s.y = e.stageY+offset.y;
  });
});
stage.on("stagemouseup", function(e) {
  stage.off("stagemousemove", listener);
});