Fabric.js 组 strokeUniform 属性

在 Fabric.js 中，组（fabric.Group）是将一组对象组合在一起以便于管理和操作的容器。在使用过程中，我们有时需要在组内的所有对象上进行统一的轮廓线（stroke）设置，而 strokeUniform 属性就是用来实现这个目的的。

strokeUniform 属性的定义与用法

在 Fabric.js 中，对于组对象（fabric.Group），有一个叫做 strokeUniform 的属性。它用于实现对组内所有对象的轮廓线（stroke）属性的统一设置。具体而言，如果 strokeUniform 属性为 false，则每个对象的轮廓线属性都是独立的；而如果 strokeUniform 属性为 true（默认值即为 true），则所有对象都将使用相同的轮廓线属性。可以通过以下代码来设置和获取 strokeUniform 属性值：

// 获取 strokeUniform 属性值
group.get('strokeUniform')

// 设置 strokeUniform 属性值
group.set('strokeUniform', value)

其中，value 为布尔值。

strokeUniform 属性的使用示例

在以下示例中，我们创建了一个包含两个矩形的组对象，并分别为它们设置不同的轮廓线颜色和宽度。接着，我们分别读取了两个矩形的 strokeWidth 属性，发现它们分别为 2 和 5。然后，我们将组对象的 strokeUniform 属性设置为 true，并重新读取了两个矩形的 strokeWidth 属性，发现它们已经变成了相同的值，即 5。

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

const rect1 = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  stroke: 'red',
  strokeWidth: 2
});

const rect2 = new fabric.Rect({
  left: 150,
  top: 150,
  width: 100,
  height: 100,
  stroke: 'blue',
  strokeWidth: 5
});

const group = new fabric.Group([rect1, rect2], {
  strokeUniform: false // 默认即为 true
});

console.log(rect1.strokeWidth); // 输出 2
console.log(rect2.strokeWidth); // 输出 5

group.set('strokeUniform', true);

console.log(rect1.strokeWidth); // 输出 5
console.log(rect2.strokeWidth); // 输出 5

canvas.add(group);

总结

通过 strokeUniform 属性，我们可以方便地对组内所有对象的轮廓线属性进行统一设置。在使用过程中，需要注意该属性的值是布尔类型，且默认值为 true，即所有对象使用相同的属性值。