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

support using SVG path data when creating a Path2D path #1198

Open
obiot opened this issue Aug 6, 2023 · 1 comment
Open

support using SVG path data when creating a Path2D path #1198

obiot opened this issue Aug 6, 2023 · 1 comment
Labels

Comments

@obiot
Copy link
Member

obiot commented Aug 6, 2023

Describe the bug
Event though the Path2D implementation has been greatly improved over the last few versions (e.g. better API and support for subpaths), it is not possible today to create a Path2D using a SVG path.

Expected behavior
Extend or finalise the current Path2D implementation in melonJS to accept SVG path such as M173 102a51 51 0 1 1-13-30m20 37h-53, so that SVG can properly be rendered/scaled/transformed/animated in WebGL.

Additional context
https://css-tricks.com/rendering-svg-paths-in-webgl/

@obiot obiot added the Bug label Aug 6, 2023
obiot added a commit that referenced this issue Dec 27, 2023
unoptimized and only works for basic shapes for now
@obiot
Copy link
Member Author

obiot commented Dec 27, 2023

  1. Drawing (parsing) a basic Square works
renderer.translate(100, 100);
renderer.path2D.parseSVGPath("M10 10 h 80 v 80 h -80 Z");
renderer.setColor("blue");
renderer.stroke();
Screenshot 2023-12-27 at 9 40 00 AM
  1. Drawing (parsing) a basic Triangle works
renderer.translate(0, 100);
renderer.path2D.parseSVGPath("M 100 100 L 300 100 L 200 300 z");
renderer.setColor("green");
renderer.stroke();
Screenshot 2023-12-27 at 9 41 00 AM
  1. drawing (parsing) complex shapes like a heart below, do not work for now
renderer.translate(0, 100);
renderer.path2D.parseSVGPath("M 10 30 A 20 20 0 0 1 50 30 A 20 20 0 0 1 90 30 Q 90 60 50 90 Q 10 60 10 30 z");
renderer.setColor("red");
renderer.stroke();
Screenshot 2023-12-27 at 9 42 24 AM
  1. only works for now through the WebGL renderer

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

No branches or pull requests

1 participant