在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。这在历史上有一些bugs associated with it，但它应该在最新版本中正常工作。