Fabric.js 文本 textAlign 属性

textAlign 属性是 Fabric.js 提供的用于文本对齐的属性之一。它可以设置文本相对于它所在的文本框的水平对齐方式，可用的值为：left， center， right， justify。其中，left 表示文本左对齐，center 表示文本居中对齐，right 表示文本右对齐，justify 表示文本两端对齐。

用法

可以通过以下方式设置文本的 textAlign 属性：

var text = new fabric.Text('Hello World!', {
  left: 100,
  top: 100,
  textAlign: 'center'
});
canvas.add(text);

例子

下面的例子展示了如何通过 textAlign 属性设置文本的水平对齐方式：

var canvas = new fabric.Canvas('canvas');

var text1 = new fabric.Text('left aligned text', {
  left: 50,
  top: 50,
  fill: '#333',
  fontSize: 20,
  textAlign: 'left'
});

var text2 = new fabric.Text('centered text', {
  left: 150,
  top: 100,
  fill: '#333',
  fontSize: 20,
  textAlign: 'center'
});

var text3 = new fabric.Text('right aligned text', {
  left: 250,
  top: 150,
  fill: '#333',
  fontSize: 20,
  textAlign: 'right'
});

var text4 = new fabric.Text('justified text', {
  left: 10,
  top: 200,
  width: 300,
  fill: '#333',
  fontSize: 20,
  textAlign: 'justify'
});

canvas.add(text1, text2, text3, text4);

注意事项

• textAlign 属性只对有明确指定宽度的文本生效。
• textAlign 属性只能控制文本在水平方向上的对齐方式，无法控制垂直方向上的对齐方式，如果需要设置垂直方向的对齐方式，应该使用 textBaseline 属性。