Fabric.js 组 perPixelTargetFind 属性

Fabric.js 是什么？

Fabric.js 是一个基于 HTML5 Canvas 的 JavaScript 库，它提供了许多强大的工具，方便开发者在 Web 上创建交互式的图形应用程序。既支持客户端浏览器，也支持服务器端 Node.js。

perPixelTargetFind 属性是什么？

Fabric.js 中的 perPixelTargetFind 属性可以用于指定在 canvas 中检测单个对象时应使用占用像素透明度（alpha 通道）的颜色而不是整个对象的边界框。这通常会为需要更精确的目标定位而使用。以矩形对象为例，当 perPixelTargetFind 属性为 true 时，Fabric.js 检测框架将通过颜色检测区分矩形里和外面的像素，并判断哪些像素被选定。

如何使用 perPixelTargetFind 属性？

在创建 Fabric.js 对象时，可以在其选项中将 perPixelTargetFind 属性设置为 true 或 false。

示例如下：

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

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

canvas.add(rect);

此时，当鼠标指向该矩形内部的像素时，会捕捉到该矩形，并且不会被位于矩形边界外的像素所干扰。

注意事项

需要注意的是，如果对象的边界框具有弧度，则在 perPixelTargetFind 模式下，检查目标时可能存在一些不一致的结果。此时可以采取调整对象的 cornerSize 属性，使其足够小以满足精度要求。

结语

Fabric.js 组 perPixelTargetFind 属性为开发者们提供了一种更加准确的目标定位方式，无需在意对象边框过宽或过窄的问题。了解并善用此属性，可以极大地提升应用程序的交互性和用户体验，也会使得开发更加轻松愉快。