Text rendering check

ShukantPal · Oct 7, 2024 · 9edcf44 · 9edcf44
1 parent c422ae3
commit 9edcf44
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 14 deletions.
diff --git a/examples/pages/svg/text/index.ts b/examples/pages/svg/text/index.ts
@@ -0,0 +1,31 @@
+import { main } from '../../../src/main';
+import { SVGScene } from '@pixi-essentials/svg';
+import { Ticker } from 'pixi.js';
+
+const svg = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 356">
+    <text x="0" y="250" fill="blue" font-family="Helvetica" font-size="72">Hello, SVG!</text>
+</svg>
+`.trim();
+
+main((app) =>
+{
+    app.render = app.render.bind(app);
+
+    const svgElement = new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement as unknown as SVGSVGElement;
+    const svgScene = new SVGScene(svgElement);
+
+    svgScene.drawPaints(app.renderer);
+
+    app.stage.addChild(svgScene);
+
+    Ticker.shared.addOnce(app.render);
+
+    Object.assign(window, {
+        svgElement,
+    });
+}, {
+    backgroundColor: 0xffffff,
+    height: 500,
+    width: 500,
+});
diff --git a/examples/public/svg/image.html b/examples/public/svg/image.html
@@ -4,5 +4,10 @@
 </head>
 <body>
 <canvas id="view"></canvas>
+<style>
+    canvas {
+        border: 1px solid black;
+    }
+</style>
 </body>
 </html>
diff --git a/examples/public/svg/text.html b/examples/public/svg/text.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+    <script src="../bundles/svg/text/index.js" type="module"></script>
+</head>
+<body>
+<canvas id="view"></canvas>
+<div style="color: blue; font: normal normal normal 72px Helvetica;">Hello, HTML!</div>
+<style>
+    canvas {
+        border: 1px solid black;
+    }
+</style>
+</body>
+</html>
diff --git a/examples/rollup.config.js b/examples/rollup.config.js
@@ -27,6 +27,7 @@ module.exports = [
     config('pages/gradients/index.ts'),
     config('pages/svg/image/index.ts'),
     config('pages/svg/path/index.ts'),
+    config('pages/svg/text/index.ts'),
     config('pages/texture-allocator/atlas/index.ts'),
     config('pages/texture-allocator/canvas/index.ts'),
 ];
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 = devicePixelRatio * Math.ceil(2.3 * Math.sqrt(rx + ry));
+        const n = (window.devicePixelRatio || 1) * 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, Sprite, Texture} from 'pixi.js';
+import { Bounds, Container, Matrix, Rectangle, Renderer, RenderTexture, 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();
 
 /**

diff --git a/packages/svg/src/SVGTextEngineImpl.ts b/packages/svg/src/SVGTextEngineImpl.ts
@@ -4,9 +4,10 @@ import {
     Sprite,
     Texture,
     TextStyle,
+    fontStringFromTextStyle,
 } from 'pixi.js';
 
-import type { PointData, Matrix, Renderer } from 'pixi.js';
+import type { PointData, Matrix } from 'pixi.js';
 import type { SVGTextEngine } from './SVGTextEngine';
 
 /**
@@ -91,9 +92,7 @@ export class SVGTextEngineImpl extends Sprite implements SVGTextEngine
 
         const resolution = window.devicePixelRatio || 1;
 
-        this.canvas.width = w * resolution;
-        this.canvas.height = h * resolution;
-        this.texture.baseTexture.setRealSize(w, h, resolution);
+        this.texture.source.resize(w, h, resolution);
         this.texture.update();
 
         this.context.clearRect(0, 0, w * resolution, h * resolution);
@@ -108,7 +107,7 @@ export class SVGTextEngineImpl extends Sprite implements SVGTextEngine
             const textStyle = new TextStyle(style);
 
             this.context.fillStyle = typeof textStyle.fill === 'string' ? textStyle.fill : 'black';
-            this.context.font = textStyle.toFontString();
+            this.context.font = fontStringFromTextStyle(textStyle);
 
             this.context.fillText(content, position.x, position.y + textMetrics.height);
 
@@ -124,16 +123,13 @@ export class SVGTextEngineImpl extends Sprite implements SVGTextEngine
 
         // Ensure the SVG scene updates its bounds after the text is rendered.
         this.emit(NODE_TRANSFORM_DIRTY);
-     }
+    }
 
-    render(renderer: Renderer): void
+    override onRender = (): void =>
     {
         if (this.updateId !== this.dirtyId)
         {
             this.updateText();
-            this.updateTransform();
         }
-
-        super.render(renderer);
-    }
+    };
 }