這里實現(xiàn)觸摸手勢操作的有四個基本方向：上，下，左，右，用javascript語言編寫，可以參考下

筆者TA遠(yuǎn)方在一個文件名為gesture.js寫了, 定義觸摸操作中的所有手勢，一共8個總方向，包括四個基本方向，還有一個點擊，代碼如下

const G = {left: 'LEFT',right: 'RIGHT',down: 'DOWN',up: 'UP',click: 'CLICK',leftAndUp: 'LEFT_UP',leftAndDown: 'LEFT_DOWN',rightAndUp: 'RIGHT_UP',rightAndDown: 'RIGHT_DOWN', }

觸摸操作中，除了點擊，常見的是通過計算兩點不同的位置，一個是觸摸開始點a，另一個是觸摸結(jié)束點b，就能算出手勢操作，實現(xiàn)方法getG如下

const getG = (g) => {const { a, b } = g;//兩點if (a!=null && b!=null){//offX,Y 相差值const offX = a.x-b.x;const offY = a.y-b.y;//absX,Y 絕對值const absX = Math.abs(offX);const absY = Math.abs(offY);//是否上下移動if (absX < absY) {if (a.y > b.y) {return G.up;//向上移} else {return G.down;//向下移}} //是否左右移動else if (absX > absY) {if (a.x > b.x) {return G.left;//向左} else {return G.right;//向右}} else {//絕對值不為0，兩個方向垂直之間的夾角方向移動if (absX!=0){if (offX>0) {if (offY>0) {return G.leftAndUp;//向左上方向移} else {return G.leftAndDown;}} else {if (offY>0) {return G.rightAndUp;//向右上方向移} else {return G.rightAndDown;}}}}}return G.click;//點擊操作 }

最后講下使用例子，在小程序中的canvas組件中使用觸摸事件，實現(xiàn)手勢的控制操作，代碼如下

import Gesture from '@/common/js/gesture.js'; App({data: {gestures: {},},onTouchStart(event){this.gestures.a = event.touches[0];},onTouchMove(event){this.gestures.b = event.touches[0];},onTouchEnd(){const g = Gesture.getG(this.gestures);this.ctrlMove(g);this.gestures = {};},ctrlMove(g){const Ges = Gesture.G;//...控制移動switch(g){case Ges.left://...break;//...}} })

總結(jié)

以上是生活随笔為你收集整理的【JavaScript】关于手机中的触摸手势操作实现过程详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。