easelJSの矩形の内側にテキストを配置する

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

ラップコンテナの内部にグラフィックやラベル、および「ボタン1」は代わりに、あなたはそれを使用textAlignグラフィックスやラベル

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

の両方を調整したい場所にコンテナを移動することを確認textBaseline（両方のHTMLキャンバスコンテキストプロパティ）を使用して、テキストを中心から描画します。 xとyの位置をボタンの幅の半分に設定できます。

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

また測定し、位置getBounds()方法と左上揃えテキストが、しかし、あなたがたときに、テキストの変更、それを変更する必要はありませんので、テキストを中心にして、より簡単である可能性があります。

私は実際にこれを示すためにスパイクを作った。 http://jsfiddle.net/lannymcnie/cb5tbx5t/

乾杯。