easelJS의 사각형 안에 텍스트를 가운데 놓습니다.

Question

저는 easelJS를 처음 사용합니다. 직사각형을 만들고 그 다음에 입력 상자에 입력 된대로 텍스트를 입력하고 싶습니다. 여기에이 텍스트가 단추 1 안에 표시하고 중앙에 제대로 정렬 할 내 코드

function init() { 
        var stage = new createjs.Stage("canvas"); 
        var layoutWidth = 0.8 * stage.canvas.width; 
        var layoutHeight = 0.6 * stage.canvas.height; 
        var layoutRect = new createjs.Shape(); 
        layoutRect.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2, (stage.canvas.height - layoutHeight)/2, layoutWidth, layoutHeight); 
        var button1 = new createjs.Shape(); 
        button1.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2, (stage.canvas.height - layoutHeight)/2 + 0.90 * layoutHeight, layoutWidth/2, 0.10 * layoutHeight); 
        var button2 = new createjs.Shape(); 
        button2.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2 + layoutWidth/2, (stage.canvas.height - layoutHeight)/2 + 0.90 * layoutHeight, layoutWidth/2, 0.10 * layoutHeight) 
        var inputText = document.getElementById("input") ; 
        var text = new createjs.Text(); 
        text.set({ 
        text: inputText.value 
         }) 
        stage.addChild(layoutRect, button1, button2,text); 
        stage.update(); 

        inputText.onkeyup = function(){ 
         text.set({ 
         text: inputText.value 
          }) 
         stage.update() 
         } 
       } 

입니다. 어떻게하는지 설명하십시오. 당신에게

Answer 1

몇 가지 참고 사항 감사합니다 나는이 그려진 버튼을 권장

[0, 0], 다음 대신 당신이 화면에 원하는 내용을 그리기, 그것은 이동.

button.graphics.beginStroke("black").drawRect(0, 0, buttonWidth, buttonHeight); 

랩을 컨테이너의 내부 그래픽과 라벨을, 대신 "단추 1은"다음, 당신이

var button1 = new createjs.Container(); 
var bg1 = new createjs.Shape(); 
var text = new createjs.Text(); 
button1.addChild(bg1, text); 

사용 textAlign을 그래픽 모두를 조정하고 라벨을 원하는 위치로 컨테이너를 이동하는지 확인 textBaseline (둘 다 HTML 캔버스 컨텍스트 속성)을 사용하여 가운데에서 텍스트를 그립니다. 그런 다음 x 및 y 위치를 단추 너비의 절반으로 설정할 수 있습니다.

text.set({ 
    textAlign: "center", 
    textBaseline: "middle", 
    x: buttonWidth/2, 
    y: buttonHeight/2 
}) 

또한 측정 할 수와 위치가 getBounds() 방법으로 텍스트를 왼쪽 상단 정렬,하지만 당신은 할 때 텍스트 변경을 변경하지 않기 때문에 텍스트를 중심 것은 쉽다.

나는 이것을 실제로 나타 내기 위해 스파이크를 만들었습니다. http://jsfiddle.net/lannymcnie/cb5tbx5t/

건배.