javascript - 文本对齐在 fabric.js 中无法正常工作

Question

我的项目需要能够在 Canvas 上插入文本，用户能够指定它是左对齐、右对齐还是在指定的边界框内居中。我正在使用 fabric.js 并设置 textAlign 的值，但它没有像我预期的那样工作。我指定的 x 位置始终是文本的左边缘。如果我将 textAlign 设置为“center”并且有多行文本，它们确实彼此居中，但它们不在边界框中居中；相反，我指定的 X 位置始终是最长线的左边缘。

设置元素的代码如下:

var text = new fabric.Text(this.getText(), {
   hasControls: false,
   selectable: false,
   fontSize: this.getPointSize(),
   fontFamily: this.getTypeface(),
   fill: this.getColor(),
   left: xpos,
   top: pos.y,
   originX: pos.originx,
   originY: pos.originy,
   width: this.getWidth(),
   height: this.getHeight(),
   fontWeight: weight,
   fontStyle: fstyle,
   textAlign: alignment
});

我想要绘制的是右对齐的文本，其右边缘是指定的 X 位置，或者居中的文本以指定的左右边缘之间的中点为中心。有没有办法使用 Fabric 和/或 Canvas 来做到这一点？

Answer 1

我猜你想要的是fabric.Textbox，不是吗？

fabric.Textbox 功能尚未发布，但在 github 上有一个 pull request。 https://github.com/kangax/fabric.js/pull/1778

等待新版本会更好，但是，如果您尽快需要此功能，您将能够从发出拉取请求的分支中使用它。 https://github.com/PosterMyWall/fabric.js/tree/TextboxPullRequest