4

我有两个不同的阶段。而且,我正在向它们添加图层并放置两个图像对象。

现在,我已经为这些图像对象提供了“点击”事件。

但是,由于最近添加的层位于其他层之上,因此只有顶层会触发事件。

问题:点击紫色指示器,我收到警报。但是,黄色指示器不会触发任何事件,因为它位于图层后面。

(检查底部提供的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);

  }
4

1 回答 1

1

感谢**Steve**您的意见。

实际问题出在舞台上。我正在使用两个不同的阶段,这不是必需的。

现在,我将代码更改为单阶段,它就像魅力一样工作:)

图层不会占据整个画布区域。它只会占据我们为其创建图层的形状区域。所以,层没有大惊小怪或问题。

更新的JS Fiddle可以从下面提到的链接中找到。

http://jsfiddle.net/v4u2chat/aqf9Y/9/

于 2012-05-01T07:54:08.333 回答