Fabric.js 保存自定义属性：探究隐藏属性的奥秘

在 Fabric.js 中，我们可以轻松创建、操作和序列化各种对象。然而，在某些情况下，我们会发现自定义属性在序列化过程中丢失了。这是因为 Fabric.js 默认情况下不会序列化自定义属性。为了解决这个问题，我们可以使用 toObject 方法中的 properties 参数来指定要序列化的属性。

// 创建一个矩形对象
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: 'red',
  // 添加自定义属性
  customAttribute: 'my-custom-value'
});

// 使用 toObject 方法序列化对象，并指定要序列化的属性
const objectData = rect.toObject(['left', 'top', 'width', 'height', 'fill', 'customAttribute']);

// 查看序列化后的数据
console.log(objectData);

通过这种方式，我们可以确保自定义属性在序列化过程中不会丢失。

然而，在某些情况下，我们可能希望对自定义属性进行更精细的控制。例如，我们可能只想序列化某些自定义属性，或者我们可能希望对自定义属性进行某种转换。为了实现这些需求，我们可以使用 toObject 方法中的 propertiesToInclude 和 propertiesToExclude 参数。

// 创建一个矩形对象
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: 'red',
  // 添加自定义属性
  customAttribute1: 'my-custom-value-1',
  customAttribute2: 'my-custom-value-2'
});

// 使用 toObject 方法序列化对象，并指定要包含和要排除的属性
const objectData = rect.toObject(['left', 'top', 'width', 'height', 'fill'], ['customAttribute1']);

// 查看序列化后的数据
console.log(objectData);

通过这种方式，我们可以更灵活地控制自定义属性的序列化行为。

总之，在 Fabric.js 中保存自定义属性需要我们明确指定要序列化的属性，并根据具体需求使用 properties、propertiesToInclude 和 propertiesToExclude 参数。通过对这些参数的熟练使用，我们可以轻松保存和使用自定义属性，从而构建更强大且灵活的 Fabric.js 应用。