New zig-zag fill algorithm does not work as well for my use case
miracle2k opened this issue · 9 comments
This worked quite nicely before, but now it looks like this:
I can extract some sample code if it is helpful for debugging.
Are you rendering svg path?
Yes, it's a SVG path from a font.
can you share the SVG path string?
In the meantime you can revert to the older version of roughjs or only use hachure/cross-hatch/non-zigzag fills for now.
zigzag has been a difficult problem to solve for all sorta shapes :(
I would imagine it's difficult! When I initially tried it, I was actually shocked how well it worked.
Here are some samples that cause issues:
M4.5000 150.1500L4.5000 150.1500Q4.5000 144.7500 6 138.1500Q7.5000 131.5500 10.8000 123.6000L10.8000 123.6000L21.6000 127.8000Q19.2000 134.1000 18 139.3500Q16.8000 144.6000 16.8000 149.1000L16.8000 149.1000Q16.8000 156.7500 21.1500 162Q25.5000 167.2500 32.9250 169.8750Q40.3500 172.5000 49.6500 172.5000L49.6500 172.5000Q60.4500 172.5000 68.5500 170.1750Q76.6500 167.8500 82.0500 164.2500Q87.4500 160.6500 90.0750 156.7500Q92.7000 152.8500 92.7000 149.8500L92.7000 149.8500Q92.7000 147.3000 89.1000 145.4250Q85.5000 143.5500 80.2500 141.6750Q75 139.8000 69.7500 137.3250Q64.5000 134.8500 60.9000 131.1750Q57.3000 127.5000 57.3000 121.8000L57.3000 121.8000Q57.3000 115.8000 60.3750 109.6500Q63.4500 103.5000 68.7750 98.4000Q74.1000 93.3000 80.7000 90.2250Q87.3000 87.1500 94.3500 87.1500L94.3500 87.1500Q100.6500 87.1500 105.0750 88.8750Q109.5000 90.6000 111.6000 92.1000L111.6000 92.1000L106.6500 102.7500Q104.1000 101.5500 100.9500 100.5000Q97.8000 99.4500 94.3500 99.4500L94.3500 99.4500Q90 99.4500 85.5750 101.2500Q81.1500 103.0500 77.4750 106.0500Q73.8000 109.0500 71.5500 112.6500Q69.3000 116.2500 69.3000 119.8500L69.3000 119.8500Q69.3000 122.4000 71.9250 124.5000Q74.5500 126.6000 78.7500 128.4000Q82.9500 130.2000 87.6750 132.0750Q92.4000 133.9500 96.6000 136.1250Q100.8000 138.3000 103.4250 141.1500Q106.0500 144 106.0500 147.9000L106.0500 147.9000Q106.0500 153.6000 102.3000 159.9750Q98.5500 166.3500 91.2000 171.9750Q83.8500 177.6000 73.2750 181.2000Q62.7000 184.8000 48.9000 184.8000L48.9000 184.8000Q36.3000 184.8000 26.2500 181.0500Q16.2000 177.3000 10.3500 169.6500Q4.5000 162 4.5000 150.1500Z
M0.6000 184.5000L0.6000 184.5000L-3.7500 173.1000Q11.4000 168.3000 19.5750 161.7000Q27.7500 155.1000 30.8250 147.8250Q33.9000 140.5500 33.9000 133.9500L33.9000 133.9500Q33.9000 129.7500 33 125.8500Q32.1000 121.9500 29.8500 117Q27.6000 112.0500 23.5500 104.7000L23.5500 104.7000L34.5000 99.1500Q40.2000 108.9000 42.6750 117.6000Q45.1500 126.3000 45.1500 132.9000L45.1500 132.9000Q45.1500 142.3500 42.0750 150Q39 157.6500 33.9750 163.5750Q28.9500 169.5000 23.0250 173.7000Q17.1000 177.9000 11.1750 180.6000Q5.2500 183.3000 0.6000 184.5000Z
Thanks I will take a look.
Btw, hachure, cross-hatch, and other fill styles should still work for you.
Thanks for looking into it! I'm perfectly happy with the old version for now, just did some semver range upgrades :) and noticed this.
Turns out I had published the wrong branch 🤦🏻♂️ - perils of publishing at 1am.
updated that in 4.2.2
Your second path now renders fine. Still issues with the first path
Btw this only happens on certain hachure angles for your shape. If you set the angle to 45
hachureAngle: 45 in your options, you will likely get the desired results
I think I have solved this. It may not look the cleanest in small tight shapes like yours but it will not leak out. May revisit the algorithm again in the future.
Fix should be available in 4.2.3