투명 캔버스 요소를 클릭하여 그 뒤에있는 요소를 선택하십시오.

Question

나는 KineticJS를 사용하고 있습니다. 드래그 가능한 크기 조정이 가능한 캔버스가 있습니다 (코드는 http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/에서 복사되었습니다). draggable, 크기 조정이 가능한 이미지는 한 레이어에 있고 다른 레이어에는 사각형이 있습니다. 직사각형 레이어가 위에 있습니다. 사각형은 투명합니다 (채우기 없음).

이미지를 사각형 아래로 드래그하고 이미지를 다시 클릭하면 이미지가 이동하지 않습니다. 상단에 없기 때문에 이미지가 이동하지 않습니다. 사각형이 위에 있습니다. 그러나 투명 사각형을 "통해"클릭하고 밑에있는 이미지를 계속 사용하고 싶습니다. 즉, 클릭하고 끌면 사각형이없는 것처럼 보이기를 원하지만 사각형을 맨 위에 표시하고 싶습니다. 여기

는 데모입니다 : http://jsfiddle.net/T8m64/106/ 끌어 사각형 아래 이미지와 당신은 아래이기 때문에 당신이 더 이상 잡을 수 없음을 확인할 수 있습니다. [나는 이것이 "눈에 잘 띄지 않는 자바 스크립트"가 아니라는 것을 완전히 알고 있습니다. 즉, 자바 스크립트가 HTML에 포함되어 있습니다. 죄송합니다. 난 그냥 위의 첫 번째 링크에서 복사]

어쨌든, 나는 다음과 같은 코드가 마지막에 추가 된 데모는, 위의 첫 번째 링크에서 복사 말했듯이 :.

//Overlying rectangle. I'm doing it as a path not a rect, because that's ultimately what I care about 
var rect = new Kinetic.Path({ 
    x: 0, 
    y: 0, 
    data: 'm 2.0012417,2.0057235 125.7664883,0 0,105.8016465 -125.7664883,0 z', 
    fill: 'none', 
    stroke: 'black', 
    scale: 1 
}); 

// add the shape to the layer 
var rectLayer = new Kinetic.Layer(); 
rectLayer.add(rect); 
stage.add(rectLayer); 
rectLayer.moveToTop(); 

감사

Answer 1

이벤트를 수신 대기하지 않도록 레이어에 지시 할 수 있습니다.

이렇게하면 아래의 레이어가 해당 이벤트에 응답 할 수 있습니다.

rectLayer.setListening(false);