一、摘要

在微信小程式手勢圖案鎖屏、解鎖實現並提供onSuccess等回撥一文中，用Canvas畫布元件實現了類似Android和Iphone的圖案鎖屏、解鎖功能，除去偶爾卡頓、滑動不連續外，其它都還不錯。但是最近發現一個很嚴重的問題，當觸控很快劃離畫布的時候，Canvas元件沒有觸發touchend事件，本文針對這個問題作簡單討論，可以在一定程度上解決Canvas元件不觸發touchend事件問題。

二、問題具體描述

螢幕截圖

畫布介紹：
width: 300px, height: 300px，為了本文後續部分便於計算，取width: 301px, height: 301px。
9個點，每個點的直徑 = 點之間的距離 = 點與畫布邊距 = 301/7 = 43
劃過的點，實心圓圈直徑 = 每個點的直徑/2 = 21.5
畫布綁定了3個事件：

• touchstart: 手指觸控動作開始（做個標記 touchFlag = true，觸控開始）
• touchmove：手指觸控後移動（繪製觸控點和線條）
• touchend：手指觸控動作結束（觸控結束，重置觸控標記 touchFlag = false，判斷鎖屏密碼是否正確？重置畫布）

操作描述：
左側從上往下滑動，觸控到第三個點後，延著手機螢幕快速向下滑動，直至手指離開畫布，這時悲劇的事情發生了，畫布沒有觸發touchend事件，才會看到截圖所示。理想狀況應該會觸發touchend事件，然後程式會判斷鎖屏密碼是否正確？

三、解決方案

利用touchmove事件，捕捉畫布邊界，一旦捕捉到就人為觸發touchend事件。

1、座標認識

畫布touchmove事件，獲取到的座標點(x,y)是相對於左上角(圖中所示的小紅點)，從左往右，x變大，從上往下，y變大。
捕捉畫布邊界，我們重點關注4個角的座標點，即：左上角，右上角，右下角，左下角，連線這4個點，可以得到圖中所示的紅色小框區域，一旦在touchmove事件中捕捉到當前座標點在紅色小框區域外，即可人為觸發touchend事件。

2、邊界判定

四個角的座標為：
1-(43,43), 2-(258,43), 3-(258,258), 4-(43,258)
假設，touchmove事件中獲取的座標為(x,y)，則只要滿足：
x<43 || y<43 || x>258 || y>258
即可認定超過邊界，人為觸發touchend事件。

3、開篇問題解答

觸控到第三個點後，快速向下滑動直至手指離開畫布，從圖中我們可以看出第三個點到畫布最下邊之間有42的距離，手指劃過這個距離，小程式畫布元件基本上都可以觸發touchmove事件，一旦觸發了touchmove事件，那麼：
touchmove座標點(x,y)，其y肯定大於258，程式會自動人為觸發touchend事件進行圖案密碼驗證，也就不會出現圖中所示的3點連線，螢幕沒其它任何反應的怪事啦。

四、小結

雖然通過本文方法，可以一定程度上解決Canvas元件某些情況下不會觸發touchend事件問題，但是不能杜絕。原因是touchmove事件也不一定會觸發出來，還是以前面提到的圖片為例，真機實驗，第三個點後快速往下滑動直至離開畫布，有幾次touchmove事件沒觸發，導致是否越界無法判定，從而依然會出現文中提到的截圖現象。