애니메이션 모양 안에있는 KineticJS 클릭 감지

Question

좋아, 나는 영리하려고 노력했다는 것을 인정한다. 나는 Shape의 drawFunc 속성을 무시하면 그냥 사각형 내부에 무엇이든 그릴 수 있고 여전히 KineticJS의 클릭 감지를 사용할 수 있다고 생각했다. 여기 내 시도입니다 :

var shape = new Kinetic.Shape({ 
    drawFunc: function(context) { 
    var id = 26; // Id of a region inside composite image. 
    context.beginPath(); 
    context.rect(0, 0, w, h); 
    context.closePath(); 
    this.fill(context); 
    this.stroke(context); 
    context.drawImage(copyCanvas, (id % 8) * w, flr(id/8) * h, 
     w, h, 0, 0, w/2, h/2); 
    }, 
    draggable: true 
}); 

그래서 아이디어는 사각형을 그립니다, 그리고 수시로 변경을 제외하고 copyCanvas 자체가 변경되기 때문에, 텍스처처럼 (사각형의 상단에 뭔가를 그릴의 drawImage()를 사용하는 것이 었습니다). 한편, 나는 이벤트 처리 (특히 드래그 앤 드롭)가 여전히 '그냥 일하는 것'을 기대했다. 글쎄, 여기에 무슨 일이 일어나는가 : drawImage()에 의해 커버되지 않는 사각형의 부분이 클릭을 올바르게 감지한다. 그러나 이미지로 덮힌 직사각형의 1/4이 클릭에 응답하지 않습니다! 자, 내 질문은 왜? 나는 KineticJS 코드를 파헤 치고 클릭 탐지가 단순히 버퍼로 그리는 것을 의미하고 주어진 x, y 포인트가 0이 아닌 알파를 가지고 있는지를 보았다. 내 직사각형 위에 이미지를 그릴 때 이것이 어떻게 영향을받을 수 있는지 알 수 없습니다.

아이디어가 있습니까?

Answer 1

OK, 그래서 나는 가서 소스 코드를 살펴 보았습니다. 여기에 최종 대답입니다 :

KineticJS 개체를 형성하는 RGB 색상에서 세계지도를 사용하여 생성 된 각 모양에 임의의 독특한 RGB 색상을 지정합니다. 모양의 draw() 기능은 두 번 호출됩니다. 한 번은 '실제'캔버스로, 한 번은 '버퍼'캔버스로 히트 감지에 사용됩니다. '버퍼'캔버스를 사용하는 경우 KineticJS는 획을 전환하고 지정된 모양의 고유 한 RGB 색상으로 채우기 색상을 채 웁니다. 동일한 '버퍼'캔버스가 레이어의 모든 모양에 사용됩니다. 따라서 히트 감지는 주어진 점의 RGB 값을 읽고 글로벌 맵에서 해당 모양을 찾는 것입니다. 이제, 나의 예에서는 히트 감지에 사용되는 KineticJS의 색상 저글링을 우회하는 방식으로 이미지를 그렸습니다. 따라서 이미지 영역을 클릭하면 KineticJS는 알려진 캔버스가없는 버퍼 캔버스에서 알 수없는 RGB 색상을 보았습니다.

해결책은 '버퍼'(또는 '히트 감지') 단계의 이미지를 그려서는 안되는 간단한 사각형입니다.

var width = 200; 
var height = 100; 
var myShape = new Kinetic.Shape({ 
    drawFunc: function(context) { 
    if (layer.bufferCanvas.context == context) { 
     context.beginPath(); 
     context.rect(0, 0, width, height); 
     context.closePath(); 
     this.fill(context); 
     this.stroke(context); 
    } else { 
     context.drawImage(someCanvasWithAnythingOnIt, 0, 0, width, height, 
     0, 0, width, height); 
    } 
    }}); 

내가 내 자신의 보상을 수집 할 수 있습니다 : 당신이 궁금해하는 경우, 여기에 drawFunc에 대한 올바른 코드는?

Answer 2

나는 문제가 순서대로 있다고 생각합니다. 그리는 각 객체와 관련된 깊이가 있으며 기본 순서는 스택과 같으며 맨 위에 그려집니다. 이제 코드를 수정하여 도형 그리기 기능 내에 2 개를 그렸습니다. 그래도 여전히 순서가 유지되므로 개체가 입력을 감지 할 수 없다고 생각합니다. 순서 변경, 즉 먼저 이미지를 그린 다음 직사각형을 바꾸어 문제가 해결되었는지 확인하십시오. 예를 들어 jsFiddle을 공유하십시오.