방법 다음 JSFiddle을 검토하십시오 PIXI.js

Question

의 지역 그것의 컨테이너 내에서 텍스트 개체를 중앙에 :

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!"); 
} 

https://jsfiddle.net/r4yfozsw/1/ 나는 아이로 내 버튼 사각형 텍스트 객체를 추가했다. 나는 또한 텍스트에 대해 align 옵션을 추가했다. 그러므로 나는 텍스트가 로컬의 버튼 가운데에 위치 할 것으로 예상했지만 캔버스의 임의의 위치로 렌더링되었습니다. PIXI.js의 컨테이너 시스템으로 내가 이해할 수없는 것을 말할 수 있습니까?

Answer 1

텍스트가 retangle 안에 표시되지 않는 이유는 사각형을 그렸던 방식 때문입니다. 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;는 이제 텍스트가 중간 지점의에서,하지만 당신이 볼 수있는 고정됩니다

, 그렇지 않은 부모 직사각형 내에 올바르게 배치됩니다. 그래서 그냥 이상 이동 :

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; 
} 

: buttonText.x = buttonEndTurn.width/2;는

여기에 완전한 기능의