키네틱 JS - 레이어링 문제

두 개의 서로 다른 단계가 있습니다. 그리고 레이어를 추가하고 두 개의 이미지 개체를 배치했습니다.키네틱 JS - 레이어링 문제

이제 이미지 개체에 '클릭'이벤트가 발생했습니다.

그러나 최근에 추가 된 레이어가 다른 레이어 위에 있기 때문에 최상위 레이어 만 이벤트를 트리거합니다.

문제 : 보라색 표시기를 클릭하면 알림이 표시됩니다. 그러나 노란색 표시기는 레이어 뒤에 있기 때문에 어떤 이벤트도 트리거하지 않습니다.

어떻게이 문제를 극복하기 (하단에 제공되는 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); 

    }

출처

2012-04-30 v4u2chat

두 이미지를 같은 레이어에 그릴 수 있습니까? –

@SteveGreatrex 귀하의 jsfiddle 노란색 또는 보라색 표시기가 포함되어 있지 않습니다 .. 나는이 코드를 이해해야 불행히도. –

안녕하세요 @ 엘사, 그건 내 피들이 아닙니다 - v4u2chat로 확인하십시오 –

감사 **Steve**.

실제 문제는 스테이지에 있습니다. 필요하지 않은 두 개의 다른 단계를 사용하고 있습니다.

지금, 나는 하나의 스테이지에 내 코드를 변경하고 전체 캔버스 영역을 차지하지 않습니다 매력 :

레이어처럼 작동합니다. 레이어를 만든 모양의 영역 만 차지합니다. 따라서, 레이어에 대한 번거 로움이나 문제는 없습니다.

JS Fiddle은 아래 링크에서 찾을 수 있습니다.

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

출처

2012-05-01 07:54:08 v4u2chat

키네틱 JS - 레이어링 문제

답변

관련 문제