KineticJS, какой слой щелкнул?

Question

Я использую KineticJS, добавляя изображения к слоям. Мне нужно знать, какой слой щелкнуть.

Это jsfiddle: http://jsfiddle.net/yvp79ryf/1/

Если я нажал первое изображение просто нужно получить предупреждение щелкнул это первые слои в противном случае второй слой

HTML

<div id="container"></div> 
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script> 
<script defer="defer"> 

JavaScript

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 


    var layer = new Kinetic.Layer(); 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
    var yoda = new Kinetic.Image({ 
     x: 140, 
     y: stage.getHeight()/2 - 59, 
     image: imageObj, 
     width: 106, 
     height: 118 
    }); 

    layer.add(yoda); 
    stage.add(layer); 

    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; 



    var layer2 = new Kinetic.Layer(); 
    var imageObj2 = new Image(); 
    imageObj2.onload = function() { 
    var filteredYoda = new Kinetic.Image({ 
     x: 280, 
     y: stage.getHeight()/2 - 59, 
     image: imageObj2, 
     width: 106, 
     height: 118 
    }); 

    layer2.add(filteredYoda); 
    stage.add(layer2); 
    }; 
    imageObj2.src = 'http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png'; 

Answer 1

Вам необходимо установить идентификатор для слоев, чтобы идентифицировать их.

var layer = new Kinetic.Layer({id:1}); 
var layer2 = new Kinetic.Layer({id:2}); 

Добавить обработчик события нажатия на сцене

stage.on('click', function(e) { 
    if(e.targetNode.parent.attrs.id == 1){ 
     alert('first layer'); 
    }else{ 
     alert('second layer'); 
    } 
}); 

Вы можете проверить идентификатор уровня через потомков

e является объектом MouseEvent.

e.targetNode является Kinetic.Image

e.targetNode.parent является Kinetic.Layer

e.targetNode.parent.attrs.id это идентификатор Kinetic.Layer

Answer 2

Если вы нажимаете на изображение, вы можете использовать .getLayer(), чтобы получить ссылку на слой, на котором включено ваше нажатое изображение.

stage.on('click', function(e) { 
    console.log('layer:',e.target.getLayer().id()); 
}); 

KineticJS не прослушивает клики по пустой части слоя. Поэтому, если вы нажмете на пустую часть сцены, вы не сможете определить, какой слой был нажат. Но поскольку с layer2 выше layer, то если вы нажмете на пустую часть сцены, вы всегда щелкаете по верхнему слою (layer2).