Click through transparent canvas element to select element behind it

Question

I am using KineticJS. I have a canvas with draggable, resizable images on it (code was just copied from: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/). The draggable, resizable images are on one layer, and I have a rectangle on another layer. The rectangle layer is on top. The rectangle is transparent (no fill).

When I drag the image under the rectangle and again try to click on the image, of course the image does not move - because it's not on top. The rectangle is on top. However I'd like to click "through" the transparent rectangle and keep acting on the image underneath. In other words, when you click and drag I want it to be as if the rectangle is not there, but I want the rectangle to show on top.

Here is a demo: http://jsfiddle.net/T8m64/106/ Drag the image under the rectangle and you'll see that you can no longer grab it since it's underneath. [I am fully aware this is not "unobtrusive javascript", i.e. the javascript is embedded in the html. Sorry. I just copied it from the first link above.]

Anyway, as I said, the demo is copied from that first link above, with the following code added at the end:

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

Thanks

markE markE · Accepted Answer · 2013-04-20T22:42:14

You can tell a layer to stop listening for events.

This will allow layers underneath to respond to those events.

rectLayer.setListening(false);

Click through transparent canvas element to select element behind it

1 Answers