微信小程式手勢操作之單觸控點與多觸控點

2023-03-19 00:15:34 字數 1192 閱讀 4478

前言

手勢對於一些效果是比較重要的,在canvas、互動等中應用非常廣,看一下微信小程式手勢是如何的。

demo

為了研究小程式是否支援多手指,需要使用touchstart,touch程式設計客棧move,touchend

// index.wxml

程式設計客棧chendfn" >

touchstartfn: function(event),

touchmovefn: function(event),

touchendfn: function(event)

單觸控點,多觸控點

官方文件:changedtouches

changedtouches 資料格式同 touches。 表示有變化的觸控點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)。

"changedtouches":

真機效果

實現以上demo後模擬器是無法看到多觸控點的資料的,所以你需要真機來測試。

看下真機的log資訊

在changedtouches中按順序儲存觸控點的資料,所以小程式本身支援多觸控點的手勢

結論設想: 既然小程式的手勢是支援多觸控,而且可以獲取到相關的路徑,那麼相關路徑計算也是可行的。

場景: 多觸控互動效果,手指繪製等

觸控點資料儲存

為了能夠來分析觸控點的路徑,最起碼是簡單的手勢,如左滑、右滑、上滑、下滑,我們需要儲存起路徑的所有資料。

觸控事件

觸控觸發事件分為"touchstart", "touchmove", "touchend","touchcancel"四個

詳見:儲存資料

var _wxchanges = ;

var _wxgesturedone = false;

const _wxgesturestatus = ["touchstart", "touchmove", "touchend","touchcancel"];

// 收集路徑

function g(e)

if(!_wxgesturedone)else if(e.type === "touchcancel")

}}結尾

這篇文章,主要探索一下,希望你也可以提前看一下手勢的解析。

本文標題: 微信小程式手勢操作之單觸控點與多觸控點

本文地址:

003 觸控手勢

主要可以通過 設定 觸控板 來檢視學習各種手勢的使用 滑鼠左鍵功能 使用一個手指點選 滑鼠右鍵功能 使用兩個手指點選 滾動螢幕功能 雙指拖移 拖動視窗 將指標拖到視窗頂部,然後三指拖移 顯示桌面 四指分開 開啟 launchpad 四指捏合 啟用 missing control 任務控制 四指上推 ...

微信小程式 手勢鎖詳解

constructor page,opts 啟動手勢鎖初始化 this.init init this ctx wx.createcanvascontext this canvasid,this 初始化中心座標陣列 this location 初始化繪製圖形圓 this drawpo 初始化繫結事件 ...

iOS 觸控事件與手勢

響應者通過複寫以下方法,可以監聽觸控事件 當一個或多個手指觸碰螢幕時 開始 void touchesbegan nsset touches withevent uievent event 當一個或多個手指在螢幕上移動時 移動 void touchesmoved nsset touches withe...

JS 觸控與手勢事件

觸控事件 包含 ios 2.0 軟體的 iphone 3g 釋出時,也包含了一個新版本的 safari 瀏覽器。這款新的移動 safari提供了一些與觸控 touch 操作相關的新事件。後來,android 上的瀏覽器也實現了相同的事件。觸控事件會在使用者手指放在螢幕上面時 在螢幕上滑動時或從螢幕上...