easljs/Animate CC Canvas : 可拖动蒙版
easljs/Animate CC Canvas : draggable mask
我想在 Animate CC 中制作一个可拖动的遮罩 Canvas。
box 是一个包含矢量黑色方块的影片剪辑。
bg 是一个包含位图的影片剪辑,我想将框作为遮罩应用到该位图并四处拖动。
两者都显示在屏幕上,但 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;
}
面具不应该是child的舞台。将它添加到舞台上使其既是面具,也是可见的 child。
有两种简单的方法。
- 将可拖动的 child 放在内容后面。这使得它不可见,但由于图像没有任何鼠标交互,它将通过鼠标按下。唯一的 side-effect 是由于阶段 child 对遮罩的混叠,你会得到一个可见的光晕。
这是一个快速示例:
https://jsfiddle.net/lannymcnie/og4pmo73/
- 另一种选择是改用舞台事件,并将可拖动的 child 移出舞台。该阶段始终调度
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);
});
希望对您有所帮助!
我想在 Animate CC 中制作一个可拖动的遮罩 Canvas。
box 是一个包含矢量黑色方块的影片剪辑。
bg 是一个包含位图的影片剪辑,我想将框作为遮罩应用到该位图并四处拖动。
两者都显示在屏幕上,但 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;
}
面具不应该是child的舞台。将它添加到舞台上使其既是面具,也是可见的 child。
有两种简单的方法。
- 将可拖动的 child 放在内容后面。这使得它不可见,但由于图像没有任何鼠标交互,它将通过鼠标按下。唯一的 side-effect 是由于阶段 child 对遮罩的混叠,你会得到一个可见的光晕。
这是一个快速示例: https://jsfiddle.net/lannymcnie/og4pmo73/
- 另一种选择是改用舞台事件,并将可拖动的 child 移出舞台。该阶段始终调度
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);
});
希望对您有所帮助!