search

rough-stuff / rough

Create graphics with a hand-drawn, sketchy, appearance
http://roughjs.com
MIT License
19.83k stars 613 forks source link

Filling a path is always done with non-zero fill-rule #131

Closed ygra closed 4 years ago

ygra commented 4 years ago

Is there an option for even-odd? Otherwise paths with holes are pretty impossible to draw

pshihn commented 4 years ago

can you share an example? it should be even-odd already

ygra commented 4 years ago

https://jsfiddle.net/ck8z6eh4/ Looks non-zero to me. Perhaps because it's two sub-paths where the latter forms the hole, instead of a single sub-path intersecting itself?

ygra commented 4 years ago

Using a different path (taken from the SVG spec), winding direction indeed makes a difference, indicating non-zero-ness:

fill-rule=evenodd image image

fill-rule=nonzero image image

pshihn commented 4 years ago

Yes I do realize the difference. Should definitely fix this Just for notes, few things to consider here: 1) The SVG 'path' fill algorithm at the moment is different than that from other shapes. 2) Is it something that rough should set or should the called set it before drawing the shape - this depends on 1 3) Consider the implementation for Canvas Vs SVG

pshihn commented 4 years ago

I have developed a new algorithm for path filling. Hopefully implement it in the next couple of days.

pshihn commented 4 years ago

Independent of the new algorithm, fixed the evenodd issue in v4.1.3 https://jsfiddle.net/wytpsLr6/2/

jesperkc commented 4 years ago

This problem still exists when using https://unpkg.com/roughjs@4.3.1/bundled/rough.js

https://jsfiddle.net/rwpgx2t0/