rough-stuff/rough

Ability to pass fill rule through options

interstates21 opened this issue · 2 comments

Hi! We're using rough.js for our application. We're facing issues with rendering path-based shapes due to the fill rule update. Would be very helpful to pass a certain fill rule via options.

In our case, there's no way to set non-zero to a cylinder path and filling is inconsistent
Screenshot 2022-07-27 at 17 33 57
Screenshot 2022-07-27 at 17 24 33

Can you share the SVG or code to create that shape?
Just want it add it for reference for any code changes. Thanks

@pshihn sure!
Let me know if it works

   const height = 100
	const width = 100
	const r = width / 2;
	const tilt = 0.3;

    const relativeHeight = height - (2 * tilt * r);
    const rt = Math.round(tilt * r * 1000) / 1000;

    const path = `M 0,${rt} a ${r},${rt} 0,0,0 ${width} 0 a ${r},${rt} 0,0,0 ${-width} 0 l 0,${relativeHeight} a ${r},${rt} 0,0,0 ${width} 0 l 0,-${relativeHeight}`;
	
	const options = {
		stroke: "#000000",
		fill: "#333399",
	}

	generator.path(path, options);