Changing strokeWidth about fabricjs-react HOT 4 CLOSED

thanks for pointing out this, we'll try to create a wrapper for object modifications, so developer does not have to call the fabric render API stuff. but does it work for you to make changes first and then calling the renderAll?

from fabricjs-react.

hi, @oddgrd can you try calling renderAll on canvas you modify the stroke? like

editor?.canvas.renderAll();

from fabricjs-react.

Thank you for your suggestion. I tried using renderAll(), unfortunately it didn't seem to change anything. I was only able to apply the strokewidth change on seemingly arbitrary events, like rescaling and zooming. Luckily I managed to google the correct phrase today, and found this: http://fabricjs.com/fabric-gotchas. My issue is explained in the second-to-last section.

After reading this, those events don't seem so arbitrary anymore, and even though I am not able to set the strokewidth before adding objects, it should appear to work like that for the user. Thanks for making this package, it has saved me a lot of time and headache!

My final code (I also force a component reload for this to take effect):
useEffect(() => { editor?.canvas .getObjects() .map((obj) => obj.set('strokeWidth', strokeWidth)); editor?.canvas.renderAll(); });

from fabricjs-react.

Yes, it now works as I intended. On creating a circle, for example, it is instantly changed to the strokeWidth I set it too. To be spesific: as I add a circle, I also call a function that updates state and causes a component update, on component update the useEffect hook gets all objects and sets their strokewidth, and then I call renderAll(). (to optimize I will probably change it to only affect the last added object). If I don't call renderAll() here, it only changes width on the objects after I select them.

To add some feedback from my experience:
The thing I spent the most time on is zoom-to-point on scroll functionality. Other things I made using fabric API is save(as dataless json) and add background img, and I am working on load from data and undo/redo.

from fabricjs-react.