Fabric.js 路径脏属性

什么是路径脏属性

在使用 Fabric.js 绘制带有路径的物体时，如果路径发生了改变，Fabric.js 会自动标记该路径为“脏属性”。这意味着 Fabric.js 会在下一次绘制该物体时重新计算路径的所有参数，包括各个节点的坐标和切线角度。

如何识别路径脏属性

可以通过检查路径对象的 dirty 属性来判断该路径是否为“脏属性”。如果 dirty 为 true，则该路径为“脏属性”，需要重新计算路径参数。

const path = new fabric.Path('M 100 100 L 200 200 L 300 100', {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});

console.log(path.dirty); // false
path.path[1][1] = 150;
console.log(path.dirty); // true

在这个例子中，路径对象 path 初始化时并不是“脏属性”，但是在修改路径的第二个点的坐标时将其标记为“脏属性”。

如何清除路径脏属性

路径脏属性在路径对象的 render 方法被调用时会被自动清除，所以一般不需要手动清除。但是如果需要在渲染之前手动清除路径脏属性，可以调用路径对象的 setCoords() 方法。

const path = new fabric.Path('M 100 100 L 200 200 L 300 100', {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});

path.dirty = true;
console.log(path.dirty); // true
path.setCoords();
console.log(path.dirty); // false

在这个例子中，路径对象 path 初始化后被手动标记为“脏属性”，但是在调用 setCoords() 方法后该标记会被清除。注意，调用 setCoords() 方法并不会重新计算路径参数，它只是清除路径脏属性的标记。如果需要手动重新计算路径参数，可以调用路径对象的 normalize() 方法。

总结

路径脏属性是 Fabric.js 中一个重要的概念，它可以提高绘制效率并减少重复计算。程序员在使用 Fabric.js 绘制带有路径的物体时，需要了解路径脏属性的基本知识，以便在需要的时候能够正确地处理。