Mac 터치패드 두 손가락 이벤트 요약의 Node.js 구현

머리말

요즘 웹 문제를 해결할 때 맥 터치패드 두손가락이벤트(위,아래,왼쪽,오른쪽,확대,축소)를 캡쳐해야 하는데 준비된게 없는 걸 발견했어요- 바퀴를 만들었으니 직접 만들어야 했어요.

예를 들어 jquery.mousewheel.js(크로스 브라우저 마우스 휠 지원 추가)는 너무 단순하고 Mac 두 손가락 동작을 처리하지 못하므로 사용할 수 없습니다.

목표

Mac 터치패드의 두 손가락 동작을 얻는 구체적인 방법에는 두 가지가 있습니다. 하나는 실시간 드래그 경로이고 다른 하나는 제스처(위, 아래, 왼쪽, 오른쪽, 확대, 축소)입니다.

어려움

두 손가락 동작은 마우스 휠 이벤트만 트리거합니다. 다른 터치 및 마우스 이벤트는 이것으로만 시작할 수 있습니다.

두 손가락 기능

1. 빠른 슬라이딩 과정에서 deltaX 및 deltaY의 초기 값의 양수 및 음수 값은 슬라이딩 방향과 다릅니다.

2. 느린 슬라이딩 과정에서 deltaX 및 deltaY 값의 값 범위는 일반적으로 [-3, 3]으로 매우 작습니다.

3. 1초 안에 마우스휠 이벤트가 약 100번 발생합니다.

4. 슬라이딩 과정에서 수치에 지터 문제가 발생합니다.

드래그 경로 아이디어(경로) 구현

빠른 스와이프

1. deltaX 및 deltaY의 초기 양수 및 음수 값이 슬라이딩 방향과 다른 데이터는 폐기되어야 합니다. (실제 방향이 아니기 때문에)

2. 각 트리거의 deltaX, deltaY 값을 서로 뺀 결과 값이 방향과 다를 경우 폐기됩니다.

3. 남은 차이는 방향 이동 거리입니다.

4. 두 방향의 모든 차이가 합산되어 총 두 그룹이 됩니다. 어느 그룹이 더 큰 값을 갖는지 선택하여 방향을 결정합니다.

느리게 스와이프하는 경우

1. deltaX, deltaY 값의 값 범위가 매우 작기 때문에 둘 다 유지하지만, 값과 방향이 다른 것 역시 폐기됩니다.

2. 두 방향의 모든 차이가 합산되어 총 두 그룹이 됩니다. 어느 그룹이 더 큰 값을 갖는지 선택하여 방향을 결정합니다.

제스처 아이디어 구현(Gesture)

위의 내용을 바탕으로 일정 기간 내에 deltaX, deltaY 및 쌍별 차이를 기록합니다.

deltaX 및 deltaY는 확대 및 축소 동작을 계산하는 데 사용됩니다.

쌍별 차이는 위, 아래, 왼쪽 및 오른쪽 손 동작을 계산하는 데 사용됩니다.

그러므로 제스처는 한 순간이 아니라 일정 기간에 걸친 제스처입니다.

구현 코드

구체적인 코드를 게시하지는 않겠지만 내 Git허브(//m.sbmmt.com/)에서 직접 다운로드할 수 있습니다.

요약

경로 문제: 마우스 휠로 제공되는 deltaX 및 deltaY 값이 조작 효과와 상당히 다르며 빠른 슬라이딩 효과가 특히 부정확합니다.

제스처 문제: 두 손가락 특성 중 세 번째 점으로 인해 제스처 구현이 정확하지 않습니다. 기간을 매우 짧게 만들어도 데이터 양으로 인해 정확성이 더욱 떨어집니다. 미적분학은 사용할 수 없습니다.) 세그먼트가 길어질수록 반응 시간도 길어집니다.

구체적인 효과를 보려면 코드를 다운로드할 수 있습니다. 효과가 만족스럽지는 않지만 더 나은 솔루션이 있으면 다운로드하여 살펴볼 수 있습니다. 감사합니다.​

위 내용은 Mac 터치패드 두 손가락 이벤트 요약의 Node.js 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!