CODEWITHSUNDEEP
canvasmaskeaseljsanimate-cc
Michael
Michael

Reputation: 139

easljs/Animate CC Canvas : draggable mask

I want to make a draggable mask inside Animate CC Canvas.

box is a movieClip that contains a vector black square.

bg is a movieClip that contains a bitmap that i want to apply the box as a mask to and drag around.

Both display on screen, but the dragBox is only draggable, but it won't mask the backgroundImage. What am I missing here?

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

Upvotes: 0

Views: 499

Answers (1)

Lanny
Lanny

Reputation: 11294

Masks should not be a child of the stage. Adding it to the stage makes it both the mask, as well as a visible child.

There are two easy approaches.

  1. Put the draggable child behind the content. This makes it not visible, but since the image doesn't have any mouse interaction, it will pass through the mouse press. The only side-effect is you get a visible halo due to the stage child aliasing against the mask.

Here is a quick sample: https://jsfiddle.net/lannymcnie/og4pmo73/

  1. The other option is to use the stage events instead, and take the draggable child off the stage. The stage always dispatches stagemousedown, stagemouseup, and stagemousemove events, so you can listen to those, and handle it accordingly. Its not as clean as the pressmove event, but its not much more work.

Here is a quick sample: 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);
});

Hope that helps!

Upvotes: 1

Related Questions