Fix handling gradient units, fill style matrix, and ellipse segmentation

ShukantPal · Oct 7, 2024 · c6cd94d · c6cd94d
1 parent f1ad015
commit c6cd94d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 60 deletions.
diff --git a/examples/pages/svg/path/index.ts b/examples/pages/svg/path/index.ts
@@ -6,8 +6,8 @@ const svg = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 356">
   <defs>
     <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:lightblue;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:purple;stop-opacity:1" />
+      <stop offset="0%" stop-color="lightblue" />
+      <stop offset="100%" stop-color="purple" />
     </linearGradient>
   </defs>
 

diff --git a/examples/public/svg/path.html b/examples/public/svg/path.html
@@ -23,8 +23,8 @@
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
         <defs>
             <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" style="stop-color:lightblue;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:purple;stop-opacity:1" />
+                <stop offset="0%" stop-color="lightblue" />
+                <stop offset="100%" stop-color="purple" />
             </linearGradient>
         </defs>
 

diff --git a/packages/svg/src/SVGGraphicsNode.ts b/packages/svg/src/SVGGraphicsNode.ts
@@ -69,7 +69,7 @@ export class SVGGraphicsNode extends Graphics
         const sweepAngle = endAngle - startAngle;
 
         // Choose a number of segments such that the maximum absolute deviation from the circle is approximately 0.029
-        const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
+        const n = devicePixelRatio * Math.ceil(2.3 * Math.sqrt(rx + ry));
         const delta = (anticlockwise ? -1 : 1) * Math.abs(sweepAngle) / (n - 1);
 
         tempMatrix.identity()

diff --git a/packages/svg/src/SVGScene.ts b/packages/svg/src/SVGScene.ts
@@ -6,7 +6,7 @@ import * as Loader from './loader';
 import { NODE_TRANSFORM_DIRTY, TRANSFORM_DIRTY } from './const';
 import { PaintProvider } from './paint/PaintProvider';
 import { PaintServer } from './paint/PaintServer';
-import { Bounds, Container, Matrix, Rectangle, Renderer, RenderTexture, Texture } from 'pixi.js';
+import {Bounds, Container, Matrix, Rectangle, Renderer, RenderTexture, Sprite, Texture} from 'pixi.js';
 import { SVGGraphicsNode } from './SVGGraphicsNode';
 import { SVGImageNode } from './SVGImageNode';
 import { SVGPathNode } from './SVGPathNode';
@@ -18,7 +18,6 @@ import type { Paint } from './paint/Paint';
 import type { SVGSceneContext } from './SVGSceneContext';
 
 const tempMatrix = new Matrix();
-const tempRect = new Rectangle();
 const tempBounds = new Bounds();
 
 /**
@@ -136,10 +135,12 @@ export class SVGScene extends Container
      * @param renderer
      */
     drawPaints(renderer: Renderer): void {
-        for (const node of this._elementToRenderNode.values()) {
+        for (const node of this._elementToRenderNode.values())
+        {
             const paintServers = ((node as any)?.paintServers ?? []) as PaintServer[];
 
-            for (const paintServer of paintServers) {
+            for (const paintServer of paintServers)
+            {
                 paintServer.resolvePaint(renderer);
             }
         }
@@ -635,56 +636,28 @@ export class SVGScene extends Container
                 paintServer.resolvePaintDimensions(bbox.rectangle);
             });
 
-            const geometry = node.geometry;
-            const graphicsData = (geometry as any)?.graphicsData;
-
             console.log(node.context.instructions)
 
-            if (graphicsData)
+            const instructions = node.context.instructions;
+
+            for (const instruction of instructions)
             {
-                graphicsData.forEach((data) =>
+                if (instruction.action !== 'fill' && instruction.action !== 'stroke')
                 {
-                    const fillStyle = data.fillStyle;
-                    const lineStyle = data.lineStyle;
-
-                    if (fillStyle.texture && paintServers.find((server) => server.paintTexture === fillStyle.texture))
-                    {
-                        const width = fillStyle.texture.width;
-                        const height = fillStyle.texture.height;
-
-                        data.fillStyle.matrix
-                            .invert()
-                            .scale(bwidth / width, bheight / height)
-                            .invert();
-                    }
-                    if (fillStyle.matrix)
-                    {
-                        fillStyle.matrix
-                            .invert()
-                            .translate(x, y)
-                            .invert();
-                    }
-
-                    if (lineStyle.texture && paintServers.find((server) => server.paintTexture === lineStyle.texture))
-                    {
-                        const width = lineStyle.texture.width;
-                        const height = lineStyle.texture.height;
-
-                        data.lineStyle.matrix
-                            .invert()
-                            .scale(bwidth / width, bheight / height)
-                            .invert();
-                    }
-                    if (lineStyle.matrix)
-                    {
-                        lineStyle.matrix
-                            .invert()
-                            .translate(x, y)
-                            .invert();
-                    }
-                });
+                    continue;
+                }
+                if (!instruction.data.style.matrix)
+                {
+                    instruction.data.style.matrix = new Matrix();
+                }
+
+                instruction.data.style.matrix
+                    .invert()
+                    .translate(x, y)
+                    .invert();
 
-                geometry.updateBatches();
+                // eslint-disable-next-line dot-notation
+                node.context['onUpdate']();
             }
         }
 

diff --git a/packages/svg/src/paint/PaintServer.ts b/packages/svg/src/paint/PaintServer.ts
@@ -11,10 +11,25 @@ import type { ColorStop } from '@pixi-essentials/gradients';
  */
 function convertLinearGradientAxis(linearGradient: SVGLinearGradientElement): void
 {
-    linearGradient.x1.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
-    linearGradient.y1.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
-    linearGradient.x2.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
-    linearGradient.y2.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
+    if (linearGradient.x1.baseVal.unitType !== SVGLength.SVG_LENGTHTYPE_PERCENTAGE)
+    {
+        linearGradient.x1.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
+    }
+
+    if (linearGradient.y1.baseVal.unitType !== SVGLength.SVG_LENGTHTYPE_PERCENTAGE)
+    {
+        linearGradient.y1.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
+    }
+
+    if (linearGradient.x2.baseVal.unitType !== SVGLength.SVG_LENGTHTYPE_PERCENTAGE)
+    {
+        linearGradient.x2.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
+    }
+
+    if (linearGradient.y2.baseVal.unitType !== SVGLength.SVG_LENGTHTYPE_PERCENTAGE)
+    {
+        linearGradient.y2.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
+    }
 }
 
 /**
@@ -116,13 +131,13 @@ export class PaintServer
                     }
                 }
 
-                paintTexture.resize(width, height, true);
+                paintTexture.resize(width, height);
 
                 return;
             }
         }
 
-        paintTexture.resize(bwidth, bheight, true);
+        paintTexture.resize(bwidth, bheight);
     }
 
     /**