移動端的複雜手勢

2022-07-18 01:12:17 字數 2080 閱讀 1080

寫前面

(我存在的目的怎麼不起作用啊~)

上個星期又接到 我們運維美女的需求  其中大部分都是非常簡單的!

不過其中有個東西我到是蠻感興趣的 就是類似下面這個

要想實現上面這個 就要使用多點觸控了 處理多點觸控手勢並不簡單 但也不是非常困難

但是 要能真正的使用 需要很多的知識結合起來!

效果gif

demo君點我

你可以用手機體驗下 或者你的電腦螢幕可以觸控 我就是用電腦錄製的 (這個螢幕終於有用武之地了= =)

這個東西含有3個手勢 哪幾個呢?

1 拖放手勢

這個是相對簡單的 單點和和多點(這裡是雙指)都是可以實現拖放的 拖放原理我就不說了 很基礎

值得注意的是 對於雙指的拖放 我們得知道位於兩指之間那點位置 利用那點來計算  如圖

這個點有很多計算方法 

我這裡是 首先找到左下那點 另外個就是右上了

然後 左下那點加上他們的差值就ok了 具體**就是

let minx =min(p1.x,p2.x);

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;

2、縮放手勢

通常做縮放 縮放的那個物件都是圍繞他的中心去縮放的 如圖

還有一種情況就是 縮放點並不是物件的中心點 而是圍繞 我們上面計算的那兩指之間那點 去做的縮放 如圖

第一種情況

當我們首次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...