Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to pass fill rule through options #210

Open
interstates21 opened this issue Jul 27, 2022 · 2 comments
Open

Ability to pass fill rule through options #210

interstates21 opened this issue Jul 27, 2022 · 2 comments

Comments

@interstates21
Copy link

interstates21 commented Jul 27, 2022

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
Copy link
Collaborator

pshihn commented Jul 27, 2022

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

@interstates21
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants