在畫框​​中居中放置一個矩形文字

Question

我是easelJS的新手。我想創建一個矩形，然後我想在輸入框中鍵入文本。這裏是我的代碼

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() 
         } 
       } 

我想這個文本出現在button1裏面，並正確對齊在中心。請解釋如何做到這一點。謝謝

Answer 1

的幾個注意事項：

我建議在做畫的按鈕，[0,0]，然後移動，而不是畫，你希望他們在屏幕上的內容呢，。

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

包裹的容器內的圖形和標籤，並作出「Button1的」，而不是，那麼移動的容器，你希望它同時調整圖形和標籤

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/

乾杯。