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鈥檒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

Merged
merged 3 commits into from
Oct 20, 2023
Merged

Conversation

achamas-playco
Copy link
Collaborator

@achamas-playco achamas-playco commented Oct 18, 2023

馃 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 dependency parse-svg-path to simplify the parsing of SVG paths, and adds a new test scene file svg.scene.ts to demonstrate and verify the functionality.

To render SVGs with Graphics
We need to parse paths with some tricks
We use parse-svg-path
To simplify the math
And fix the bug with subpaths' mix

Walkthrough

  • Add parse-svg-path dependency to parse SVG path commands (link)
  • Simplify logic of converting SVG path commands to graphics path using parse function (link, link, link)
  • Handle multiple subpaths in SVG path by tracking start and end points of each subpath (link)
  • Add test scene svg.scene.ts to render SVG graphic of PixiJS and JS logo using Graphics.svg method (link)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 18, 2023

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:

Sandbox Source
pixi.js-sandbox Configuration


// TODO optimise and cache the paths?
export function SVGToGraphicsPath(svgPath: string, path: GraphicsPath): GraphicsPath
{
// get commands removing spaces at the end
Copy link
Collaborator Author

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.

break;
case 'Z':
case 'z':
path.closePath();
if (subpaths.length > 0)
Copy link
Collaborator Author

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.

Copy link
Member

@GoodBoyDigital GoodBoyDigital left a 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.

src/scene/graphics/shared/svg/SVGToGraphicsPath.ts Outdated Show resolved Hide resolved
src/scene/graphics/shared/svg/SVGToGraphicsPath.ts Outdated Show resolved Hide resolved
Copy link
Member

@GoodBoyDigital GoodBoyDigital left a 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 !!

@GoodBoyDigital GoodBoyDigital merged commit c7574d7 into next-v8 Oct 20, 2023
3 checks passed
@GoodBoyDigital GoodBoyDigital deleted the fix-svg branch October 20, 2023 11:36
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

Successfully merging this pull request may close these issues.

None yet

2 participants