BitmapText Positioning

[MattC]

Hi,

I've been having difficulties understanding exactly how the positioning of BitmapText works. I'm trying to align text so it's bottom right corner is positioned at a particular point. I do this by setting the anchor to (1,1) and x/y appropriately.

However, when I try to do so, the text is always off by a few pixels. I'm having quite a difficult time figuring out exactly why.

Below is a code snip that renders text and a rectangle. My intention is to have the bottom right corner of both the text and rectangle be aligned. These are the results:

I've tried everything I can think of to correct these small discrepancies. Probably something small and stupid I'm doing wrong, but really can't figure it out. Thanks. 

 

const app = new PIXI.Application({ width: 500, height: 500, backgroundColor: "white" });
document.body.appendChild(app.view);

PIXI.BitmapFont.from("font1", {
	fill: "black",
	fontSize: 30,
	stroke: "blue",
	strokeThickness: 3,
});

const x = 200;
const y = 200;

const text = new PIXI.BitmapText("FirstName123", { fontName: "font1" });
text.anchor.set(1, 1);
text.x = x;
text.y = y;

const rect = new PIXI.Graphics();
rect.beginFill(0xff0000);
rect.drawRect(0, 0, 150, 40);
rect.pivot.set(rect.width, rect.height);
rect.x = x;
rect.y = y;

app.stage.addChild(rect);
app.stage.addChild(text);

 

[jasonsturges]

Appears that Bitmap text is not accounting for the stroke you've applied - blue, thickness 3px:

Not sure how dynamic you need that to be, but some glyph editors would enable you to apply stroke to the font itself:

[MattC]

@jasonsturges Thanks for the reply! I'll look into fixing the stroke offset.

 

Still looking into why the right justification is off. It varies based on the characters used in whatever string is being rendered. Does not seem to be related to stroke width. 🤷‍♂️