Javascript 将选择区域剪辑到ClipTo-Fabric JS

我目前正在为一个web应用程序使用Fabric.js，该应用程序允许用户以结构化方式输入和操作画布对象

我们提供结构的机制之一是有“边界框”，用户可以在其中放置图像。将图像放置到这些框中时，可以平移和缩放这些框，但会剪裁为原始边界框的大小和位置

例如：

这里我们看到了剪裁区域，其控件在剪裁区域之外可见

这很好。用户可以平移图像，剪辑框保持静止。我们被发现与此

但是，如果客户端添加了另一个图像，并且该图像位于第一个图像跨越的区域下方（但由于剪切而不可见），则无法选择第二个对象

例如：

---

此处，面部图像位于高尔夫图像延伸的下方，超出其剪辑范围。如果不取消选择，则无法选择面部图像。你可以想象，如果这三个都在这里，就有可能永久模糊面部图像的选择区域，而不移动其他两个图像来达到它。

结果表明这是perPixelTargetFind的一个功能，我不知道，我假设它只适用于png透明度，而不适用于剪切透明度

因此，如果您也面临这个问题，只需打开perpixeltargetfind，您就可能解决您的问题

---

谢谢

我创建了一个JSFIDLE来在沙箱环境中说明这一点：请注意，如果您选择google徽标，则在google徽标笨拙地移动之前，哈巴狗是不可选择的，因为它的扩展区域与哈巴狗重叠。我认为您应该清楚地说明这里的问题是什么。是z索引阻止用户与画布上的某些图像交互吗？然后你应该让用户带到前面，并发送到后面。这是一个问题，一个图像被剪贴与剪贴模糊图像的选择区域与它的剪辑区域。无法使用sendToFront，因为用户在任何时候都必须能够选择这三个选项中的任何一个。结果发现解决方案就是perPixelTargetFind