在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是直接且为有效的交互方式，一个好的手势交互，能降低用户的使用成本和流程，大大提高了用户的体验。

本文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。希望能对大家有一点点的启发作用。

一、引言

在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是直接且为有效的交互方式，一个好的手势交互，能降低用户的使用成本和流程，大大提高了用户的体验。

近期，公司的多个项目中都对手势有着较高的需求，已有的手势库无法完全cover，因此便撸了一个轻量、便于使用的移动端手势库。这篇博文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。希望能对大家有一点点的启发作用，也期待大神们指出不足甚至错误，感恩。

主要讲解项目中经常使用到的五种手势：

拖动: drag

双指缩放: pinch

双指旋转: rotate

单指缩放: singlePinch单指旋转: singleRotate

Tips :因为 tap 及 swipe 很多基础库中包含，为了轻便，因此并没有包含,但如果需要，可进行扩展;

二、实现原理

众所周知，所有的手势都是基于浏览器原生事件touchstart, touchmove, touchend, touchcancel进行的上层封装，因此封装的思路是通过一个个相互独立的事件回调仓库handleBus，然后在原生touch事件中符合条件的时机触发并传出计算后的参数值，完成手势的操作。实现原理较为简单清晰，先不急，我们先来理清一些使用到的数学概念并结合代码，将数学运用到实际问题中，数学部分可能会比较枯燥，但希望大家坚持读完，相信会收益良多。

二、基础数学知识函数

我们常见的坐标系属于线性空间，或称向量空间(Vector Space)。这个空间是一个由点(Point) 和 向量(Vector) 所组成集合。

点(Point)

可以理解为我们的坐标点,例如原点O(0,0),A(-1,2)，通过原生事件对象的touches可以获取触摸点的坐标，参数index代表第几接触点；

蓝鸥科技西安中心是一家致力于技术研发、技术咨询、技术服务、职业教育、创业孵化及项目投资的集团化公司。教育部产学合作协同育人项目承办企业，蓝鸥长期精研西安Java培训、西安大数据培训、西安VR/AR/Unity3D游戏开发培训、西安HTML5前端开发培训、西安Web安全攻防和西安UI设计培训等技术，是目前国内仅有的一家集苹果AATC、Unity、Oracle“三大官方授权于一身”的移动互联网培训企业。选择蓝鸥，不止高薪更是高起点！