CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
Michael
Michael

Reputation: 33297

KineticJs: How to scale an Image and keep the position of the attached container?

I have an image (the blue box) and ad red rectangle. The image's offset is set to the center of the image to make rotation around the center of the image. The code is similar to the following:

var image = new Kinetic.Image({
x: 200,
y: 100
});
image.offsetX(100);
image.offsetY(50);

var rect = new Kinetic.Rect();

var group = new Kinetic.Group();

group.add(image);
group.add(rect);
layer.add(group);
stage.add(layer);

The stage than looks something like this:

enter image description here

After I rescale the image with

image.scaleX(0.5);
image.scaleY(0.5);

I get the following:

enter image description here

The red rectangle is not attached to the image anymore.

I could do 

rect.scaleX(0.5);
rect.scaleY(0.5);

but this would change the size of the rect.

How do I rescale the image and keep the rectangle attached to the same position as before?

Edit:

The following image shows what it should look like after the image scaling. Event after the scaling the red rectangle should be attached to the image.

enter image description here

Upvotes: 0

Views: 578

Answers (2)

markE
markE

Reputation: 105015

If you want the red rect to be centered in the top-left of the blue image after scaling the image, you will need to listen for changes in the images scaleX and scaleY properties.

You can listen for scaleX / scaleY property changes like this:

image.on("scaleXChange scaleYChange",function(){
    // either scaleX or scaleY has changed on this image
});

Then you can reposition the rect to be centered on the images top-left corner like this:

image.on("scaleXChange scaleYChange",function(){
    var imgX=this.x()-this.offsetX()*this.scaleX();
    var imgY=this.y()-this.offsetY()*this.scaleY();
    rect.position({x:imgX-rect.width()/2,y:imgY-rect.height()/2});
})

Here's a Demo: http://jsfiddle.net/m1erickson/6H9aK/

enter image description hereenter image description here

Upvotes: 1

thinkbigthinksmall
thinkbigthinksmall

Reputation: 904

Do this instead to apply the scaling to both x and y axes at the same time, rather than scaling one first, then the other:

rect.scale({x:0.5,y:0.5});

Upvotes: 0

Related Questions