Skip to main content
Known Participant
December 8, 2022
Question

Dynamic Mask

  • December 8, 2022
  • 2 replies
  • 419 views

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?

    This topic has been closed for replies.

    2 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    December 9, 2022

    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_NZAuthor
    Known Participant
    December 11, 2022

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



    kglad
    Community Expert
    Community Expert
    December 8, 2022