Fabric.js 文本框下划线属性

在 Fabric.js 中，我们可以通过设置文本框的 textDecoration 属性来添加下划线。具体的设置如下所示：

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

var text = new fabric.IText('This is underlined', {
  left: 100,
  top: 100,
  fontSize: 20,
  textDecoration: 'underline'
});

canvas.add(text);

在上面的代码中，我们使用了 fabric.IText 类来创建一个文本框，并设置了以下属性：

• left 和 top：文本框在画布中的位置。
• fontSize：文本框的字体大小。
• textDecoration：文本框的下划线属性。

下划线属性可以是以下值之一：

• underline：添加普通下划线。
• overline：添加上划线。
• line-through：添加删除线。

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

var text = new fabric.IText('This is overlined', {
  left: 100,
  top: 100,
  fontSize: 20,
  textDecoration: 'overline'
});

canvas.add(text);

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

var text = new fabric.IText('This is strikethrough', {
  left: 100,
  top: 100,
  fontSize: 20,
  textDecoration: 'line-through'
});

canvas.add(text);

如果你需要自定义下划线的颜色、粗细和类型等属性，可以使用 textDecorationColor、textDecorationThickness、textDecorationStyle 等属性进行设置。以下是一个示例代码：

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

var text = new fabric.IText('This is custom underlined', {
  left: 100,
  top: 100,
  fontSize: 20,
  textDecoration: 'underline',
  textDecorationColor: 'red',
  textDecorationThickness: 2,
  textDecorationStyle: 'dotted'
});

canvas.add(text);

在上面的代码中，我们设置了自定义的下划线属性：

• textDecorationColor：下划线颜色设置为红色。
• textDecorationThickness：下划线粗细设置为 2。
• textDecorationStyle：下划线类型设置为点线。

总之，Fabric.js 中的文本框下划线属性是非常易于设置的。你可以根据自己的需要来设置属性，以获得想要的下划线效果。