How to get the topmost point of a rotated object?

[enriqueerrando]

Hi,

First of all, I'm working on FabricJS 5.3.1.

I'm trying to get the following things, taking into account the object rotation (angle):

• The object oCoord point that is closer to the top of the canvas
• The distance between a) the object oCoord point that is closer to the left side of the canvas and b) the object oCoord point that is closer to the right side of the canvas
• The distance between a) the object oCoord point that is closer to the top side of the canvas and b) the object oCoord point that is closer to the bottom side of the canvas

Could u point me in the right direction?

Thanks in advance!

[asturur]

This is a plain JS problem, oCoords are all in canvas html coordinates.
So given the oCoord object, you can use:

const allCoordsEntries = Object.entries(obj.oCoords);

const allYValues = allCoordsEntries.map(([key, point]) => point.y));

const smallerY = Math.min(...allYValues);

const indexOfSmallerY = allYValues.indexOf(smallerY);

const controls = allCoordsEntries[indexOfSmallerY]  // in format [key ,value]

You repeat at will for the farthest in any direction and once you have 2 points how to calculate the distance is either with one of the available point methods or by doing the point distance alghoritm yourself that you can google anywhere

[enriqueerrando]

Hello @asturur,

First of all, sorry for the delay, just after posting, I went on vacation and didn't have a PC to try your suggestion. I am back now ;)

Based on your answer, I think my question was not explained well, so here is a visual example.

What I'm trying to do is that when you click a button, all the selected objects would be distributed as a pattern along the Y axis. Meaning that the highest Y point of the second object would be placed on the lowest Y point of the first object, and so on.

To do this, I need to base it on the area represented with a dashed line in the image, not on the actual area of ​​the object.

I hope this makes it clearer. Thanks!!

[asturur]

yes this make it clear, this is called the xy problem:
https://xyproblem.info/

So to your particular issue i think you can use the object.getBoundingRect

That will give you an axis aligned box for the object, with top,left,width and height.
Please use it with the absolute set to true since the absolute=false is disappearing.

In the case of vertical distribution i think you can take all the height and top, and run this kind of logic:

the first box is top: 10, height: 50, it makes 60.

the second box is top : 40 height : 80, it needs to go to 60 + 80, so add 20 to that oject.top.

now you are at at total of 140 and you move with the third box and so on.

It should be really that simple.

[enriqueerrando]

Hi @asturur , thanks for helping me out!

My first approach in all this was exactly your suggestion, but for some reason when the moving obj was rotated, didn't work.

Since that was your suggestion, I went back and mess around with it a bit more and... solved the issue! I don't know if is because of my code or just the way FabricJS works, but for some reason when an object is rotated and I relocate it by code, it's originXY is no longer TL, but center, and so I just need to sum to the final reposition Y point the obj.getBoundingRect().height / 2.

Is that the expected FabricJS behaviour?

Thanks!

[asturur]

mmm could be a bug.
If you use the rotate() method object origin is reset to normal after the rotation.
If it isn't there is a bug somewhere.

[asturur]

can you show a situation in which the origin changes without you expecting it?