easljs/Animate CC画布：可拖动的蒙版

问题描述：

我想在Animate CC画布内制作一个可拖动的蒙版。easljs/Animate CC画布：可拖动的蒙版

box是一个movieClip，它包含一个向量黑色正方形。

bg是一个movieclip，其中包含一个位图，我想将该框用作蒙版并拖动。

两者都显示在屏幕上，但dragBox只能拖动，但不会遮挡backgroundImage。我在这里错过了什么？

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; 
}

答

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

有两种简单的方法。

将可拖动的子放在内容后面。这使它不可见，但由于图像没有任何鼠标交互，它将通过鼠标按下。唯一的副作用是你得到一个可见的光环，因为舞台上的孩子对面具进行混淆。

这里是一个快速样品： https://jsfiddle.net/lannymcnie/og4pmo73/

另一种选择是使用阶段事件，而不是，并采取可拖动子断阶段。舞台总是会发送stagemousedown,stagemouseup和stagemousemove事件，因此您可以听取这些内容并相应地处理它们。它不像pressmove事件那样干净，但它没有太多的工作。

下面是一个简单示例： https://jsfiddle.net/lannymcnie/og4pmo73/1/

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); 
});

希望帮助！

开始=“2”>

easljs/Animate CC画布：可拖动的蒙版

相关推荐