rough-stuff/rough

Solid fill goes out of bounds for arcs larger than 180 degrees

alostsock opened this issue · 4 comments

This doesn't seem to affect other fill styles. (Ignore the blue circles, they're from my project):

image

The drawing options used:

bowing: 1
combineNestedSvgPaths: false
curveFitting: 0.97
curveStepCount: 9
curveTightness: 0
dashGap: -1
dashOffset: -1
disableMultiStroke: false
disableMultiStrokeFill: false
fill: "rgba(186, 186, 188, 0.5)"
fillStyle: "solid"
fillWeight: -1
hachureAngle: -41
hachureGap: -1
maxRandomnessOffset: 2
preserveVertices: false
randomizer: Object { seed: -1853553550 }
roughness: 0.3333333333333333
seed: 462144498
stroke: "#1a1f26"
strokeWidth: 1
zigzagOffset: -1

I'm currently working around this by using rc.path instead:

const p1 = rotatePoint(this.origin, [x0 + this.radius, y0], this.start);
const p2 = rotatePoint(this.origin, [x0 + this.radius, y0], this.end);
const path =
	`M ${p1[0]} ${p1[1]}` +
	` A ${this.radius} ${this.radius}` +
	` 0 ${this.end - this.start > Math.PI ? 1 : 0} 1` +
	` ${p2[0]} ${p2[1]}` +
	` L ${x0} ${y0} Z`;
rc.path(path, this.roughOptions);

I tried reproducing it but could not. See: https://codepen.io/shihn/pen/mdMqNbz
Here I randomize the start and end angles whenever you press the button.
Can you tell me what the path value is when you are seeing this issue?
Thanks

Sorry, I should've communicated it better -- the issue is with arc and not path (that was just my workaround):

https://codepen.io/alostsock/pen/GRvOVJP

Thanks for the example. It's indeed a bug. I will release a fix later tonight.

If I don't get a chance to check it in later today, here's a workaround (kinda) until then. Add disableMultiStroke: true in the options. Workaround codepen: https://codepen.io/shihn/pen/ZEJvzYx

Published fix in version 4.4.3