Question

我是画架的新手。我想创建一个矩形，然后我想在输入框中键入内部输入文本。这是我的代码

 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画布上下文属性）从中心绘制文本。然后，您可以将其x和y位置设置为按钮宽度的一半。

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

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

我做了一个高峰来表明这一点。 http://jsfiddle.net/lannymcnie/cb5tbx5t/

干杯。

在easelJS中将文本居中放置在矩形内

1 个答案: