Search code examples
javabitmaphtml5-canvascreatejseaseljs

How to set the registration point of a Bitmap image to the bottom centre?

I am trying to set the registration point of an image to the bottom centre so it can rotate around that point. So far my code looks like this:

var img = new createjs.Bitmap("img.png");
img.x = 200;
img.y = 180;
img.scaleX = 0.35;
img.scaleY = 0.35;
img.regX = img.width/2;
img.regY = 0;
img.rotation = 15;
canvas.addChild(img);

I tried changing the numbers of img.regY but I can't seem to get it correct.

Solution

  • What is redBalloon.width?

    The best approach is to wait until the image is loaded, and then use its natural width.

    img.image.onload = function() {
    img.regX = img.image.naturalWidth;
    img.regY = img.image.naturalHeight;
}

    Hope that helps.