CODEWITHSUNDEEP
pixi.js
Alexander Farber
Alexander Farber

Reputation: 22968

Drawing rectangle underneath PIXI.Text

In a word game I am trying to draw score as white numbers above a blue (or red) rectangle:

screenshot

For example, in the above screenshot it is the number "13".

Here is my entire class Score.js (with currently hardcoded WIDTH and 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;
}

I wonder, how to modify my setText() function, so that a new rectangle is drawn on each call - as a bounding rectangle for the str argument?

I have looked at the PIXI.Text.getBounds() method, but it returns a Matrix and not a Rectangle...

Upvotes: 1

Views: 1771

Answers (1)

Patrick
Patrick

Reputation: 138

I think you can just use this.text.width. This has historically had some bugs associated with it, but it should be working right in the latest version.

Upvotes: 1

Related Questions