Fabric.js: How can I get the actual coordinates of objects for their own bounding box?

[paulm17]

Hi,

I'm using 1.7.9.

I think this is a feature request, but I am not sure.

I'm trying to get the actual coordinates from the objects relative to the canvas. Not from the selection tool, but the bounding box of the object.

Here's an example:

I have two text and 1 image objects. I have left the default size of the text. I do that because users won't know they they need to shorten it. Also users are lazy, you need to think for them 👍

Here is the result when passing the canvas object to something like ffmpeg, which uses the coordinates from the canvas object.

As you can see, the Text is not in the correct place. But is actually correct because it corresponds to the selection tool Top and Left. The image as fully disappeared! Probably to the bottom right!

So my question is. How can I get the actual coordinates of objects for their own bounding box?

I've seen both:
http://stackoverflow.com/questions/32916928/fabric-js-get-text-bounding-box-width-and-height
http://stackoverflow.com/questions/42800125/standard-method-of-getting-containing-box/42830279#42830279

But I am confused on how to proceed.

If someone can give me pointers or perhaps there is code in the 2.0 release I could use?

Thanks

[asturur]

if you want to overlay the things on a different environment than a fabricjs app, you need to export the frame you create as images, Fabric will not give you the exact position of every character, will use the center of the bounding box to do its inner drawing logic.

The bounding box of your B is very big, and that is one of the problems. But if you are using something different to draw text on a frame, do not expect to be positioned in the same position of where fabricjs position it. it will be hard

[paulm17]

Thanks for the reply, let me explain again with an example you made in SO:

See that the selectbox is different than the bounding box in red? Is it possible to get the X, Y, W, H from the red box? Because that's what I need for any type of object.

[asturur]

From the example you can get X, Y, W, H from the red box.
but not for Text or Images.

Work with the center position, it may be easier.
Again if you are trying to repaint what fabric paints but in a system that is not fabric, you will have an hard time. as hard as writing something that is really similar to fabric in that other system.

Consider using fabric in the server side with nodejs and re render your frames and overlay them over what are you doing with ffmpeg.

[paulm17]

Ok, well thats 50% of what I need. I'll see if I can work out the rest.

Thanks!

[asturur]

@alihassan8193 any input here?

[cquintini]

Ok, well thats 50% of what I need. I'll see if I can work out the rest.

Thanks!

Hi were you able to sort this out I'm facing similar issue when trying to redraw canvas with ffmpeg

[paulm17]

@cquintini no. I couldn't get a satisfactory result so I dropped it. I hoping that the project moves along far enough that when I go back to this. It's solvable.

[asturur]

There aren't moving pieces around this feature / part of the project.
Is mostly math that changes depending on the project people are building.

FabricJS has the tools to find any position or bounding box postion, since are always the same 2-3 functions reused over and over.

The missing piece is often in reading ( and having time to do so ) the project the developer is building to better understand what are we looking for.
Examples and docs would help, but also when people solve a challenge or their use case, they do not submit an example or a user story.

[jminardi]

@asturur, regarding your previous comment:

From the example you can get X, Y, W, H from the red box.
but not for Text or Images.

How can I get the X, Y, W, H of the red box if my object is a path (that has been translated, rotated, and scaled)?

[asturur]

i think we could make a dedicate page explaining all the different type of coordinates.