如何在 PIXI.js 的本地容器中将文本对象居中答案

【问题标题】：how to center a text object within it's containers local in PIXI.js如何在 PIXI.js 的本地容器中将文本对象居中
【发布时间】：2017-03-05 19:38:36
【问题描述】：

请查看以下 JSFiddle：https://jsfiddle.net/r4yfozsw/1/

var stage = new PIXI.Container(),
    renderer = PIXI.autoDetectRenderer(640, 480),
    loader = PIXI.loader,
    resources = loader.resources;

var menu = createMenu();

document.body.appendChild(renderer.view);
stage.addChild(menu);

//Render the stage
loop();


function loop(){
    setInterval(() => {
          renderer.render(stage);
      }, 1000/10 );
 }

function createMenu(){
    var buttons = new PIXI.Container();
    buttons.addChild(createButtonEndTurn());
    return buttons;
}

function createButtonEndTurn(){
    var buttonText = new PIXI.Text("End Turn",
                                   {
                                       fontFamily : 'Arial',
                                       fontSize: 24,
                                       fill : "white",
                                       align : 'right'
                                   });
    var buttonEndTurn = new PIXI.Graphics();

    buttonEndTurn.beginFill(0xFF2342);
    buttonEndTurn.drawRect(400,300,150,100);
    buttonEndTurn.endFill();
    buttonEndTurn.interactive = true;
    buttonEndTurn.on('mousedown', endTurnEvent);
    buttonEndTurn.addChild(buttonText);

    return buttonEndTurn;
}

function endTurnEvent(eventData){
    eventData.target.children[0].setText("End Turn" + turn);
    turn++;
    console.log("Turn " + turn + " finished!");
}

我小时候将 Text 对象添加到我的按钮矩形中。我还为文本添加了选项align。因此，我希望文本在本地按钮中居中 - 但它已被渲染到画布中的任意位置。你能告诉我这里PIXI.js的容器系统有什么不明白的地方吗？

【问题讨论】：

标签： javascript text pixi.js

【解决方案1】：

您的文本没有出现在矩形内的原因是您绘制矩形的方式。将 Graphics 对象视为一个容器。在该容器中，您在位置{x:400, y:300} 处绘制了一个矩形，但容器本身仍位于位置{x:0, y:0}。因此，当您添加文本对象时，它也位于容器内的位置{x:0, y:0}。如果你想让你的文本在矩形内移动，你需要移动容器的位置。

buttonEndTurn.beginFill(0xFF2342);
buttonEndTurn.drawRect(0,0,150,100);
buttonEndTurn.endFill();
buttonEndTurn.x = 400;
buttonEndTurn.y = 300;

现在至于对齐方式，您必须手动设置。在这里设置align : 'center'不会有帮助，因为这只对多行文本真正有用。它不会在其父容器中对齐文本；它只是使多行文本对象中的每一行都与中间对齐。

使对象中心在父容器内对齐的最简单方法是设置锚点：buttonText.anchor.x = 0.5;

现在文本将从它的中点锚定，但如您所见，它没有正确定位在父矩形内。所以把它移过来：buttonText.x = buttonEndTurn.width/2;

这是完整的功能：

function createButtonEndTurn(){

    var buttonEndTurn = new PIXI.Graphics();
    buttonEndTurn.x = 400;
    buttonEndTurn.y = 300;
    buttonEndTurn.beginFill(0xFF2342);
    buttonEndTurn.drawRect(0,0,150,100);
    buttonEndTurn.endFill();
    buttonEndTurn.interactive = true;
    buttonEndTurn.on('mousedown', endTurnEvent);
    var buttonText = new PIXI.Text("End Turn",
    {
        fontFamily : 'Arial',
        fontSize: 24,
        fill : "white",
        align : 'center'
    });
    buttonText.anchor.x = 0.5;
    buttonText.x = buttonEndTurn.width/2;
    buttonEndTurn.addChild(buttonText);
    return buttonEndTurn;
}

【讨论】：