Inconsistent shape positions

[fxdave]

The problem:

Shapes eg. reactangle, circle, ellipse are default to an inconsistent position.
Circles and ellipses are centered, but rectangle is not.

Why is it a problem?

Try to find the absolute position of a random shape's top left corner.
You couldn't because of this.

[lavrton]

You are right. That behavior is not consistent. But it is the most convenient to use. To find bounding box of any shape you can use shape.getClientRect().

[TheGrandmother]

Is it possible to move an object by moving it by its client rectangle some how?
Being able to work with a rectangles center coordinates would make life much easier when rotations are involved.

And things are made very confusing as the Transformer rotates an object around its center but changes its position :/

[lavrton]

@TheGrandmother

By default position of a rectangle is its top-left corner. So it should be expected that on rotation with Transformer it will change its position too.

If you want to see the center of the rectangle as its position, you need to change its origin with offset.

For more info see: https://konvajs.github.io/docs/posts/Position_vs_Offset.html

const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 50,
  height: 50,
  offsetX: 25,
  offsetY: 25,
  fill: 'green'
});
layer.add(rect);


layer.add(new Konva.Transformer({
  node: rect
}))

rect.on('transform', () => {
  console.log(rect.x(), rect.y());
})

https://jsbin.com/xagihujuxa/1/edit?html,js,console,output

[TheGrandmother]

@lavrton
Thanks for the offset thingy! Had no idea :) But will the offset scale with the scaleX and scaleY?

[lavrton]

Try and see how it works.

[TheGrandmother]

Completely missed the jsbin link. It works perfectly, thanks a lot for the help and sorry for being a top tier wanker.