Fabric.js 路径顶部属性

简介

在使用Fabric.js绘制路径时，有一些顶部属性可以设置，包括fill，stroke，strokeWidth，strokeDashArray，opacity等等。这些属性可以快捷地帮助程序员控制路径的样式、透明度等。

fill

fill属性决定路径的填充颜色，默认为"rgba(0, 0, 0, 0)"，即透明。

可以设置为颜色字符串、渐变、模式等。例如：

// 颜色字符串
path.set("fill", "red");

// 线性渐变
var gradient = new fabric.Gradient({
  type: "linear",
  coords: {x1: 0, y1: 0, x2: 0, y2: path.height},
  colorStops: [
    {offset: 0, color: "red"},
    {offset: 1, color: "blue"}
  ]
});
path.set("fill", gradient);

// 图像模式
fabric.Image.fromURL("pattern.png", function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: "repeat"
  });
  path.set("fill", pattern);
});

stroke

stroke属性决定路径的描边颜色，默认为"rgba(0, 0, 0, 1)"，即黑色。

可以设置为颜色字符串、渐变、模式等。例如：

// 颜色字符串
path.set("stroke", "red");

// 线性渐变
var gradient = new fabric.Gradient({
  type: "linear",
  coords: {x1: 0, y1: 0, x2: 0, y2: path.height},
  colorStops: [
    {offset: 0, color: "red"},
    {offset: 1, color: "blue"}
  ]
});
path.set("stroke", gradient);

// 图像模式
fabric.Image.fromURL("pattern.png", function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: "repeat"
  });
  path.set("stroke", pattern);
});

strokeWidth

strokeWidth属性决定路径描边的粗细，默认为1。

可以设置为任意非负数。例如：

path.set("strokeWidth", 5);

strokeDashArray

strokeDashArray属性决定路径描边的线条样式，默认为空数组，即实线。

可以设置为一个数字数组，其中奇数下标的值表示实线长度，偶数下标的值表示空隙长度。例如：

path.set("strokeDashArray", [5, 3, 2, 3]);

opacity

opacity属性决定路径的不透明度，默认为1，即完全不透明。

可以设置为任意0到1之间的数。例如：

path.set("opacity", 0.5);

以上就是Fabric.js路径顶部属性的介绍，可以通过设置这些属性来控制路径的样式和透明度。