bigtimebuddy / pixi-svg Goto Github PK
View Code? Open in Web Editor NEWSVG to Graphics DisplayObject for pixi.js
Home Page: https://npmjs.com/pixi-svg
License: Other
SVG to Graphics DisplayObject for pixi.js
Home Page: https://npmjs.com/pixi-svg
License: Other
Instead of drawing everything in one Graphics object, make a new child Graphics object for each SVG element.
This would result in a Pixi scene graph tree, which would make it possible to traverse the tree and apply translations, rotations, etc, to individual Graphics objects, just like working with any existing Pixi tree.
Currently, if one wants to animate something, they have to re-render the whole SVG each tick, which is much more expensive than (for example) finding a sub-node and modifying only that sub-node.
You've got the drawing commands mapped, you just need create the child Graphics objects, then apply the same drawing commands in the child Graphics.
Basically, instead of rendering all commands into the Graphics object passed into SVGGraphics.drawSVG
, you would add children to that Graphics object, and apply commands to each child corresponding to each SVG elements, and etcetera for children of those children.
The result would be a tree that is similar in structure to the SVG DOM tree.
Earcut makes ugly fills. 😕 I wish there was a solution. Do you know what I mean?
Consider using something like tinycolor
. I think that can be faster than measureColor
.
I know you're thinking of deprecating this package, but just wanted to report my findings upstream since I took your code.
In section $8.3.6 of the SVG 1.1 specifications, it describes the s/S commands are smooth cubic bezier curves. However, pixi-svg treats them as quadratic bezier curves.
I implemented them here if you need them:
Why I cannot render this element?
<svg><path d="M476.98922567641745,249.94509216279818m0,13239.074933118814a13239.074933118814,13239.074933118814 0 1,1 0,-26478.14986623763a13239.074933118814,13239.074933118814 0 1,1 0,26478.14986623763z"></path></svg>
I get this
[PIXI.SVG] Draw command not supported: a
Trying to use this with the output from: https://github.com/jankovicsandras/imagetracerjs
Getting the following error:
pixi-svg.js:8 Uncaught (in promise) TypeError: t.getAttribute is not a function
at e._svgStyle (pixi-svg.js:8)
at e._svgFill (pixi-svg.js:8)
I won't paste the entire imagetracer svg here, but it's all of the following type:
...
Hi there again,
The reason why I am posting is that I am trying to move a data visualization created in d3 in PIXI. And it is complex as I using a cartographic projection.
I have a dumb issue with cleaning the screen. The previous rendering in PIXI was utterly cleaned, but here I have an overlapping with each cycle of drawing. May someone check if I am coding properly? Thanks, it is appreciated!
const projection = d3.geoMercator()
const geoPath = d3.geoPath(projection)
export function drawLinks() {
stage.clear()
s.links.forEach(link => {
const path = geoPath({
type: "LineString",
coordinates: [link.source.spherical, link.target.spherical]
})
let element = document.createElement('svg');
element.innerHTML = '<path stroke="black" stroke-width=".1" fill='none' d='${path}' />'
const svg = new SVG(element)
stage.addChild(svg)
})
}
When this lib supports some attributes like fill-rules, defs, radialGradient, stop?
Bug found here:
pixijs/pixijs#7753
peerDepencencies version for @pixi/graphics
is ^5 and should get upgraded to include 6, or else this will create issues with typings and having a mix of v5 and v6 of PixiJS.
Line 313 in 70fe649
The correct implementation is:
case 'C': {
this.bezierCurveTo(
command.cp1.x,
command.cp1.y,
command.cp2.x,
command.cp2.y,
x = command.end.x,
y = command.end.y
);
break;
}
C is absolute (including control points)
Hi ,
i've installed pixi-svg and imported as an es6 but during usage it throws an error
SVG.js:12 Uncaught ReferenceError: PIXI is not defined
Seems like it needs PIXI saved in the window object
To avoid this error i need to use like this
import * as PIXI from 'pixi.js'
window.PIXI = PIXI
import {SVG} from 'pixi-svg'
const svg = new PIXI.SVG(document.getElementById('svg1').outerHTML);
Thank You!
I´m wondering if it is possible to access the PIXI.DisplayObject properties from from the generated Graphics like so:
const svgSrc = PIXI.Loader.shared.resources['assets/frame.svg'].data;
const createdGraphic = new SVG(svgSrc);
createdGraphic.width = 100;
If I´m logging createdGraphic
the output looks like the usual DisplayObject Data, but I can´t access it´s methods.
(I´m using loader.shared to fetch all resources before init)
I used your code in @pixi-essentials/svg @bigtimebuddy. Haha, and got this strange bug that messed up my client's figures.
I realized it occurred at 'm' (relative) commands after 'Z' (closePath). It was because you aren't updating the current point after closing the path.
In the SVG specification (section 8.3.3), it says:
At the end of the command, the new current point is set to the initial point of the current
subpath.
Just wanted to forward this fix from @pixi-essentials/svg to here.
x = this.currentPath.points[0] || 0;
y = this.currentPath.points[1] || 0;
this.closePath();
(here
Line 351 in 89e4ab8
Hi, How to change the SVG fill and stroke after object rendered? tried this way but didn't update any fill color.
svgObject.beginFill(0xf1c40f)
svgObject.endFill();
https://codesandbox.io/s/pixijs-examples-events-hit-test-forked-f9ttqe
There is a known bug that I've patched with d-path-parser documented here: MaxArt2501/d-path-parser#1
It affects paths with H0 and V0 commands. The bug results in these commands being ignored (and of course your svg paths looking incorrect).
The author of d-path-parser hasn't published the new version yet, but when they do pixi-svg will need to update it in the package.json.
I am trying to check if the arc command is actually working as intended, but keep getting the module error.
Here is a code sandbox showing it.
https://codesandbox.io/s/pixijs-examples-events-hit-test-forked-yxtdjh
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.