Search code examples
javascriptcreatejseaseljs

Change movement point of a shape in EaselJS

So, I was thinking if I could move the moving point of a shape in EaselJS. For example- square moving point

This is an image of a square. The terribly drawn blue dot represents the point at which the movement of the square happens. In other words, when I tell the shape to go to the point (0, 0), it moves that point to that location.

I have recently started using EaselJS and the CreateJS library, so I don't really know if I can do this - I want to change the point of movement to the center, like a circle in EaselJS.

enter image description here

When I move a circle to the point (0, 0), I can only see a fourth of the circle, as the center has been moved to (0, 0). However, I can see the entire square when I move it to (0, 0). Is there any way I can change this point so that I will be able to see the full circle or just part of the square when I move it to (0, 0)?

Solution

  • You can either draw the shape from the center, or set the regX and regY. 

    // Draw from center
var s = new createjs.Shape();
s.graphics.beginFill("black").drawRect(-50,-50,100,100);

// Set registration point
var s = new createjs.Shape();
s.graphics.beginFill("black").drawRect(0,0,100,100);
s.regX = s.regY = 50; // Set the registration to half the width & height

    Hope that helps.