我使用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';
最佳答案
您需要将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.Imagee.targetNode.parent
是Kinetic.Layere.targetNode.parent.attrs.id
是Kinetic.Layer的ID