4

I am facing some challenges while scaling a Konva.Image. I want to scale the image from it's center point. Although I am able to scale it from center but I am not sure whether it is a correct way of doing this or not. Currently it is scaled from it's top-left corner. To scale the image from center point I am setting it's offset to center by using image.setOffset(). But I don't know why it is moving the image. I am doing this:

  //setting the offset to center
  //but don't know why it's moving the image.
  yoda.setOffset({
    x: yoda.width() / 2,
    y: yoda.height() / 2
  });
  // setting it's position back to original
  // position but don't know why I need to
  // adding the offset values
  yoda.position({
    x: 50 + yoda.width() / 2,
    y: 50 + yoda.height() / 2
  });

To scale the image I am doing this:

 yoda.scale({
          x: 0.5,
          y: 0.5
        });
        layer.draw();

Is there any other way to achieve the same? Here's the plunkr to play.

Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71

1 Answers1

2

This is expected behaviour of Konva nodes. You have to use offset and {x,y} properties together.

You can avoid using offset, but in that case, you will have to change {x,y} while scaling.

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thanks lavrton... Seems like I need to learn the concept of offset first. Do you have any link which explains it thoroughly? – Hitesh Kumar Sep 06 '16 at 07:03
  • I'm also having trouble trying to set up the offset to the center and then using `scaleX()` and `scaleY()`. I've tried and tried. I just can't get it working. – Azevedo Dec 27 '16 at 16:07