Android系統下用js自定義gesture事件（仿ios實現移動端事件一致）

 

1、手勢事件

下面二維碼是一個實例dome，可掃碼直接查看:

在ios系統中，系統自帶了gesture事件，兩個手指操做的時候，就會產生一下三種手勢事件：

gesturestart：當一個手指已經按在屏幕上，另外一個手指又觸摸屏幕的時候觸發。
gesturechange：當觸摸屏幕的任何一個手指的位置發生變化的時候觸發。
gestureend：當任何一個手指從屏幕上面移開時觸發。

這裏經過js自定義事件模仿ios的手勢事件爲Android添加相同的功能；

實現基本思路

在Android中咱們能夠監聽touchstart、touchmove、touchend去實現手勢事件的監聽，
當觸發touch事件的時候，會生成一個TouchEvent對象，咱們可經過其屬性e.touches.length來判斷是否多點觸控，經過e.touches[index].pageX,e.touches[index].pageY獲取去觸點座標，經過e.target獲取dom節點；

實現方法

一、建立自定義事件

var gesturestart = new CustomEvent('gesturestart');
var gesturechange = new CustomEvent('gesturechange');
var gestureend = new CustomEvent('gestureend');

一、gesturestart

首先定義兩個變量存儲觸發狀態和起始點信息

var istouch = false;
ar start = [];

監聽touchstart事件，經過e.touches.length>2判斷是否多點觸控，若是是，觸發自定義事件gesturestart

document.addEventListener("touchstart", function(e) {
    if(e.touches.length >= 2) { //判斷是否有兩個點在屏幕上
        istouch = true;
        start = e.touches; //獲得第一組兩個點
        e.target.dispatchEvent(gesturestart);
    };
}, false);

二、gesturechange

gesturechange事件中咱們需在事件對象中返回如下兩個屬性：

• scale：表示兩個手指之間的距離狀況，向內收縮會縮短距離，這個值從1開始，並隨距離拉大而增加
• rotation：表示手指變化引發的旋轉角度，負值表示逆時針，正值表示順時針，從零開始。
  對於兩點間的距離咱們可由如下公式計算

（1）縮放比例可經過兩組點之間的長度比計算

　　　　scale =  dis1   /   dis2
      首先編寫方法兩點之間距離的方法（勾股定理）

　　

function getDistance(p1, p2) {
    var x = p2.pageX - p1.pageX,
        y = p2.pageY - p1.pageY;
    return Math.sqrt((x * x) + (y * y));
};

（2）對於旋轉角度第一組點的夾角與第二組點的夾角相減獲得

　　　　deg= deg2-deg1 =arctan (x2-x1/y2-y1) - arctan (x4-x3/y4-y3) 　

編寫獲取夾角方法（反三角函數求夾角，注意弧度轉化爲角度）

function getAngle(p1, p2) {
    var x = p1.pageX - p2.pageX,
        y = p1.pageY - p2.pageY;
    return Math.atan2(y, x) * 180 / Math.PI;
};

監聽touchmove事件，經過e.touches.length >= 2和istouch判斷是否觸發gesturechange事件

document.addEventListener("touchmove", function(e) {
    e.preventDefault();
    if(e.touches.length >= 2 && istouch) {
        var now = e.touches; //獲得第二組觸點
        var scale = getDistance(now[0], now[1]) / getDistance(start[0], start[1]); //獲得縮放比例
        var rotation = getAngle(now[0], now[1]) - getAngle(start[0], start[1]); //獲得旋轉角度
        gesturechange.scale = scale.toFixed(2);
        gesturechange.rotation = rotation.toFixed(2);
        e.target.dispatchEvent(gesturechange);  
    };
}, false);

三、gestureend

監聽touchend事件，經過istouch判斷是否觸發gestureend 事件

document.addEventListener("touchend", function(e) {
    if(istouch) {
        istouch = false;
        e.target.dispatchEvent(gestureend);
    };
}, false);

四、系統環境判斷

function isAndroid(p1, p2) {
    var u = navigator.userAgent;
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //是否android終端
};

封裝以上方法並執行，便可實現安卓端與ios的手勢事件兼容

完整代碼見https://github.com/pangyongsheng/pangyongsheng.github.io/tree/master/gesture

---

^[1]: 部分代碼參考https://blog.csdn.net/qq_17757973/article/details/54604625