CreateJS 표시 요소 만 맞춤

Question

CreateJS를 사용하여 캔버스에 두 개의 도형이 있습니다. 각 모양에는 마우스 오버 리스너가있는 모양의 히트 영역이 포함되었습니다. 두 모양이 서로 위에 있습니다. 모양을 클릭하면 두 콜백을 받았습니다. 보이는 모양으로 콜백 만받을 수 있습니까? DOM을 상기 방법으로 마우스 상호 작동 유사

enter image description here

Answer 1

거품 가입 이벤트 대상의 계층 체인에 포함되지 않은 요소를 제외 디스플레이리스트이다.

이것은 형제 또는 아래에있는 다른 표시 목록의 요소가 이벤트 처리기 (설명 된 것)를받지 않으며 마우스 이벤트의 대상이 아닌 요소에 대해 마우스 이벤트를받지 않음을 의미합니다.

그러나 마우스 아래에 무엇이 있는지 알려주는 getObjectsUnderPoint을 사용하면 자신 만의 상호 작용을 상당히 쉽게 연결할 수 있습니다. 여기

stage.on("click", handleClick); 
function handleClick(event) { 
    var list = stage.getObjectsUnderPoint(event.localX, event.localY); 
    for (var i=0, l=list.length; i<l; i++) { 
    console.log(list[i]); 
    } 
} 

빠른 샘플입니다 : http://jsfiddle.net/y8jhb26x/

주 당신이 (난 그냥 단계를 사용)이 검사를 트리거 할 개체를 어떻게 제한 할 모든 컨테이너에 마우스 이벤트를 추가 할 수 있지만 호출 할 때 getObjectsUnderPoint이면 을 마우스로 반환합니다. 당신은 단지 해당 컨테이너에 항목을 확인하려는 경우, 당신은 원치 않는 아이를 필터링 할 contains 방법을 사용할 수 있습니다 :

이

for (var i=0, l=list.length; i<l; i++) { 
    if (someContainer.contains(list[i])) { 
    console.log(list[i]); 
    } 
} 

또한 마우스 핸들러 항목을 필터링 getObjectsUnderPoint에 인수를 사용하거나 mouseChildren/mouseEnabled 속성을 존중 이것은 실제 마우스 상호 작용이 작동하는 방식입니다. 도움이

• getObjectsUnderPoint method
• mouse interaction code

희망!