svg-path-properties icon indicating copy to clipboard operation
svg-path-properties copied to clipboard

getPointAtLength() result imprecise for large scale paths

Open AndyHuska opened this issue 1 year ago • 0 comments

I have some SVG paths that are very long, 1000s of pixels on an artboard that is 10000 pixels wide.

When using getPointAtLength to do my own special stroking of the lines there is a significant variance from the expected result. For example, a straight vertical line defined as d="m 1833,635.74 c 0,10.99 0,1708.35 0,1730.89" and calling getPointAtLength at multiples of 7 should result in all points having the same X value and Y values that are increments of 7, for example: 1833,636 1833,643 1833,650 1833,657 1833,664 1833,671, 1833,678, 1833,685 1833,692 1833,699 but the actual result gives 1833,635 1833,641 1833,648 1833,657 1832,663 1833,669 1832,677 1833,684 1833,690 1833,698

inspecting the floating point x component values of 1832 vs 1833 shows that its a floating point math issue that I can round in my application, but the y values are way off. Looking at bezier-functions.ts I tried changing line 153 while (error > 0.001) { to while (error > 0.0001) { and that fixed the issue. I don't understand the algorithm, but I'm guessing that changes the max error from 0.1% to 0.01% which is necessary for my situation where the values reach into the range where 0.1% is more than an entire pixel. I additionally increased the max iterations to be safe, but I did not do any research to see what the balance is. If my understanding is correct then it may be possible to make the allowable error vary based on the scale to help large images, but it would not help at the microscopic scale if someone cares about highly precise results in a small range. Maybe a way to set the precision via the API would help all parties.

AndyHuska avatar Jan 31 '24 23:01 AndyHuska