PixiJS -하지 (의 DisplayObject의 외부) 트리거 모든 touchend 이벤트

Question

Pixijs (3.0.8)은 자신의 데모와 같이 멀티 터치를 지원하고, 내 모바일 장치에서 접촉을위한 start, move 및 end 리스너를 설정했습니다.

터치는 캔버스 내에서 interactiveArea이라고하는 정사각형에 등록되어 있지만, 영역 외부로 나가면 터치 이벤트가 실행됩니다. 이것은 하나의 마우스 커서로 잘 동작하는 동작입니다.

그러나 더 많은 손가락을 사용하고 식별자가 0, 1 및 2 인 터치를 사용하면 첫 번째 touchEnd 만 영역 외부에서 트리거됩니다. 그래서 나는 interactiveArea 안에 3 개의 손가락을 누르고 그 바깥으로 모두 움직입니다. 그런 다음 1을 놓은 다음 다른 것들을 놓으십시오. 나는 touchEnds 이벤트 0과 2에 대한 통보를받지 않을 것이다. 그리고 나는 3 개의 접촉을 다시 등록해야하고, 단지 2에 대한 touchend가 시작되도록해야 할 것이다!

첫 번째 touchend에서 멈추지 않고 모든 touchends를 감지 할 수있는 방법에 대한 팁이 있습니까? 나는 setTimeout 해킹으로 작업을 시도했지만 실제로는 사용 사례에 맞지 않는다.

편집touchendoutside이 한 번만 실행되는 방법을 보여주기 위해 기본 코드를 만들었습니다. https://codepen.io/Thomaswithaar/pen/EygRjM 마우스의 상호 작용보다는 터치에 가깝기 때문에 모바일에서 펜을 방문하십시오. 붉은 색 사각형에 두 손가락을 댄 상태로 두 손가락을 움직이고 놓으면 하나만touchendoutside 이벤트가 발생합니다.

Answer 1

PIXI 소스 코드를 살펴보면 실제로 상호 작용 관리자에 버그가 있습니다.

InteractionManager.prototype.processTouchEnd = function (displayObject, hit) 
{ 
    if(hit) 
    { 
     this.dispatchEvent(displayObject, 'touchend', this.eventData); 

     if(displayObject._touchDown) 
     { 
      displayObject._touchDown = false; 
      this.dispatchEvent(displayObject, 'tap', this.eventData); 
     } 
    } 
    else 
    { 
     if(displayObject._touchDown) 
     { 
      displayObject._touchDown = false; 
      this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); 
     } 
    } 
}; 

displayObject._touchDown에 해당하는 경우 당신은 touchendoutside 이벤트가 전달됩니다 것을 else 문에서 볼 수 있습니다 여기에 터치 최종 이벤트를 처리하는 방법이다. 그러나 첫 번째 손가락을 뗀 후에 깃발을 거짓으로 설정합니다. 그래서 그 이벤트를 한 번만 받게됩니다.

여기에 문제 연 : https://github.com/pixijs/pixi.js/issues/2662

을 그리고 여기에 수정 프로그램을 제공 : https://github.com/karmacon/pixi.js/blob/master/src/interaction/InteractionManager.js 이 솔루션은 플래그를 제거하고 대신 카운터를 사용합니다. 아직 테스트하지 않았기 때문에 작동하는지 알려 주시기 바랍니다.