Javascript fabric.js中的文本对齐未按预期工作
我的项目要求能够在画布上插入文本,用户可以指定文本是左对齐、右对齐还是在指定的边界框中居中。我正在使用fabric.js并设置textAlign的值,但它并没有像我预期的那样工作。我指定的x位置始终是文本的左边缘。如果我将textAlign设置为“center”,并且有多行文本,它们确实彼此居中,但它们在边界框中不居中;相反,我指定的X位置始终是最长直线的左边缘 设置元素的代码如下所示:Javascript fabric.js中的文本对齐未按预期工作,javascript,text,fabricjs,Javascript,Text,Fabricjs,我的项目要求能够在画布上插入文本,用户可以指定文本是左对齐、右对齐还是在指定的边界框中居中。我正在使用fabric.js并设置textAlign的值,但它并没有像我预期的那样工作。我指定的x位置始终是文本的左边缘。如果我将textAlign设置为“center”,并且有多行文本,它们确实彼此居中,但它们在边界框中不居中;相反,我指定的X位置始终是最长直线的左边缘 设置元素的代码如下所示: var text = new fabric.Text(this.getText(), { hasCon
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请求。
等待新版本会更好,但是,如果您尽快需要此功能,您可以从发出请求的分支使用它。
这看起来绝对值得一试。包装对我的应用程序来说也是一件很好的事情。当对齐方式发生变化时,您可以添加一个额外的函数。如果对齐设置为“右”,则根据文本对象的宽度调整元素的x位置。如果对齐居中,则使用宽度的1/2。