Dynamic Mask

[Rob_NZ]

I'm trying to create a mask that follows an object when the object is dragged. So far I'm using this code for the drag and drop of the object and the mask following that object:

this.Handle.on("pressmove", moveHandle);

function moveHandle(e) {
var p = stage.globalToLocal(e.stageX, e.stageY)
e.currentTarget.x = p.x;
exportRoot.LeftMask.x = exportRoot.Handle.x;
}
The mask is set to a MovieClip. This works fine until I set it to a mask on the layers panel, then it then doesn't mask what's underneath it.

Do I have to dynamically set the mask? Is there a way of dynamically setting a mask when it is a MovieClip?

[kglad]

https://community.adobe.com/t5/animate-discussions/how-to-write-a-mask-code-in-easeljs/m-p/9995444

[JoãoCésar]

Hi.

Why don't to you place the mask and the masked instances inside of a container and drag the container instead?

Please let us know.

Regards,

JC

[Rob_NZ]

Thanks for your advice. I ended up drawing the mask and loading the image to be masked from the root folder. This worked. 

Maybe not the cleanest code but I'm still learning some of the basics:

createjs.Ticker.addEventListener("tick", tick);

var BG = new createjs.Bitmap("Background.jpg");
stage.addChild(BG);
var Mask = new createjs.Shape();
Mask.graphics.mt(1, 40).lt(1, 280).lt(280, 390).lt(280, 140).cp();
BG.mask = Mask;
stage.addChild(Mask);

function tick(event) {
stage.update();
}

Handle = new lib.handle();
stage.addChild(Handle);
Handle.on ("pressmove", moveMask);

function moveMask(e) {
var p = stage.globalToLocal(e.stageX, e.stageY)
e.currentTarget.x = p.x;
exportRoot.XOutput.text = Handle.x;
Mask.x = Handle.x;
}