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

时间:2015-03-18 16:00:28

标签: javascript text fabricjs

我的项目需要能够在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?

1 个答案:

答案 0 :(得分:2)

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

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

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