Fabric.js Polyline 脏属性

简介

在介绍 Polyline 脏属性之前，先来了解一下 Fabric.js。Fabric.js 是一个优秀的基于 HTML5 Canvas 的开源框架，它封装了 Canvas API，提供的 API 更加简单、易于使用，并提供了多种常用的绘图工具。其中，Polyline 是它提供的一个用于绘制折线的工具。

Polyline 对象表示一条折线，它的点可以通过 point 属性进行设置。当 Polyline 对象的 point 属性改变时，它的计算属性也会相应地发生改变。这种情况称为 Polyline 脏属性。

脏属性

一个对象的属性值发生改变时，如果该属性会影响到其他计算属性的值，那么这个对象的该属性就被称为“脏属性”。在 Fabric.js 中，Polyline 中的 point 属性就是一个典型的脏属性。

当 Polyline 的 point 属性发生改变时，它的计算属性 x1、y1、x2、y2、left、top、width 和 height 的值都会相应地发生改变。这意味着，如果你希望获得正确的计算属性值，你必须在 Polyline 的属性值改变后，手动调用 setCoords() 方法。该方法将重新计算 Polyline 的所有计算属性值。

代码示例

const canvas = new fabric.Canvas('canvas');
const points = [
  {x: 10, y: 10},
  {x: 50, y: 10},
  {x: 50, y: 50},
  {x: 90, y: 50},
];

const polyline = new fabric.Polyline(points, {
  stroke: 'black',
  strokeWidth: 2,
});

canvas.add(polyline);

// 改变 Point 属性
points[0].y = 40;
points[3].x = 70;

// 调用 setCoords 方法计算计算属性
polyline.setCoords();

// 输出 Polyline 计算属性
console.log('x1:', polyline.x1);
console.log('y1:', polyline.y1);
console.log('x2:', polyline.x2);
console.log('y2:', polyline.y2);
console.log('left:', polyline.left);
console.log('top:', polyline.top);
console.log('width:', polyline.width);
console.log('height:', polyline.height);

此代码创建了一个有四个点的 Polyline 对象，并将它添加到画布上。接下来，改变第一个点的 y 值和第四个点的 x 值，然后手动调用 setCoords 方法计算计算属性值。最后，输出 Polyline 计算属性的值。运行此代码，你会看到输出了正确的计算属性值。

总结

Polyline 脏属性是 Fabric.js 中一个非常有用的特性，它可以在属性改变后自动计算计算属性，简化我们的编程工作。但是，我们在编写代码时必须注意该特性的存在，及时调用 setCoords 方法以获取正确的计算属性值。