Use getLastPoint for correctly get the starting point of an ellipse i…

…n SVGGraphicsNode.
ShukantPal · Oct 4, 2024 · da91585 · da91585
1 parent e27c4a0
commit da91585
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 62 deletions.
diff --git 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 = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 356">
-    <!-- Circle -->
+  <!-- Circle -->
   <path d="M 100,100 m -50,0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0" fill="#ef4444" stroke="black" />
   
   <!-- Ellipse -->

diff --git 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<number> = 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
@@ -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 &lt;path /&gt; 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;
     }
 }