【JavaScript】关于手机中的触摸手势操作实现过程详解

这里实现触摸手势操作的有四个基本方向：上，下，左，右，用javascript语言编写，可以参考下

笔者TA远方在一个文件名为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，另一个是触摸结束点b，就能算出手势操作，实现方法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组件中使用触摸事件，实现手势的控制操作，代码如下

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

【JavaScript】关于手机中的触摸手势操作实现过程详解相关推荐

iphonex如何关机_iphonex常用手势操作有哪些 iphonex常用手势操作介绍【详解】
iphonex常用手势操作有什么?相信小伙伴们一定很好奇,下面小编为大家带来了iphonex常用手势操作大全一览,感兴趣的小伙伴赶紧跟着小编一起来看看吧. 如何唤醒Siri 苹果一直追求极简的设计思路 ...
javascript中的Base64.UTF8编码与解码详解
javascript中的Base64.UTF8编码与解码详解本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...
怎样进入android模式,安卓手机如何进入Recovery模式的通用方式详解
2014-12-12 15:24:16 安卓手机如何进入Recovery模式的通用方式详解标签:安卓 Recovery模式教程 Recovery模式是什么?这里说的Recovery模式主要指的是安 ...
props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是 ...
兄弟机cnc系统面板图解_数控机床操作面板图文详解
<数控机床操作面板图文详解>由会员分享,可在线阅读,更多相关<数控机床操作面板图文详解(53页珍藏版)>请在人人文库网上搜索. 1.数控车床编程和操作(一) 熟 ...
站长在线Python精讲：在Python中格式化字符串的两种方法详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python中格式化字符串的两种方法详解>.本知识点主要内容有:使用%操作符格式化字符串和使用format()方法格式化字 ...
Python中Print()函数的用法___实例详解（二）(全，例多）
Python中Print()函数的用法___实例详解(二)(全,例多) 目录十一.Print()小例子十二.Print()中文输入显示乱码问题十三.Print()写入文件十四.print()在 ...
Java Web中的EL（表达式语言）详解
Java Web中的EL(表达式语言)详解表达式语言(Expression Language)简称EL,它是JSP2.0中引入的一个新内容.通过EL可以简化在JSP开发中对对象的引用,从而规范页面 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...

【JavaScript】关于手机中的触摸手势操作实现过程详解

【JavaScript】关于手机中的触摸手势操作实现过程详解相关推荐

最新文章

热门文章