Question

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

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

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

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

（查看底部提供的JSFiddle链接）

如何克服这个问题..？

以下是我用来添加的代码示例＆amp;定位图像。

工作JS小提琴链接： 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);

  }

Answer 1

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

实际问题在于舞台。我正在使用两个不需要的阶段。

现在，我将我的代码更改为单个舞台，它就像魅力一样：）

图层不会占据整个画布区域。它只占据我们创建图层的形状区域。所以，层没有问题或问题。

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

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

Kinetic JS - 分层问题

1 个答案: