kineticjs 이미지의 일부가 보이지 않게합니다.

Question

지도 위로 움직이는 이미지가 있습니다. 그것이 교량 밑을 지나갈 때 나는 교량 밑을 통과하는 배의 일부를 보이지 않게 만들고 싶다.

현재 우주선 위에 이미지로 배치 된 별도의 브리지 사본을 사용하고 있지만 추가로 아트 워크를 만들어야합니다.

이상하게도 보이지 않는 다각형을 지정하고 다각형 아래에있는 우주선 이미지의 일부가 보이지 않게되어지도의 다리를 그대로 남겨 둡니다.

우주선 이미지의 일부를 움직이는 방식으로 프레임 단위로 동적으로 숨길 수 있습니까?

Answer 1

KineticJS는 사각형 클리핑 영역 만 허용합니다.

해결 방법 :

당신은 당신의 다리를 클립을 오프 스크린 캔버스를 사용할 수 있습니다.

그런 다음 Kinetic.Image 요소의 이미지 소스로 오프 스크린 캔버스를 지정할 수 있습니다.

var myClippedShipImage=new Kinetic.Image({ 

    image:myOffscreenCanvasElement, 

    ... 

}); 

Answer 2

우주선에 대해 별도의 이미지를 사용하고 있습니다. 동일한 레이어에 운동 이미지가 있다고 가정합니까? KineticJs의 내장형 .moveToTop() 함수를 쉽게 사용할 수 있습니다.

예. 선박의 이미지와 같은 것입니다 :

bridge = new Kinetic.Image({ 
    x: [..], 
    y: [..], 
    width: [..], 
    height: [..], 
    image: [..], 
    id: 'bridge' 
}); 

이 같은 간다 :

layer.get('#bridge')[0].moveToTop(); 
layer.draw(); 

행운을 빕니다!