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);

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

1 个答案: