Custom Line Object for Measuring Small Distances with Accuracy

[matus177]

Question: I'm trying to create a custom measurement tool in Angular and Fabricjs, similar to the built-in length measurement feature in Acrobat. However, I'm having an issue with rendering the line object when measuring longer distances. When I start measuring (holding the mouse button and moving), the arrow object from a specific length is not rendered correctly.

Problem: The issue only occurs when using the latest version of fabricjs. If I switch to an older version (1.5.0), the measurement works as expected. Can you please help me identify what's missing or what's changed in the latest version that's causing this issue? What need to be adjusted?

Additional Questions: Are there any other tips or suggestions on how to improve the measurement functionality or make it more similar to the built-in Acrobat Reader measurement tool? Any help or guidance would be greatly appreciated.

Demo: Measuring tool

[asturur]

I do not know the acrobat measuring tool.
Something that changed from 1.5.0 onward was the inclusion of stroke in the bounding box of the shape.
Also fabric 1.7 introduced caching compared to 1.5.0

There may be various issues, you are not very specific on what isn't working as expected.

[matus177]

Thanks for reply. The problem is when you press and hold mouse and draw arrow further from start point. Also be sure you have selected fabric version 1.7.20 Arrows are deformed or not rendered properly.

Good result on small distance:

Bad result on longer distance:

Try it on yourself to draw arrows on longer distance and see issue, I hope it was better specified.

[matus177]

@asturur any hint to this please?

[matus177]

Ok, solution for this is set strokeWidth property.