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

将图形和标签包裹在一个Container中，并改为“button1”，然后将容器移动到你想要它调整图形和标签的地方

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

使用 textAlign 和 textBaseline(均为 HTML Canvas 上下文属性)从中心绘制文本。然后，您可以将它的 x 和 y 位置设置为按钮宽度的一半。

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

您还可以使用 getBounds() 方法测量和定位左上对齐的文本，但居中文本更容易，因为您不必在文本更改时更改它。

我制作了一个尖峰来展示这一点。 http://jsfiddle.net/lannymcnie/cb5tbx5t/

干杯。