• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Dynamic Mask

Explorer ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

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?

Views

274

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 09, 2022 Dec 09, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 11, 2022 Dec 11, 2022

Copy link to clipboard

Copied

LATEST

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



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines