我有两个不同的阶段。而且,我正在向它们添加图层并放置两个图像对象。
现在,我已经为这些图像对象提供了“点击”事件。
但是,由于最近添加的层位于其他层之上,因此只有顶层会触发事件。
问题:点击紫色指示器,我收到警报。但是,黄色指示器不会触发任何事件,因为它位于图层后面。
(检查底部提供的JSFiddle链接)
如何克服这个问题..?
这是我用来添加和定位图像的代码示例。
工作 JS Fiddle 链接:http: //jsfiddle.net/v4u2chat/aqf9Y/8/
注意:使用滑块更改图像的位置。
图像定位代码
$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
{
var imgLayer = new Kinetic.Layer();
var angleInDegress = 360*targetValue4ImagePositioning-90-5;
var angleInRadians = (Math.PI/180)*angleInDegress;
imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));
var arcEndX = centerX+ ((radius+25)*Math.cos(angleInRadians));
var arcEndY = centerY+ ((radius+25)*Math.sin(angleInRadians));
imgLayer.setX(arcEndX);
imgLayer.setY(arcEndY);
var kineticImage = new Kinetic.Image(
{
x: 0
,y: 0
,width:18
,height:22
,image: $('#'+divIdvalue)[0]
,id:'kineticImage_'+divIdvalue
});
kineticImage.on("click", callBackFn);
imgLayer.add(kineticImage);
stage.add(imgLayer);
}