JSFiddle - React, Tailwind, and code Playground

by UlyssesZhan

HTML

<script src="https://pixijs.download/v7.2.4/pixi.min.js"></script>

JavaScript

const app = new PIXI.Application({ resizeTo: window });
document.body.appendChild(app.view);

class TestText extends PIXI.Container {
	constructor(label, content, style, ClassRef) {
   	super();
  	this.target = new ClassRef(content, style);
    this.label = new ClassRef(label, {
    	fill: '#999',
      fontWeight: 'bold',
      fontSize: 16,
    });
    this.delta = new ClassRef('0ms', {
    	fill: '#999',
      fontWeight: 'bold',
      fontSize: 16,
    });
    this.target.y = 20;
    this.delta.y = 65;
    this.addChild(this.target);
    this.addChild(this.label);
    this.addChild(this.delta);
  }
  async measure() {
  	const startTime = performance.now();
  	for (let i = 0; i < 10; i++) {
       await this.measureOnce();
    }
    const delta = Math.round((performance.now() - startTime) * 1000) / 1000;
    this.delta.text = delta.toString() + 'ms';
  }
  async measureOnce() {
  	return new Promise(resolve => {
      this.target.texture.once('update', () => {
        resolve();
      });
    	this.target.updateText(false);
    });
  }
}

const content = 'Hello world!';
const style = {
	fill: 'white',
  fontSize: 40,
  dropShadow: true,
  letterSpacing: 2,
  dropShadowColor: 'red',
	fontFamily: 'HanWangShinSuMedium-Regular'
};
const originalText = new TestText('PIXI.Text', content, style, PIXI.Text);
const htmlText = new TestText('PIXI.HTMLText', content, style, PIXI.HTMLText);

const loadFont1 = PIXI.Assets.load({
	src: 'https://fastly.jsdelivr.net/gh/kaio/wangfonts/TrueType/wt071.ttf',
	loadParser: 'loadWebFont',
	data: { family: 'HanWangShinSuMedium-Regular' }
});
const loadFont2 = htmlText.target.style.loadFont(
	'https://fastly.jsdelivr.net/gh/kaio/wangfonts/TrueType/wt071.ttf',
	{ family: 'HanWangShinSuMedium-Regular' }
);
Promise.all([loadFont1, loadFont2]).then(() => {
	htmlText.x = app.screen.width / 2 | 0;
	app.stage.addChild(originalText, htmlText);
	setInterval(async () => {
			await htmlText.measure();
			await originalText.measure();
	},...