melonJS icon indicating copy to clipboard operation
melonJS copied to clipboard

support using SVG path data when creating a Path2D path

Open obiot opened this issue 2 years ago • 1 comments

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 avatar Aug 06 '23 00:08 obiot

  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

obiot avatar Dec 27 '23 01:12 obiot