PIXI text size test
Text size doesn't seem to match graphics object size
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
JavaScript
var renderer = PIXI.autoDetectRenderer(900, 500, {antialias: true, backgroundColor: 0xDDDDDD});
var stage = new PIXI.Container();
function drawRect(halfWidth, posY)
{
var rect = new PIXI.Graphics();
rect.beginFill(0x992222, 0.6);
rect.lineStyle(2, 0xFF7777, 1);
rect.moveTo(-halfWidth,-30);
rect.lineTo(halfWidth,-30);
rect.lineTo(halfWidth,30);
rect.lineTo(-halfWidth,30);
rect.position = new PIXI.Point(200,posY);
stage.addChild(rect);
return rect;
}
var rect1 = drawRect(70,50);
var bounds1 = rect1.getBounds();
var centerLabel1 = new PIXI.Text(
"HereIsSomeLongText",
{
font: '40px Arial',
fill: '#555555',
align: 'center'
}
);
rect1.addChild(centerLabel1);
centerLabel1.anchor = new PIXI.Point(0.5, 0.5);
centerLabel1.width = bounds1.width;
centerLabel1.scale.y = centerLabel1.scale.x;
var rect2 = drawRect(70,150);
var bounds2 = rect2.getBounds();
var centerLabel2 = new PIXI.Text("HereIsSomeOtherLongText");
rect2.addChild(centerLabel2);
centerLabel2.anchor = new PIXI.Point(0.5, 0.5);
centerLabel2.width = bounds2.width;
centerLabel2.scale.y = centerLabel2.scale.x;
var rect3 = drawRect(70,250);
var bounds3 = rect3.getBounds();
var centerLabel3 = new PIXI.Text("Here Is Some Really Very Long Text Indeed");
rect3.addChild(centerLabel3);
centerLabel3.anchor = new PIXI.Point(0.5, 0.5);
centerLabel3.width = bounds3.width;
centerLabel3.scale.y = centerLabel3.scale.x;
var rect4 = drawRect(100,350);
var bounds4 = rect4.getBounds();
var centerLabel4 = new PIXI.Text("Here Is Some Really Very Long Text Indeed");
rect4.addChild(centerLabel4);
centerLabel4.anchor = new PIXI.Point(0.5, 0.5);
centerLabel4.width = bounds4.width;
centerLabel4.scale.y = centerLabel4.scale.x;
document.body.appendChild(renderer.view);
renderer.render(stage);