KineticJS 点击了哪一层？答案

【问题标题】：KineticJS which layer clicked?KineticJS 点击了哪一层？
【发布时间】：2014-09-08 14:01:55
【问题描述】：

我使用 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';

【问题讨论】：

标签： javascript html kineticjs

【解决方案1】：

您需要将 id 设置为层以识别它们。

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

您可以通过后代检查图层ID

e 是 MouseEvent 对象。

e.targetNode 是 Kinetic.Image

e.targetNode.parent 是 Kinetic.Layer

e.targetNode.parent.attrs.id 是 Kinetic.Layer 的 id

【讨论】：

【解决方案2】：

如果您点击一张图片，您可以使用.getLayer() 来获取您点击的图片所在图层的引用。

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

KineticJS 不会监听对图层空白部分的点击。因此，如果您单击舞台的空白部分，则您无法判断单击了哪个图层。但是由于layer2 高于layer，所以如果您点击舞台的空白部分，那么您总是点击顶层（layer2）。

【讨论】：