我正在使用 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();
谢谢