Search code examples
javascripteaseljscreatejs

drag shape without fill


I am trying to create an EaselJS app that lets me drag unfilled circles around the canvas - so instead of calling beginFill when I am setting up the Shape I would call beginStroke. I am running into the problem that if I don't fill the shape, I can only drag it when I am selecting the top left corner of the shape. When the shape is filled I can drag it by selecting anywhere within the shape. Is there a way I can make the unfilled shape drag the same way as the filled shape?


Solution

  • Strokes and fills are necessary in EaselJS for masks. You could however assign an other Shape as hitArea:

     var shape = new createjs.Shape();
     shape.graphics.beginFill("#000000").drawCircle(0, 0, 40);
    
     draggableCircle.hitArea = shape;
    

    Keep in mind that the hitArea-Shape doesn't have to be added to the stage and thus won't be visible.