私が最近取り組んだアプリ プロジェクトでは、クロスプラットフォーム開発を実現するために apicloud を使用しました。今度は、このアプリにジェスチャー (9 マスのグリッド) ロック解除機能を追加する必要があります。apicloud には、すでにいくつかのサードパーティ製のネイティブ実装されたジェスチャー ロック解除プラグインがあります。ネイティブであり、パフォーマンスが優れているため、呼び出したほうが便利ですが、スタイルは変更できないため、この関数を自分で実装する予定です。この記事では実装プロセスを整理して共有しますので、必要な方にご理解いただければ幸いです。共有コードには、最も基本的な设置密码功能、 解锁功能、 比较密码機能などのみが実装されています。 一部の高度な機能（ポイント通過の最大回数を制限することはできません）や、パスワードで設定されるパスワードの長さを制限することはできません。ユーザー。
ネイティブ実装または他の方法?
1. Android および iOS の対応するプラットフォームを使用して、ネイティブ コードを通じてジェスチャ ロック解除プラグインを作成します。エクスペリエンスは良いですが、開発サイクルが長く、各プラットフォームの互換性の問題に対処する必要があり、APICloud プラットフォームのプラグインの作成方法を学ぶ必要があります。 （あきらめる）
2. html5 キャンバスを使用して実装します。開発サイクルは短く、互換性の問題にあまり対処する必要がなく、エクスペリエンスも良好です。 （選ぶ）
原理分析ジェスチャーによるロック解除指を使って画面上の 9 つの点を順番に結んでパターンを形成するため、パターンのロック解除と呼ばれます。上の図に示すように、実際には各ロック解除サークルの後に数字が付いています。毎回比較されるのは、ユーザーが描いたパターンではなく、毎回連続して接続されるサークルの下の数字で構成されるパスワード文字列です。本質的には、比較対象は文字列パスワードですが、ユーザーの観点から見ると、これは描画されたパターンです。パターンの記憶は、数字の文字列よりもはるかに強力です。
実装手順暗号ディスクを描画するパスワード ディスクの描画は比較的単純ですが、携帯電話では、動的計算を使用して常に 9 つの点で囲まれた正のパターンを作成する必要があることだけが必要です。ステータスバーの高さを差し引く必要があります。
var width = $(document).width();var height = $(document).height() - 40; //携帯電話のステータス バーの高さを減算します//9 正方形のグリッドは実際には 9 つの点です。 9 点の座標オブジェクト var lockCicle = { x: 0, //x 座標 y: 0, //y 座標色: #999999, state: 1 // 現在の点がリンクされているかどうかのステータス var offset = (width - 身長） / 2; //オフセットを計算する var arr = []; //9 点の座標配列 //(var i = 1; i <= 3; i++) の 9 点の座標を計算する方法 { //(var の各行) j = 1; j <= 3; j++) { //各行の各変数 lockCicle = {}; //水平画面 if (offset > 0) { lockCicle.x = (height / 4) Math.abs(offset); lockCicle.y = (高さ / 4) * i; lockCicle.state = 0; // 垂直画面} else { lockCicle.x = (幅 / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle) }}//インターフェースを初期化するメソッド関数init() { ctx.clearRect(0, 0, width, height); //キャンバスポインターをクリアArr = [] //(var i = 0; i < arr.length; i++) { arr の描画パスをクリアします。 [i ].state = 0; //描画状態をクリアします。drawPointer(i) }}//9 マスのロック解除インターフェイス関数を描画します。 (hastouch) { radius = width / 12; } else { radius = 24; } var _fillStyle = #dd514c; // 異なる状態は異なる色を表示します if (arr[i].state == 1) _ストロークスタイル = #1bd6c5; } //原点を描画 ctx.beginPath(); _fillStyle; ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false); // 円を描画します ctx .beginPath(); ctx.ストロークスタイル = ctx.lineWidth = 0.3; ctx.lineJoin = ラウンド; ctx.arc(arr[i].x, arr[i].y, 半径, 0, Math.PI * 2, false); .restore();}//初期化インターフェース init();つながりを描く繋がりの描き方 var pointerArr = []; //接続ライン点の座標配列 var startX, startY //パスされた 9 つの点の配列 var currentPointer; Connected var pwd = []; //パスワード varconfirmPwd = []; //パスワードを確認する varunlockFlag = false; //ロックを解除するかどうかを示すフラグ/** ** リンクの線を描画するメソッド。キャンバスイン**/関数drawLinePointer(x, y, flag) { ctx.clearRect(0, width, height); ctx.beginPath(); ctx.lineWidth = 5; = ラウンド; ctx.lineJoin = ラウンド; for (var i = 0; i < pointerArr.length; i++) { if (i == 0) { ctx.moveTo(pointerArr[i].x, pointerArr[i].y); } else { ctx.lineTo(pointerArr[i].x, pointerArr[i].y) ctx.ストローク(); ctx.restore(); (var i = 0; arr.length; i++) {drawPointer(i); //円と原点を描画 if (ctx.isPointInPath(x, y) && currentPointer != i) { //マウスクリックが円内にあるかどうかを判定します pointerArr.push ({ x : arr[i].x, y: arr[i].y }); currentPointer = i; putX = arr[i].x; startY = arr[i].state = 1; } } if (フラグ) { ctx.globalCompositeOperation = destination-over; e2e0e0; ctx.lineWidth = 5; ctx.lineJoin = ラウンド; ctx.moveTo(startX, startY); ctx.beginPath();結合イベント接続のプロセスでは、3 つのタッチ (モバイル端末) イベントを組み合わせて現在位置の座標を取得して配列に入れ、これらの座標をインターフェイスにレンダリングします。
//ウィンドウ内のモバイルタッチと互換性のあるイベントの書き込み var hastouch = ontouchstart ? true : false, Tapstart = hastouch ? touchstart : Mousedown, Tapmove = hastouch? // プレスイベント lockCnavs をバインドします。 addEventListener(tapstart, function(e) { isMouseDown = true; var x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - Canvas.offsetLeft; e.targetTouches[0].pageY : e.clientY -drawLinePointer(x1, y1, true);}) ;//移動時、lockCnavs.addEventListener(tapmove, function(e) { if (isMouseDown) { var x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - Canvas.offsetLeft; var y1 = hastouch ? e.targetTouches[0].pageY : e.clientY -drawLinePointer( x1, y1, true); }});//ロックCnavs.addEventListener(tapend, function(e) {drawLinePointer(0, 0, false); isMouseDown = false; pointerArr = []; if (puts.length >= 6) {alert(パターンのパスワードは次のとおりです: [ + puts.join( > ) + ] ); if (unlockFlag) { //ロック解除unlock(); } else { //ロック解除パスワードを設定します setUnlockPwd() } else { if (puts.length >= 1);アラート(パターンのパスワードが単純すぎます~~~); init() } } put = [];};ロック解除ロジックの実装上記の手順により、九公歌の各描画後のデータと表示効果がロック解除されます。ここでは、コードをカプセル化せずに、対応するロジック コードを追加するだけで済みます。
関連コード
//ロック解除パスワードを設定し、ロック解除テスト関数を設定します。 confirmPwd.length <= 0) {confirmPwd = put } console.log(pwd + +confirmPwd) // パスワードが正しいかどうかを確認します if (pwd.length > 0 &&) confirmPwd.length > 0) { if (compareArr(pwd,confirmPwd)) { $(header).text(正常に描画されたロック解除パターン) init(); } else { $(header).text(2 回描画されたロック解除パターン) 矛盾しています); init();confirmPwd = []; } }}//ロック解除関数unlock() { console.log(ロック解除パスワード: + put + +confirmPwd); (compareArr(puts,confirmPwd)) { $(header).text(ロック解除成功! ページジャンプ...) } else { $(header).text(ロック解除パターンが間違っています!!!); } }$(フッター).click(function() { if ($(this).text() === ロック解除) {unlockFlag = true; init(); $(header).text(ロック解除パターンを描画); }});//等価性について 2 つの配列 (数値) を比較します。 function CompareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}追記
この記事の完全なデモ オンライン デモのアドレス
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。