rough-stuff / rough

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

Ability to pass fill rule through options #210

Open interstates21 opened 2 years ago

interstates21 commented 2 years ago

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
pshihn commented 2 years ago

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

interstates21 commented 2 years ago

@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);