Рисование прямоугольника под PIXI.Text

Question

В словесной игре я пытаюсь нарисовать счет в виде белых чисел над синим (или красным) прямоугольником:

Например, на приведенном выше снимке экрана это число "13".

Вот весь мой класс Score.js (с в настоящее время жестко WIDTH а также HEIGHT):

"use strict";

function Score(color) {
        PIXI.Container.call(this);

        this.interactive = false;
        this.buttonMode = false;
        this.visible = false;

        this.bgGraphics = new PIXI.Graphics();
        this.bgGraphics.beginFill(color, 1);
        this.bgGraphics.drawRect(0, 0, Score.WIDTH, Score.HEIGHT);
        this.bgGraphics.endFill();
        this.addChild(this.bgGraphics);

        this.text = new PIXI.Text('XXX', {font: '20px Arial', fill: 0xFFFFFF});
        this.text.x = 1;
        this.text.y = 1;
        this.addChild(this.text);
}

Score.prototype = Object.create(PIXI.Container.prototype);
Score.prototype.constructor = Score;

Score.WIDTH  = 36;
Score.HEIGHT = 24;

Score.prototype.setText = function(str) {
        this.text.text = str;
}

Интересно, как изменить мой setText() функция, так что новый прямоугольник рисуется при каждом вызове - как ограничивающий прямоугольник для str аргумент?

Я посмотрел на метод PIXI.Text.getBounds(), но он возвращает Matrix и не Rectangle...

Answer 1

Я думаю, что вы можете просто использовать this.text.width, Исторически это было связано с некоторыми ошибками, но это должно работать правильно в последней версии.