fabric.js中的文本对齐方式未按预期工作

Text alignment not working as expected in fabric.js

本文关键字：工作 方式未 对齐 js 文本 fabric      更新时间：2023-09-26

我的项目需要能够在画布上插入文本，用户可以指定文本是左对齐、右对齐还是在指定的边界框中居中。我正在使用fabric.js并设置textAlign的值，但它并没有像我预期的那样工作。我指定的x位置始终是文本的左边缘。如果我将textAlign设置为"居中"，并且有多行文本，它们确实相对于彼此居中，但它们不在边界框中居中；相反，我指定的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.Textbox，不是吗？

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

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

相关文章：