-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix SVG path parsing logic to close paths properly #9764
Conversation
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 60bbee0:
|
|
||
// TODO optimise and cache the paths? | ||
export function SVGToGraphicsPath(svgPath: string, path: GraphicsPath): GraphicsPath | ||
{ | ||
// get commands removing spaces at the end |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This whole command parsing section basically got replaced with the 3rd party lib which is more robust and tested.
64355cf
to
749f06b
Compare
break; | ||
case 'Z': | ||
case 'z': | ||
path.closePath(); | ||
if (subpaths.length > 0) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the key to fixing the original bug. SVG spec describes when a path is closed that the current pen position moves to where the last subpaths starting position was, which is why we need to track the subpaths as they're started/ended.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is great! I left a few optimisation suggestions.
This has potential to be very hot code for complex paths, so keen to make it as performant as possible by avoiding any unnecessary memory allocation that could creat GC jank / slow stuff down.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm! nice work @achamas-playco !!
馃 Generated by Copilot at 3e56a29
Summary
馃摝馃帹馃悰
This pull request improves the support for rendering SVG graphics in PixiJS. It refactors and fixes the
SVGToGraphicsPath
function, adds a new dependencyparse-svg-path
to simplify the parsing of SVG paths, and adds a new test scene filesvg.scene.ts
to demonstrate and verify the functionality.Walkthrough
parse-svg-path
dependency to parse SVG path commands (link)parse
function (link, link, link)svg.scene.ts
to render SVG graphic of PixiJS and JS logo usingGraphics.svg
method (link)