WeChat 애플릿이 제스처의 다양한 요구 사항을 어떻게 인식하는지 간략하게 설명하세요.

제스처는 휴대폰 사용자, 특히 효과를 원하는 사람들의 작동 경험에 여전히 매우 중요합니다. 우리는 종종 캔버스, 인터랙티브 및 기타 애플리케이션을 사용합니다. , 오늘은 주로 WeChat 애플릿에서 제스처가 어떻게 구현되는지 살펴보겠습니다. 우리는 주로 다음 두 가지 측면에서 WeChat 미니 프로그램 제스처의 구현을 소개합니다.

• 1부: 싱글 터치 포인트 및 멀티 터치 포인트: WeChat 애플릿의 제스처 데이터 및 멀티 터치 포인트 지원을 살펴보겠습니다

• 다음: wxGesture 분석 클래스 작성: 왼쪽 슬라이드, 오른쪽 슬라이드, 위쪽 슬라이드, 아래쪽 슬라이드 및 확장 구문 분석(다음 기사)
  

데모

미니 프로그램이 여러 손가락을 지원하는지 알아보려면 touchstart, touchmove, touchend를 사용해야 합니다

[AppleScript] 일반 텍스트 보기 코드 복사

// index.wxml

[AppleScript] 일반 텍스트 보기 코드 복사

//index.js
touchstartFn: function(event){
    console.log(event);
  },
  touchmoveFn: function(event){
    console.log(event);
    // console.log("move: PageX:"+ event.changedTouches[0].pageX);
  },
  touchendFn: function(event){
    console.log(event);
    // console.log("move: PageX:"+ event.changedTouches[0].pageX);
  }

우선 싱글 터치 포인트, 멀티 터치 포인트에 대해

공식 문서:changedTouches:changeTouches의 데이터 형식은 터치와 동일합니다. 무에서 무로 변경(touchstart), 위치 변경(touchmove), 무에서 무로 변경(touchend, touchcancel) 등 변경된 터치 지점을 나타냅니다.

[AppleScript] 일반 텍스트 보기 코드 복사

"changedTouches":[{ 
"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
}]

• 실제 기계 효과
  

위 데모를 구현한 후 시뮬레이터는 여러 터치 포인트의 데이터를 볼 수 없으므로 테스트하려면 실제 장치가 필요합니다.

실제머신의 로그정보 보기

changeTouches에 터치 포인트 데이터를 순차적으로 저장하여 애플릿 자체가 멀티 터치 포인트 제스처를 지원합니다

• 결론
  

상상 : 미니 프로그램의 제스쳐가 멀티터치를 지원하기 때문에 , 해당 경로를 얻을 수 있으면 해당 경로의 계산도 가능합니다.
시나리오 : 멀티 터치 인터랙션 효과, 핑거 드로잉 등

터치 포인트 데이터 저장

터치 포인트의 경로를 분석하려면 최소한 왼쪽 스와이프, 오른쪽 스와이프, 위, 아래 등의 간단한 제스처의 경우 경로의 모든 데이터를 저장해야 합니다.

• 터치 이벤트
  

터치 트리거 이벤트는 "touchstart", "touchmove"로 구분됩니다. " , "touchend", "touchcancel" 4개

• 데이터 저장
  

[AppleScript] 일반 텍스트 보기 코드 복사

var _wxChanges = [];
var _wxGestureDone = false;
const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];
// 收集路径
function g(e){
    if(e.type === "touchstart"){
        _wxChanges = [];
        _wxGestureDone = false;
    }
    if(!_wxGestureDone){
        _wxChanges.push(e);
        if(e.type === "touchend"){
            _wxGestureDone = true;  
        }else if(e.type === "touchcancel"){
            _wxChanges = [];
            _wxGestureDone = true; 
        }
    }
}

위 내용은 WeChat 애플릿이 제스처의 다양한 요구 사항을 어떻게 인식하는지 간략하게 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!