Doubt about the Plugin Fabric.js

[prof.lucasmansueto]

Hi there,

I’m working on a project using the Fabric.js plugin in Bubble, and I have a few questions regarding object positioning and referencing.

1. Is it possible to draw a shape, like a rectangle, and have its position automatically saved to the database, including properties like X and Y coordinates, width, height, etc.?

2. Also, would I be able to reference this shape from outside the editor? For instance, could I link an item, such as a label or text box outside the Fabric.js editor, to this specific shape? My goal is to create references that highlight terms in the image, allowing labels or descriptions to correspond to specific highlighted areas.

Thank you for any insights or guidance on how to implement these features!

[Stephan]

Hello @prof.lucasmansueto ,

Thank you for reaching out to us.

Regarding your question, when you create a rectangle or another shape, you can save those properties if you are using dynamic values. In the actions, you have the fields “Top” and “Left” for the X and Y coordinates, as well as the width and height.

However, the use case you described is not fully clear. Is your question about the possibility of having these values as states when you click on an element? Could you please explain more about how you envision such functionality to work with the plugin?

Thanks, and I look forward to your reply.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[prof.lucasmansueto]

Thanks for your reply.

Here’s a short video demonstrating what I’m envisioning:

Plataforma para Corretores

[Stephan]

Hello @prof.lucasmansueto,

Thank you for your message and the video.

From the video you shared, I understand that you would like to point to the added elements inside the canvas—is that correct?

While using the plugin, you can add shapes with lower opacity, as shown in the video, and add text to the image in the canvas. However, pointing them outside the element is currently not possible, unfortunately.

If you would like us to explore the possibility of adding such an improvement using the fabric.js library utilized by the plugin, you can complete this sponsoring form: Interface Form - Airtable
Our development team will assess its feasibility and provide an estimate of the required hours and the associated cost if it can be implemented.

Thank you for your understanding, and I wish you a great day ahead!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble