fabric.js技术问题：如何选中画布中的内部矩形？

问题原因 #

Fabric.js 默认的目标检测机制仅识别图形的填充区域，当你创建的两个矩形都设置了fill:"transparent"时，点击红色矩形的填充区域会直接穿透到下方的绿色矩形，导致mouse:down事件返回的目标是绿色矩形而非红色矩形。

解决方案 #

开启画布的perPixelTargetFind属性，让Fabric.js逐像素检测画布上的绘制内容（包括描边），这样就能正确识别到上层的红色矩形。

修改后的完整代码 #

var canvas = new fabric.Canvas('canvas', {
  perPixelTargetFind: true // 开启逐像素检测
});
var rect1 = new fabric.Rect({
    left: 100,
    top: 100,
    stroke: "green",
    strokeWidth: 1, 
    fill:"transparent",
    width: 100,
    height: 100,
    hasControls:false,
    hasBorders:false
  });

var rect2 = new fabric.Rect({
    left: 120,
    top: 120,
    stroke: "red",
    strokeWidth: 1, 
    fill:"transparent",
    width: 50,
    height: 50,
    hasControls:false,
    hasBorders:false
  });
canvas.add(rect1)
canvas.add(rect2);

canvas.on("mouse:down",function(options){
    console.log("the target is:", options?.target?.stroke);
});

<html>
<script src="https://unpkg.com/fabric@5.3.0/dist/fabric.min.js"></script>

<body>
  <canvas id="canvas" width="1000" height="300"></canvas>
</body>

</html>

原理说明 #

perPixelTargetFind属性启用后，Fabric.js会检查鼠标点击位置的每个像素是否属于某个图形的绘制内容（包括描边和填充），而不是仅检测图形的边界框或填充区域。对于透明填充但有描边的图形，这种检测方式能准确识别到上层图形的存在。

内容的提问来源于stack exchange，提问作者olivia