Fabric.js 多边形 perPixelTargetFind 属性

Fabric.js 是一个用 JavaScript 实现的开源 Canvas 库，它为开发者提供了许多 API 以便于绘制各种图形和处理图形。

在 Fabric.js 中，多边形是一个常用的图形之一，而 perPixelTargetFind 属性则可用于多边形的交互检测。

perPixelTargetFind 属性的作用

当我们需要检测多边形中某一点是否被点击时，如果不启用 perPixelTargetFind 属性，Fabric.js 将无法准确地确定该点是否在多边形内或外，可能会导致交互检测失败。

通过启用 perPixelTargetFind 属性，Fabric.js 将根据多边形的实际像素来检测该点是否在多边形内或外，提高了检测的准确性。

如何启用 perPixelTargetFind 属性

var polygon = new fabric.Polygon([
  { x: 50, y: 50 },
  { x: 100, y: 50 },
  { x: 100, y: 100 },
  { x: 50, y: 100 }
], {
  fill: 'red',
  perPixelTargetFind: true // 启用 perPixelTargetFind 属性
});

以上是创建一个四边形并启用 perPixelTargetFind 属性的示例，关键是在 Polygon 的第二个参数中设置 perPixelTargetFind 为 true 即可。

注意事项

• 使用 perPixelTargetFind 属性将消耗更多的资源，因此只在需要较高精度的交互检测时使用；
• 当多边形的角度或缩放等发生变化时，perPixelTargetFind 属性需要重新计算，即需要重新调用 setCoords 方法。

小结

启用 perPixelTargetFind 属性可以提高多边形交互检测的准确性，但需要消耗更多的资源。在使用时应根据具体情况进行选择。