在画框​​中居中放置一个矩形文字

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/

干杯。