寫前面
（我存在的目的怎麼不起作用啊~）
上個星期又接到 我們運維美女的需求 其中大部分都是非常簡單的！
不過其中有個東西我到是蠻感興趣的 就是類似下面這個
要想實現上面這個 就要使用多點觸控了 處理多點觸控手勢並不簡單 但也不是非常困難
但是 要能真正的使用 需要很多的知識結合起來！
效果gif
demo君點我
你可以用手機體驗下 或者你的電腦螢幕可以觸控 我就是用電腦錄製的 （這個螢幕終於有用武之地了= =）
這個東西含有3個手勢 哪幾個呢？
1 拖放手勢
這個是相對簡單的 單點和和多點（這裡是雙指）都是可以實現拖放的 拖放原理我就不說了 很基礎
值得注意的是 對於雙指的拖放 我們得知道位於兩指之間那點位置 利用那點來計算 如圖
這個點有很多計算方法
我這裡是 首先找到左下那點 另外個就是右上了
然後 左下那點加上他們的差值就ok了 具體**就是
let minx =min(p1.x,p2.x);2、縮放手勢let miny =min(p1.y,p2.y)
let cx = minx + ( max(p1.x,p2.x)-minx )*.5;
let cy = max(p1.y,p2.y) - (max(p1.y,p2.y)-miny)*.5;
通常做縮放 縮放的那個物件都是圍繞他的中心去縮放的 如圖
還有一種情況就是 縮放點並不是物件的中心點 而是圍繞 我們上面計算的那兩指之間那點 去做的縮放 如圖
第一種情況
當我們首次move時候 我們得初始乙個距離 之後都得根據那個值 確定出乙個縮放因子
之後cancel或者end的時候 我們要記錄最後次的縮放因子(再次move是要疊加的) 還得把初始的距離重置
而且我們要給個最大和最小閾值 超過界限的話得回彈回來 大致就這思路
scale : =pos;第二種情況const len = (new
vec(
point1.x -point2.x
,point1.y -point2.y
)).length();
if(!this.blen) this.blen =len;
const s = (len/this.blen)*this.bs;
this.sss =s;
this.custom && this
.custom(point1,point2,s);
gesture.trigger('scale', );
},resolve());
},bs : 1 ,sss : 1,blen : 0}
我們得計算出矩陣中e和f的值
this.custom && this.custom(point1,point2,s);callback座標和縮放因子 額外計算
ges.custom('scale' , (point1,point2,s)=>);3、旋轉手勢
直接看圖吧 我們只要解決這些向量的關係就ok了
比如圖上橘黃色向量就是是初始的手勢向量 其他顏色是之後向量位置大小
伴隨著手勢的旋轉 你得知道目前向量相對於初始的橘黃色向量 角度？ 法線朝內？ 朝外？
叉積完美的解決的所有問題 雖然用點乘也可以搞定旋轉 不過有多餘計算
不懂啥是叉積的可以問下她 度娘 比我解釋的清楚多了 ！
好了ok！
也給出github位址
*另外可以給我幾個star 了！
移動端手勢
1.相關事件在 mobile 與 pc 之間的差異 1.1click事件的300ms延遲問題 2007年第一代iphone發布，瀏覽器自帶了乙個功能 雙擊縮放。雙擊頁面的時候，瀏覽器會智慧型的縮放當前頁面到原始大小。雙擊縮放的原理就是，當你click一次之後，會經過300ms之後檢測是否再有一次cl...
移動端手勢測試
123 function var current 0 var imgs swipe img var pages num1 span 向左左邊滑動，index為下個顯示 active display nane pages的給當前的焦點樣式 swipe on swipeleft function e 向...
移動端的手勢事件 左右滑動
會聽過什麼左滑喜歡，右滑不喜歡，那麼這樣的滑動手勢如何實現，在此用touch事件來實現左右滑動的判斷 lang en charset utf 8 name viewport content width device width,user scalable no,initial scale 1.0,m...