4

私は別のステージの上に2つの異なるステージを持っています。そして、それらにレイヤーを追加して、2 つの画像オブジェクトを配置しました。

さて、これらの画像オブジェクトに「クリック」イベントを与えました。

ただし、最近追加されたレイヤーは他のレイヤーの上にあるため、一番上のレイヤーのみがイベントをトリガーしています。

問題 :紫色のインジケーターをクリックすると、アラートが表示されます。ただし、黄色のインジケーターはレイヤーの背後にあるため、イベントをトリガーしません。

(下部にあるJSFiddleリンクを確認してください)

この問題を克服する方法..?

これは、画像を追加して配置するために使用しているコードサンプルです。

ワーキング 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);

  }
4

1 に答える 1

1

ご意見ありがとうござい**Steve**ます。

実際の問題はステージにあります。必須ではない 2 つの異なるステージを使用しています。

今、私は自分のコードを単一のステージに変更しましたが、それは魅力的に機能します:)

レイヤーはキャンバス領域全体を占有しません。レイヤーを作成した形状の領域のみを占有します。だから、レイヤーに大騒ぎや問題はありません。

更新されたJS Fiddleは、以下のリンクから見つけることができます。

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

于 2012-05-01T07:54:08.333 に答える