私は別のステージの上に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);
}