【发布时间】：2016-10-12 03:06:57
【问题描述】：
我目前正在将 Fabric.js 用于允许用户以结构化方式输入和操作画布对象的 Web 应用程序。
我们提供结构的机制之一是拥有“边界框”，用户可以在其中放置图像。将图像放入其中后，它们可以进行平移和缩放，但会被裁剪为原始边界框的大小和位置。
示例： A clipped image
这里我们看到了裁剪区域，其控件在裁剪区域之外可见。
这很好。用户可以平移图像，剪切框保持静止。我们找到了这个。
但是，如果客户端添加了另一个图像，并且该图像位于第一个图像跨越的区域下方（但由于剪裁而不可见），我们无法选择第二个对象。
例子：
A selection obscured, clipped image
这里的面部图像位于高尔夫图像延伸的下方，超出其剪辑范围。如果不取消选择，则无法选择面部图像。可以想象，如果这三个都在这里，则可以永久地遮挡面部图像的选择区域，而无需移动其他两个图像即可到达。
【问题讨论】：
-
我创建了一个 jsfiddle 来在沙盒环境中说明这一点：jsfiddle.net/Aubron/jjLe9wps/89 请注意，如果您选择 google 徽标，则哈巴狗在 google 徽标被笨拙地移动之前是不可选择的，因为它是扩展区域与哈巴狗重叠。
-
我认为你应该清楚地说明这里的问题是什么。是 z 索引阻止用户与画布上的某些图像进行交互吗？然后你应该让用户带到前面和发送到后面。
-
这是一个问题，图像被使用 clip 剪裁，图像的选择区域被剪裁区域遮蔽。不能使用 sendToFront 因为用户必须能够在任何时候选择这三个中的任何一个。原来解决方案只是 perPixelTargetFind
标签： javascript canvas fabricjs