Fabric.js 文本填充属性

在 Fabric.js 中，文本是一种常见的对象类型。文本的填充属性可以帮助我们控制其颜色、渐变、图片等填充方式，使我们可以实现丰富多样的文本效果。

填充颜色

我们可以使用 Fabric.js 中的 fill 属性来设置文本的填充颜色。

var text = new fabric.Text('Hello Fabric!', {
  left: 100,
  top: 100,
  fill: '#FF0000'
});
canvas.add(text);

在上面的示例中，我们通过设置 fill 属性来修改文本的填充颜色为红色。

渐变填充

除了纯色填充，我们还可以使用渐变填充来制作更加炫酷的文本效果。Fabric.js 中支持线性渐变和径向渐变两种渐变类型。

线性渐变填充

线性渐变从开始点到结束点形成一个方向，我们可以使用 fabric.Gradient 类来创建线性渐变对象，然后设置到文本的 fill 属性中。

// 创建线性渐变对象
var gradient = new fabric.Gradient({
  type: 'linear',
  coords: {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 500
  },
  colorStops: [
    { offset: 0, color: '#FF0000' },
    { offset: 1, color: '#00FF00' }
  ]
});

// 设置文本的填充为线性渐变
var text = new fabric.Text('Hello Fabric!', {
  left: 100,
  top: 100,
  fill: gradient
});

canvas.add(text);

在示例中，我们创建了一个从上到下的线性渐变对象，并设置到文本的 fill 属性中。渐变对象由 coords 属性和 colorStops 属性组成。coords 属性定义了渐变的坐标系，colorStops 属性定义了渐变的颜色值和位置。

径向渐变填充

径向渐变由一个中心点开始向外扩散形成一个圆形或椭圆形。我们同样可以使用 fabric.Gradient 类来创建径向渐变对象。

// 创建径向渐变对象
var gradient = new fabric.Gradient({
  type: 'radial',
  coords: {
    x1: 0,
    y1: 0,
    r1: 0,
    x2: 0,
    y2: 0,
    r2: 100
  },
  colorStops: [
    { offset: 0, color: '#FF0000' },
    { offset: 1, color: '#00FF00' }
  ]
});

// 设置文本的填充为径向渐变
var text = new fabric.Text('Hello Fabric!', {
  left: 100,
  top: 100,
  fill: gradient
});

canvas.add(text);

在示例中，我们创建了一个从中心向外扩散的径向渐变对象，并设置到文本的 fill 属性中。渐变对象由 coords 属性和 colorStops 属性组成。coords 属性定义了渐变的坐标系和半径，colorStops 属性定义了渐变的颜色值和位置。

图片填充

我们还可以使用图片来填充文本。Fabric.js 中的 fabric.Pattern 类提供了一种将图片转化为填充资源的方式。

// 创建图片填充对象
fabric.Image.fromURL('path/to/image.png', function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  });

  // 设置文本的填充为图片填充
  var text = new fabric.Text('Hello Fabric!', {
    left: 100,
    top: 100,
    fill: pattern
  });

  canvas.add(text);
});

在示例中，我们通过 fabric.Image.fromURL 方法加载图片，并创建了一个重复填充的图片填充对象。然后将图片填充对象设置到文本的 fill 属性中。

总结

通过本文介绍，我们了解了 Fabric.js 中文本填充的几种方式。在实际开发中，我们可以根据需求选择合适的填充方式来创建出更加丰富多彩的文本效果。