文本对齐在 fabric.js 中没有按预期工作

Posted

技术标签:

【中文标题】文本对齐在 fabric.js 中没有按预期工作【英文标题】:Text alignment not working as expected in fabric.js 【发布时间】:2015-05-21 12:30:45 【问题描述】:

我的项目需要能够在 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 做到这一点?

【问题讨论】:

您可以添加一个额外的功能来应对对齐方式的变化。如果对齐设置为右对齐,则将元素的 x 位置调整为文本对象的宽度。如果对齐居中,则使用宽度的 1/2。 【参考方案1】:

我猜你想要的是fabric.Textbox,不是吗?

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

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

【讨论】:

这绝对值得一试。包装对我的应用程序来说也是一件很棒的事情。

以上是关于文本对齐在 fabric.js 中没有按预期工作的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 右对齐未按预期工作

以编程方式输入文本时,TextInput 无法按预期工作

Bootstrap 4 - col垂直对齐未按预期工作[重复]

宏在 Notepad++ 中没有按预期工作

resignFirstResponder 没有按预期工作

Bootstrap pull-right 没有按预期工作