Fabric.js 组 includeDefaultValues 属性

在 Fabric.js 中，组(Group)是一种容器，可以让你在一个对象集合中进行操作。而 includeDefaultValues 是对象属性的默认选项。本文将介绍 Fabric.js 中的 组 includeDefaultValues 属性。

1. includeDefaultValues属性介绍

在Fabric.js中，当对象添加到组(Group)中时，对象的属性将继承组(Group)的属性。默认情况下，组(Group)中的属性值将覆盖对象的属性值。但是，您可以通过设置includeDefaultValues属性来反转此行为。如果includeDefaultValues属性设置为false，则组(Group)中的属性将不会影响该组(Group)的对象。

2. includeDefaultValues属性的用法

在以下示例中，我们先将一个红色矩形添加到组(Group)中，再将不同颜色的方块添加到相同的组(Group)中。我们将分别设置不同的 borderColor 和 strokeWidth 属性。然后我们将 includeDefaultValues 属性设置为 false, 看看三者的区别：

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

//创建一个红色矩形对象
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  top: 50,
  left: 50
});

//创建一个蓝色方块对象
var blueSquare = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'blue',
  top: 150,
  left: 50,
  strokeWidth: 5,
  borderColor: 'black'
});

//创建一个绿色方块对象
var greenSquare = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'green',
  top: 150,
  left: 120,
  strokeWidth: 2,
  borderColor: 'yellow'
});

//创建一个组(Group)对象，包含了redRect、blueSquare和greenSquare
var group = new fabric.Group([ rect, blueSquare, greenSquare ], {
  borderColor: 'purple',
  strokeWidth: 10,
  includeDefaultValues: true
});

//将该组(Group)添加到canvas画布中
canvas.add(group);

在上面的示例中，我们将 includeDefaultValues 属性设置为 true。因此，组(Group)的默认属性将应用于包含在组(Group)中的所有对象。此时，我们将看到边框宽度设置为10，并且对象的边框颜色是紫色的。

接下来的示例中，我们将includeDefaultValues属性设置为false，看看三者的区别：

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

//创建一个红色矩形对象
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  top: 50,
  left: 50
});

//创建一个蓝色方块对象
var blueSquare = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'blue',
  top: 150,
  left: 50,
  strokeWidth: 5,
  borderColor: 'black'
});

//创建一个绿色方块对象
var greenSquare = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'green',
  top: 150,
  left: 120,
  strokeWidth: 2,
  borderColor: 'yellow'
});

//创建一个组(Group)对象，包含了redRect、blueSquare和greenSquare
var group = new fabric.Group([ rect, blueSquare, greenSquare ], {
  borderColor: 'purple',
  strokeWidth: 10,
  includeDefaultValues: false
});

//将该组(Group)添加到canvas画布中
canvas.add(group);

在上面的示例中，我们将 includeDefaultValues 属性设置为 false。因此，组(Group)的默认属性将不会应用于包含在组(Group)中的任何对象。此时，我们将看到红色矩形拥有10像素宽的紫色边框，而蓝色方块和绿色方块的边框宽度和颜色保留为原始设置。

3. 总结

在Fabric.js中，includeDefaultValues属性控制对象在组(Group)中的默认值。如果includeDefaultValues属性设置为false，则组(Group)中的属性将不会影响该组(Group)的对象。相反，如果includeDefaultValues属性设置为true，则组(Group)中的属性将默认应用于该组(Group)的所有对象。