search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.82k stars 3.5k forks source link

Fabric js + Vue js Canvas Bug #6648

Closed D-Cryp7 closed 3 years ago

D-Cryp7 commented 3 years ago

Hi! I'm making an e-commerce application using Vue js. The e-commerce system consists in a Collage Maker for each product, where i can upload images from the Cloudinary platform, and i can drag the uploaded images with Vue-Draggable to a Canvas created with Fabric js. So, i use "npm install fabric" to use Fabric js in Vue js with " import { fabric } from "fabric" ", and i use the mounted() function for the Canvas Object creation like this: mounted Where the lines 396 and 398 are the important in this case and the initAligningGuidelines function is equal to the initAligningGuidelines function of Fabric js lib. So, in other functions i use document.getElementById("canvas").fabric to manipulate the Canvas. So, the Collage Maker system works like this: collagemaker1 And i can upload photos with Cloudinary using the "Subir fotos" option. After that process, the system looks like this: collagemaker2 Where i use Vue-Draggable to drag and drop the upload images in the "Imagenes" section to the "Collage Maker section" with this function: tofabric Where evt is the event that Vue-Draggable detects and if the event is an adition in the Canvas section, then i create a Fabric Image Object from URL. At this point it's all okay in my application, i can align images, add text with different colors and fonts to make a decent Collage, but there is a problem. In my PC, working in development and production mode works all okay without problems, but in the PC of other member of the development team all looks so bad and buged. When he tries to upload and image and drag it to the Canvas, it looks like this: bug The edit borders to do the object scaling events are in a wrong size and if he move objects, the edit borders stay in the right section of the Canvas. I don't know what's happening here, we are three members in the development team and in my PC worked, in the PC of the other member worked and in the PC of the last member there is a horrible bug, and we upload the app to Heroku and the same problem, in my PC worked and in others do but in others makes this bug.

I hope that the context of the problem has been explained clearly, at this point i'm thinking what i can do to solve this, I will be very grateful if anyone can help me with this problem, thanks!

asturur commented 3 years ago

I do not think we can so anything with this description. You have to move out of the app and make the problem happen in a simple context, codepen or jsfiddle.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.