Fabric.js Path objectCaching 属性

在 Fabric.js 中，Path 对象是用来绘制路径的。它的 objectCaching 属性决定了是否缓存对象，以提高性能。

什么是缓存对象？

当绘制一个图形时，需要计算其边界框、填充区域等信息。为了避免每次绘制都要重新计算这些信息，我们可以将图形缓存起来。当需要绘制它时，可以直接使用缓存，而不必再次计算。

objectCaching 属性的作用

在 Fabric.js 中，Path 对象的 objectCaching 属性用来控制是否缓存对象。当设置为 true 时，对象会被缓存起来，以提高性能。当设置为 false 时，每次绘制都会重新计算边界框、填充区域等信息，消耗更多的计算资源，但可以保证绘制的正确性。

var path = new fabric.Path('M 0 0 L 100 100 L 0 100 z', {
  fill: 'red',
  objectCaching: true // 开启缓存
});

canvas.add(path);

上述代码创建一个 Path 对象，并将 objectCaching 属性设置为 true，开启了缓存功能。

注意事项

• 开启缓存功能的同时，需要注意缓存内容是否随时间而变化。如果缓存的内容随时间变化，需要在每次变化后手动清除缓存。可以使用 canvas.invalidateObject(path) 来手动清除缓存。

• 在绘制复杂图形时，开启缓存功能能够明显提高性能。但对于简单的图形，反而可能会降低性能，因为缓存的计算和绘制需要额外的时间。

参考文献

• Fabric.js Path
• 在 Fabric.js 中使用 Canvas 缓存提高性能