WeChat mini-app gesture operation: single touch point and multi-touch point, mini-app gesture

Small Program gesture operation: single touch point and multi-touch point, small program gesture

Preface

Gestures are important for some effects. They are widely used in canvas and interaction. Let's take a look at the small program gestures.

Demo

To check whether the applet supports multiple fingers, you need to use touchstart, touchmove, and touchend.

// index.wxml<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" ></view>

//index.jstouchstartFn: 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); }

Single-touch and multi-touch

Official Document: changedTouches

The data format of changedTouches is the same as that of touches. Indicates the changed touch points, such as touchstart, touchmove, and touchcancel ).

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

Real machine Effect

After the above Demo is implemented, the simulator cannot see the data of multiple touch points, so you need a real machine to test.

Check the log information of the real machine.

In changedTouches, the touch point data is stored sequentially, so the applet itself supports multi-touch gestures.

Conclusion

Imagine: Since the gesture of a applet supports multi-touch and relevant paths can be obtained, it is also feasible to calculate the related paths.

Scenario: multi-touch interaction, finger drawing, etc.

Save touch point data

In order to be able to analyze the path of a touch point, at least simple gestures, such as left, right, up, and down, we need to save all the data of the path.

Touch event

Touch-triggered events include "touchstart", "touchmove", "touchend", and "touchcancel ".

See: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html20

Store Data

Var _ wxChanges = []; var _ wxGestureDone = false; const _ wxGestureStatus = ["touchstart", "touchmove", "touchend", "touchcancel"]; // collection path 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 ;}}}

End

This article mainly explores how to parse gestures in advance.