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 #167

Closed jesperkc closed 2 years ago

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/

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

Originally posted by @ygra in https://github.com/pshihn/rough/issues/131#issuecomment-581187205

fskpf commented 4 years ago

The behavior is also dependant on the combineNestedSvgPaths in combination with the fillStyle. For example test the fill-rule evenodd example from the SVG spec on https://fskpf.github.io/ (where combineNestedSvgPaths is enabled) and cycle through the fill-styles:

From top to bottom (same input): Original SVG // fillStyle hachure // fillStyle solid fillrule-evenodd

Is combineNestedSvgPaths intended to address this problem, e.g. setting it dependant on the nested path direction and its fill-rule, so basically switch between "fill or don't fill nested paths"? Though I guess this would not really work for cases where the path contains nested subpaths with both directions (with the surrounding shape's direction and against it), e.g.

<svg viewBox="-10 -10 110 110" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="nonzero" stroke="blue" d="
    M10,0  h90 v90 h-90 z
    M30,20 v20 h50 v-20 z   
    M30,60 h50 v20 h-50 z"/>
</svg>

image

Also, fill-style solid needs to consider this as well.

pshihn commented 2 years ago

Although I have not done any work on winding direction yet, most issues with nested paths should be fixed now: Fixed by https://github.com/rough-stuff/rough/pull/195 Releases as v4.5.0 on npm.

jesperkc commented 2 years ago

Can confirm it works now