diff --git a/examples/pages/svg/path/index.ts b/examples/pages/svg/path/index.ts index 9235932..1a922b2 100644 --- a/examples/pages/svg/path/index.ts +++ b/examples/pages/svg/path/index.ts @@ -4,7 +4,7 @@ import { Ticker } from 'pixi.js'; const svg = ` - + diff --git a/packages/svg/src/SVGGraphicsNode.ts b/packages/svg/src/SVGGraphicsNode.ts index 4ecf69d..e0cf073 100644 --- a/packages/svg/src/SVGGraphicsNode.ts +++ b/packages/svg/src/SVGGraphicsNode.ts @@ -1,15 +1,16 @@ -import { EllipticArcUtils } from './utils/EllipticArcUtils'; import { Matrix, Graphics, + Point, + GraphicsPath, } from 'pixi.js'; -import type { DashedStrokeStyle, ConvertedDashedStrokeStyle } from './style/DashedLineStyle'; import type { PaintServer } from './paint/PaintServer'; import type { Renderer } from 'pixi.js'; import type { SVGSceneContext } from './SVGSceneContext'; const tempMatrix = new Matrix(); +const tempPoint = new Point(); /** * This node can be used to directly embed the following elements: @@ -129,10 +130,15 @@ export class SVGGraphicsNode extends Graphics } // See https://www.w3.org/TR/SVG2/implnote.html#ArcImplementationNotes - this.context['_activePath'].shapePath['_ensurePoly'](); - const points: ReadonlyArray = this.context['_activePath'].shapePath['_currentPoly'].points; - const startX = points[points.length - 2]; - const startY = points[points.length - 1]; + /* eslint-disable dot-notation */ + const activePath = this.context['_activePath'] as GraphicsPath; + + activePath.shapePath['_ensurePoly'](); + activePath.getLastPoint(tempPoint); + /* eslint-enable dot-notation */ + + const startX = tempPoint.x; + const startY = tempPoint.y; const midX = (startX + endX) / 2; const midY = (startY + endY) / 2; diff --git a/packages/svg/src/SVGPathNode.ts b/packages/svg/src/SVGPathNode.ts index 8f2864d..e92d4b9 100644 --- a/packages/svg/src/SVGPathNode.ts +++ b/packages/svg/src/SVGPathNode.ts @@ -1,8 +1,8 @@ -import { FILL_RULE, Path, PATH } from './utils/Path'; import { SVGGraphicsNode } from './SVGGraphicsNode'; -import { buildPath } from './utils/buildPath'; import dPathParser from 'd-path-parser'; +import { GraphicsPath, Point } from 'pixi.js'; +const tempPoint = new Point(); /** * Draws SVG <path /> elements. @@ -11,49 +11,6 @@ import dPathParser from 'd-path-parser'; */ export class SVGPathNode extends SVGGraphicsNode { - private currentPath2: Path; - - private startPath(): void - { - if (this.currentPath2) - { - const pts = this.currentPath2.points; - - if (pts.length > 0) - { - this.currentPath2.closeContour(); - } - } - else - { - this.currentPath2 = new Path(); - } - } - - private finishPath(): void - { - if (this.currentPath2) - { - this.currentPath2.closeContour(); - } - } - - closePath(): any - { - this.currentPath2.points.push(this.currentPath2.points[0], this.currentPath2.points[1]) - this.finishPath(); - - return this; - } - - checkPath(): void - { - if (this.currentPath2.points.find((e) => isNaN(e)) !== undefined) - { - throw new Error('NaN is bad'); - } - } - // Redirect moveTo, lineTo, ... onto paths!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! :P //startPoly = this.startPath; //finishPoly = this.finishPath; @@ -121,8 +78,12 @@ export class SVGPathNode extends SVGGraphicsNode } case 'z': case 'Z': { - x = this.currentPath2?.points[0] || 0; - y = this.currentPath2?.points[1] || 0; + // eslint-disable-next-line dot-notation + const activePath = this.context['_activePath'] as GraphicsPath; + + activePath.getLastPoint(tempPoint); + x = tempPoint.x; + y = tempPoint.y; this.closePath(); break; } @@ -185,7 +146,7 @@ export class SVGPathNode extends SVGGraphicsNode cp1.y = (2 * y) - lastCp2.y; } - const cp2 = { x: command.cp.x , y: command.cp.y }; + const cp2 = { x: command.cp.x, y: command.cp.y }; if (command.relative) { @@ -312,13 +273,6 @@ export class SVGPathNode extends SVGGraphicsNode } } - if (this.currentPath2) - { - this.currentPath2.fillRule = element.getAttribute('fill-rule') as FILL_RULE || this.currentPath2.fillRule; - this.drawShape(this.currentPath2 as any); - this.currentPath2 = null; - } - return this; } }