Fabric.js 路径 perPixelTargetFind 属性

介绍

在使用 Fabric.js 绘制路径时，将 perPixelTargetFind 属性设置为 true，能够使路径的点击区域更加精确。默认情况下，Fabric.js 对路径的点击区域判断是基于路径的边界盒（bounding box）来实现的。这种方式会造成一些误判，例如一个长条型的路径，如果点击在路径长边的空白区域，则无法触发点击事件。而将 perPixelTargetFind 属性设置为 true 后，Fabric.js 会根据路径实际的像素信息来判断点击区域，从而减少误判。

设置方式

在创建路径的 options 对象中设置 perPixelTargetFind 属性为 true 即可：

var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  perPixelTargetFind: true // 设置 perPixelTargetFind 为 true
});

注意事项

• perPixelTargetFind 属性只适用于路径（path），对于其他的对象（如矩形、圆形等）无效。
• 由于 perPixelTargetFind 需要对路径的像素信息进行处理，因此开启该属性会增加一定的计算量，可能会影响性能。
• 此属性只在 Canvas 元素上的鼠标事件（mousedown、mouseup、mousemove、mouseover、mouseout）有效。

示例代码

var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  perPixelTargetFind: true // 设置 perPixelTargetFind 为 true
});

canvas.add(rect);

canvas.on('mouse:down', function (options) {
  console.log(options.target); // 点击到了 rect 对象
});

参考链接

Fabric.js - perPixelTargetFind