Scaling Text via Font Size Adjustment

This demo nullifies the transform scale on the text and scales up the text instead.

by Bouh

HTML

<script src="https://pixijs.download/v5.2.1/pixi.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
     <title>Scaling Text via Font Size Adjustment</title>
  </head>
  <body>
      <canvas id="demo"></canvas>
  </body>
</html>

JavaScript

class TextWrapper extends PIXI.Container {
  constructor() {
    super();
    this.text = this.addChild(new PIXI.Text("This is a scaling test!"));
    this.text.style.fill = 0;
    this.fontSize = this.text.style.fontSize;
  }

  render(renderer) {
    const worldTransform = this.transform.worldTransform;
    const worldScale = 1.0;

    this.scale.set(1 / worldScale);

    this.text.style.fontSize = `${this.fontSize * worldScale}px`;
    this.updateTransform();

    // worldTransform.a & d should be 1 now.
    console.log(this.transform.worldTransform.a);

    super.render(renderer);

    // Cleanup
    this.scale.set(1);
    this.updateTransform();
  }
}

const app = new PIXI.Application({
  view: document.getElementById("demo"),
  width: 512,
  height: 512,
  backgroundColor: 0xfffff
});

const parent = app.stage.addChild(new PIXI.Container());
const wrapper = parent.addChild(new TextWrapper());

// This is the initial scale. You change change this.
let currentScale = 2;

parent.scale.set(currentScale);

app.ticker.add((delta) => {
  const deltaScale = (delta / 10);

  currentScale += deltaScale;
  currentScale = currentScale % 15;

	// Comment this out to stop the animation.
  parent.scale.set(currentScale + 1);
});