Fabric.js Polyline perPixelTargetFind 属性

介绍

Fabric.js是一个用于处理HTML5 Canvas的强大Javascript库，它允许创建交互式的图形应用程序。其中包含多种功能，如多图层支持、事件处理、动画和滤镜等。

Polyline是Fabric.js中一个简单的几何图形，它由多个线段组成。而perPixelTargetFind是Polyline中的一个非常有用的属性，它可以为Polyline启用更高级别的目标查找。

使用方法

使用perPixelTargetFind属性可以在Polyline上启用像素级的目标查找。

var polyline = new fabric.Polyline(points, {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5,
  perPixelTargetFind: true
});
canvas.add(polyline);

在此代码中，我们可以看到通过将perPixelTargetFind设置为true，可以启用Polyline上的像素级目标查找。这将允许用户更精确地单击或触摸Polyline上的特定线段。

注意事项

当启用perPixelTargetFind属性时，Polyline的检测范围将变得更大。这意味着即使用户单击或触摸Polyline上的空白区域，Polyline仍然会被视为有效的目标。因此，如果不需要更高级别的目标查找，建议关闭该属性。

var polyline = new fabric.Polyline(points, {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5,
  perPixelTargetFind: false
});
canvas.add(polyline);

总结

在它的默认设置下，Polyline的目标检测将仅基于其外框的矩形形状。然而，通过启用perPixelTargetFind属性，可以进行更高级别的目标查找。这对于需要实现更精确交互的应用程序非常有用。但需要注意，这也会导致Polyline的检测范围变得更大。