Fabric.js Itext textBackgroundColor 属性介绍

在Fabric.js中，IText对象是指包含文本段落的对象。利用textBackgroundColor属性，可以设置文本的背景颜色。

使用方法

在创建IText对象后，利用set方法设置textBackgroundColor属性即可。示例代码如下：

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

var text = new fabric.IText('Hello World', {
  left: 100,
  top: 100,
  fontSize: 30,
  fontFamily: 'Arial',
  textBackgroundColor: 'red'
});

canvas.add(text);

可以看到，在创建IText对象时，除了指定文本的内容、位置、字体大小和字体类型等属性外，还设置了textBackgroundColor属性，将文本的背景颜色设为了红色。

属性含义

textBackgroundColor属性用于设置文本的背景颜色。可以设置为字符串类型的颜色表示，如'red'、'blue'等，也可以设置为RGB或者RGBA形式的字符串，如'rgb(255, 0, 0)'、'rgba(0, 0, 255, 0.5)'等。

注意事项

1. textBackgroundColor属性只能应用于IText对象，其他对象不支持该属性；
2. 如果同时设置了textBackgroundColor和背景颜色（backgroundColor）属性，则textBackgroundColor优先级更高，即文本的背景颜色会遮盖掉背景颜色；
3. 由于IText对象支持分行显示，因此不同行之间的文本背景颜色可能会有重叠，需要在设计时注意。可以通过设置lineHeight属性来增大行与行之间的间距，从而降低文本背景颜色重叠的概率。

结语

textBackgroundColor属性为我们设计文本展示效果提供了更多的可能性，可以配合其他属性一起使用，创造出更加丰富多彩的文本表现效果。