FabricJS路径填充属性

在FabricJS中，路径（Path）是一种用于创建自定义形状的对象。路径填充属性（Path Fill）可以让你控制路径的填充样式，包括颜色、渐变和图案填充。

填充颜色

你可以使用fill属性来控制路径的填充颜色。例子如下：

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

var path = new fabric.Path('M 0 0 L 200 0 L 200 200 L 0 200 L 0 0');

path.set({
  fill: 'red'
});

canvas.add(path);

在上面的例子中，我们创建了一个红色的路径对象。

渐变填充

FabricJS中支持渐变填充，你可以使用linearGradient或radialGradient方法来创建渐变对象，然后将其作为fill属性的值。

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

var path = new fabric.Path('M 0 0 L 200 0 L 200 200 L 0 200 L 0 0');

var gradient = new fabric.Gradient({
  type: 'linear',
  coords: {
    x1: 0,
    y1: 0,
    x2: 200,
    y2: 0
  },
  colorStops: [
    { offset: 0, color: 'red' },
    { offset: 1, color: 'blue' }
  ]
});

path.set({
  fill: gradient
});

canvas.add(path);

在上面的例子中，我们创建了一个从红色到蓝色的线性渐变，然后将其作为我们路径的填充颜色。

图案填充

你还可以使用图案填充来填充你的路径。使用fabric.Pattern创建图案对象，然后将其作为fill属性的值。

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

var path = new fabric.Path('M 0 0 L 200 0 L 200 200 L 0 200 L 0 0');

var pattern = new fabric.Pattern({
  source: 'https://www.example.com/pattern.jpg',
  repeat: 'repeat'
});

path.set({
  fill: pattern
});

canvas.add(path);

在上面的例子中，我们创建了一个图案对象，然后将其设置为路径的填充样式。图案对象的source属性可以设置为图案的URL或图像对象。repeat属性指定图案重复的方式，可以设置为repeat、repeat-x、repeat-y或no-repeat。

以上是FabricJS路径填充属性的介绍，希望对你有所帮助！