Нажмите прозрачный элемент холста, чтобы выбрать элемент позади него

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