From 9edcf4446f07188e14be41a7381c7877f8aad4fd Mon Sep 17 00:00:00 2001 From: shukantpal Date: Mon, 7 Oct 2024 15:18:32 -0700 Subject: [PATCH] Text rendering check --- examples/pages/svg/text/index.ts | 31 +++++++++++++++++++++++++++ examples/public/svg/image.html | 5 +++++ examples/public/svg/text.html | 14 ++++++++++++ examples/rollup.config.js | 1 + packages/svg/src/SVGGraphicsNode.ts | 2 +- packages/svg/src/SVGScene.ts | 3 +-- packages/svg/src/SVGTextEngineImpl.ts | 18 ++++++---------- 7 files changed, 60 insertions(+), 14 deletions(-) create mode 100644 examples/pages/svg/text/index.ts create mode 100644 examples/public/svg/text.html diff --git a/examples/pages/svg/text/index.ts b/examples/pages/svg/text/index.ts new file mode 100644 index 0000000..21d3ca7 --- /dev/null +++ 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 = ` + + Hello, 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 index 7d32c76..4483f02 100644 --- a/examples/public/svg/image.html +++ b/examples/public/svg/image.html @@ -4,5 +4,10 @@ + diff --git a/examples/public/svg/text.html b/examples/public/svg/text.html new file mode 100644 index 0000000..af0feab --- /dev/null +++ b/examples/public/svg/text.html @@ -0,0 +1,14 @@ + + + + + + +
Hello, HTML!
+ + + diff --git a/examples/rollup.config.js b/examples/rollup.config.js index cbe8b22..57f3890 100644 --- 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 index fb52bf8..301ddd8 100644 --- 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 index 2e105e5..eb9b978 100644 --- 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 index 0100697..fc45a13 100644 --- 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); - } + }; }