单击透明画布元素以选择其后面的元素

Question

我正在使用 KineticJS。我有一个画布，上面有可拖动、可调整大小的图像（代码刚刚复制自：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/）。可拖动、可调整大小的图像位于一层上，而我在另一层上有一个矩形。矩形层位于顶部。矩形是透明的（没有填充）。

当我将图像拖到矩形下方并再次尝试单击图像时，图像当然不会移动 - 因为它不在顶部。矩形在顶部。但是，我想单击“通过”透明矩形并继续作用于下面的图像。换句话说，当您单击并拖动时，我希望它看起来好像矩形不存在，但我希望矩形显示在顶部。

这是一个演示： http://jsfiddle.net/T8m64/106/ 将图像拖到矩形下方，您将看到无法再抓取它，因为它位于下方。 [我完全知道这不是“不显眼的 javascript”，即 javascript 嵌入在 html 中。对不起。我只是从上面的第一个链接中复制的。]

无论如何，正如我所说，演示是从上面的第一个链接中复制的，最后添加了以下代码：

//Overlying rectangle. I'm doing it as a path not a rect, because that's ultimately what I care about
var rect = new Kinetic.Path({
    x: 0,
    y: 0,
    data: 'm 2.0012417,2.0057235 125.7664883,0 0,105.8016465 -125.7664883,0 z',
    fill: 'none',
    stroke: 'black',
    scale: 1
});

// add the shape to the layer
var rectLayer = new Kinetic.Layer();
rectLayer.add(rect);
stage.add(rectLayer);
rectLayer.moveToTop();

谢谢

Answer 1

你可以告诉层停止监听事件。

这将允许下面的层响应这些事件。

rectLayer.setListening(false);