Kinetic JS - 分层问题答案

【问题标题】：Kinetic JS - Layering IssueKinetic JS - 分层问题
【发布时间】：2012-05-10 04:15:18
【问题描述】：

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

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

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

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

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

  }

【问题讨论】：

你能把两张图都画在同一层吗？
@SteveGreatrex 您的 jsfiddle 不包含黄色或紫色指示符。不幸的是，我必须理解这段代码。
嘿@Elsa，这不是我的小提琴 - 检查 v4u2chat
哦，对不起，我是想标记@v4u2chat :p

标签： html canvas kineticjs

【解决方案1】：

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

实际的问题在于Stage。我正在使用两个不同的阶段，这不是必需的。

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

图层不会占据整个画布区域。它只会占据我们为其创建图层的形状区域。所以，Layers 不用大惊小怪。

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

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

【讨论】：