Javascript 在easelJS中将文本置于矩形内的中心_Javascript_Createjs_Easeljs

Javascript 在easelJS中将文本置于矩形内的中心

javascript

Javascript 在easelJS中将文本置于矩形内的中心,javascript,createjs,easeljs,Javascript,Createjs,Easeljs,我不熟悉画架。我想创建一个矩形，然后在输入框中输入文本。这是我的密码 function init() { var stage = new createjs.Stage("canvas"); var layoutWidth = 0.8 * stage.canvas.width; var layoutHeight = 0.6 * stage.canvas.height;

我不熟悉画架。我想创建一个矩形，然后在输入框中输入文本。这是我的密码

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

我希望此文本显示在按钮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画布上下文属性）从中心绘制文本。然后，您可以将其

和

位置设置为按钮宽度的一半

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

您还可以使用

getBounds（）

方法测量和定位左上对齐的文本，但是居中文本更容易，因为在文本更改时不必更改文本

我做了一个扣球来展示这一点。

干杯。

一些注意事项：