easljs/Animate CC畫布：可拖動的蒙版

Question

我想在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; 
} 

Answer 1

面具不應該是舞臺上的孩子。將它添加到舞臺上使其既是面具，又是一個可見的孩子。

有兩種簡單的方法。

1. 將可拖動的子放在內容後面。這使它不可見，但由於圖像沒有任何鼠標交互，它將通過鼠標按下。唯一的副作用是你得到一個可見的光環，因爲舞臺上的孩子對面具進行混淆。

這裏是一個快速樣品： 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); 
}); 

希望幫助！