opened
simone-b
username_0
Hello,

When I apply a rotation (different of 0°, 90°, 180°, 360°) the method getClientRect() returns values bigger than the size of my shape. (example below)

|Client Rect not OK with ~50 degrees rotation  | Client Rect OK with 90 degrees rotation   |  Client Rect OK with 0 degrees rotation  |
|---|---|---|
| <a href="https://imgbb.com/"><img src="https://i.ibb.co/hgHtzSc/NOK-50-degrees.png" alt="NOK-50-degrees" border="0"></a>  | <a href="https://imgbb.com/"><img src="https://i.ibb.co/DVbv7Wq/OK-90-degrees.png" alt="OK-90-degrees" border="0"></a>   |  <a href="https://imgbb.com/"><img src="https://i.ibb.co/gP7NVtY/OK-0-degrees.png" alt="OK-0-degrees" border="0"></a> |

I've tried 2 different methods to do the rotation and I still have the same result :

- The first one, by setting :
                - offsetX = shape.width / 2
                - offsetY = shape.height / 2
   And just applying the rotation so : shape.rotate(X);

- The second one by computing the new X & Y position of my shape.

Is there something I do wrong ? Or is there an issue with the getClientRect method?

I was unable to find any information regarding a similar issue, did someone has encountered the same issue?

You can find an example on the following codepen : https://codepen.io/kep2bh/pen/GRgNagM
To display the clientRect, just click on the "rotate" button. It will rotate the shape and then display the clientRect.
getClientRect invalid after rotation
issue
created
lavrton
username_1
That is how `node.getClientRect()` calculation works. Sometimes it gives approximate and results.

From this picture, you can understand why it has such padding when rotated.

<img width="272" alt="Screenshot 2019-12-17 at 11 21 23" src="https://user-images.githubusercontent.com/1443320/71014229-9a6e8c80-20bf-11ea-8bea-98a656aaf134.png">
comment
created
simone-b
username_0
Hi,

Thank you very much for your answer. Now I understand why getClientRect behaves like that.

Actually, I'm using it to get the boundings of my shape in order to snap my shape on different lines. Since the Rect returned has padding, the snapping of my shape includes that padding.

Is there at least a way (a formula ?) to get each point at the end of my shape ? (left, right, top, bottom)
That would help me to determine the real boundings of the shape to use for the snapping.
comment
created
lavrton
username_1
Yeah, you can try it. Also you can take a look into `getSelfRect` function https://github.com/konvajs/konva/blob/fbebc3fad2b85055bd8d5be8af604e96ce9b6a81/src/shapes/Path.ts#L103

And you can use that code, but instead of an approximate rectangle of the shape, you can try to transform and rotate each corner point.
comment
closed
lavrton
username_1
issue