Sebuah proyek aplikasi yang baru-baru ini saya kerjakan menggunakan apicloud untuk mencapai pengembangan lintas platform. Sekarang saya perlu menambahkan fungsi membuka kunci isyarat (kisi sembilan persegi) ke aplikasi ini. karena ini asli dan memiliki kinerja yang lebih baik, lebih nyaman untuk memanggilnya, tetapi gayanya tidak dapat diubah, jadi saya berencana untuk mengimplementasikan fungsi ini sendiri. Artikel ini akan mengatur dan berbagi proses implementasinya. Saya harap mereka yang membutuhkan dapat memahaminya. Kode bersama hanya mengimplementasikan 设置密码功能paling dasar, 解锁功能, fungsi 比较密码, dll. Beberapa fungsi lanjutan seperti: tidak dapat membatasi berapa kali suatu titik dapat dilewati, dan membatasi panjang kata sandi yang ditetapkan oleh pengguna.
Implementasi asli atau metode lain?
1. Gunakan platform Android dan iOS yang sesuai untuk menulis plug-in buka kunci isyarat melalui kode asli. Pengalamannya bagus, tetapi siklus pengembangannya panjang, masalah kompatibilitas setiap platform perlu ditangani, dan metode penulisan plug-in platform APICloud perlu dipelajari. (menyerah)
2. Gunakan kanvas html5 untuk mengimplementasikan. Siklus pengembangannya singkat, tidak perlu terlalu banyak berurusan dengan masalah kompatibilitas, dan pengalamannya bagus. (memilih)
Analisis prinsip Buka kunci dengan isyaratGunakan jari Anda untuk menghubungkan sembilan titik pada layar secara berurutan hingga membentuk suatu pola, sehingga disebut pattern unlocking. Seperti terlihat pada gambar di atas, setiap lingkaran pembuka kunci sebenarnya diikuti dengan sebuah angka. Yang dibandingkan setiap kali bukanlah pola yang digambar oleh pengguna, melainkan rangkaian kata sandi yang terdiri dari angka-angka di bawah lingkaran yang dihubungkan secara seri setiap kali membuka kunci. jari melewati pola tersebut. Intinya, kami Perbandingannya masih berupa kata sandi string, tetapi dari sudut pandang pengguna, ini adalah pola yang digambar. Ingatan akan pola jauh lebih kuat daripada rangkaian angka.
Langkah-langkah implementasi menggambar disk sandiPenggambaran disk kata sandi relatif sederhana. Satu-satunya hal yang perlu Anda perhatikan adalah Anda perlu menggunakan perhitungan dinamis untuk membuat pola positif yang dikelilingi oleh sembilan titik selalu berada di tengah layar perlu mengurangi tinggi bilah status.
var width = $(document).width();var height = $(document).height() - 40; //Kurangi tinggi bilah status ponsel//Kotak sembilan persegi sebenarnya adalah sembilan poin, a objek koordinat 9 titik var lockCicle = { x: 0, //x koordinat y: 0, //y koordinat warna: #999999, status: 1 //status apakah titik saat ini telah dihubungkan}; - tinggi) / 2; //Hitung offset var arr = []; //Koordinat array sembilan titik //Metode menghitung koordinat sembilan titik untuk (var i = 1; i <= 3; i++) { //Setiap baris untuk (var j = 1; j <= 3; j++) { //Setiap var di setiap baris lockCicle = {}; //Layar horizontal if (offset > 0) { lockCicle.x = (tinggi / 4) * j + Math.abs(offset); lockCicle.y = (tinggi / 4) * i; lockCicle.state = 0; //Layar vertikal} else { lockCicle.x = (lebar / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle }}//Metode berfungsi untuk menginisialisasi antarmuka init() { ctx.clearRect(0, 0, width, height); //Hapus kanvas pointerArr = []; //Hapus jalur gambar untuk (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //Hapus status gambar drawPointer(i); }}//Gambar fungsi antarmuka buka kunci sembilan persegi drawPointer(i) { ctx.save(); (hastouch) { radius = lebar / 12; } else { radius = 24; } var _fillStyle = #dd514c; var _strokeStyle = #dd514c; _strokeStyle = #1bd6c5; } //Gambarkan asal ctx.beginPath(); _fillStyle; ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false); ctx.closePath(); .beginPath(); ctx.strokeStyle = _strokeStyle; ctx.lineWidth = 0,3; ctx.lineJoin = bulat; ctx.arc(arr[i].x, arr[i].y, radius, 0, Math.PI * 2, false); .restore();}//Inisialisasi antarmuka init(); Buatlah sebuah koneksi Cara menggambar koneksi var pointerArr = []; //Array koordinat titik-titik garis penghubung var startX, startY; //Titik awal dari garis var put = []; //Array dari sembilan titik yang dilewati var currentPointer; terhubung var pwd = []; //Kata sandi var konfirmasiPwd = []; //Konfirmasi kata sandi var unlockFlag = false; kanvas di**/fungsi drawLinePointer(x, y, bendera) { ctx.clearRect(0, 0, lebar, tinggi); ctx.lineWidth = 5; = bulat; ctx.lineJoin = bulat; untuk (var i = 0; i < pointerArr.length; i++) { jika (i == 0) { ctx.moveTo(pointerArr[i].x, pointerArr[i].y); else { ctx.lineTo(pointerArr[i].x, pointerArr[i].y ); } } ctx.stroke(); ctx.closePath(); arr.length; i++) { drawPointer(i); //Gambarlah lingkaran dan titik asal if (ctx.isPointInPath(x, y) && currentPointer != i) { //Tentukan apakah klik mouse berada di dalam lingkaran pointerArr.push ({ x : arr[i].x, y: arr[i].y }); currentPointer = i; put.push(i + 1); startY = arr[i].y; arr[i].state = 1; } } if (bendera) { ctx.save(); ctx.beginPath(); e2e0e0; ctx.lineWidth = 5; ctx.lineCap = bulat; ctx.moveTo(startX, startY); ctx.lineTo(x, y); ctx.stroke(); Acara yang mengikatProses penyambungan adalah dengan menggabungkan tiga peristiwa sentuh (terminal seluler) untuk mendapatkan koordinat posisi saat ini dan memasukkannya ke dalam array, lalu merender koordinat tersebut ke antarmuka.
// Penulisan acara kompatibel dengan sentuhan seluler var hastouch = ontouchstart di jendela ? true : false, tapstart = hastouch ? touchstart : mousedown, tapmove = hastouch ? addEventListener(tapstart, function(e) { isMouseDown = benar; var x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft; var y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop; ;//Saat bergerak, simpan semua titik koordinat yang dilewati lockCnavs.addEventListener(tapmove, function(e) { if (isMouseDown) { var x1 = hastouch ? e.targetTouches[0].pageX : e.clientY - canvas.offsetTop; x1, y1, benar); }});//Batalkan lockCnavs.addEventListener(tapend, function(e) { drawLinePointer(0, 0, false); isMouseDown = false; pointerArr = []; if (puts.length >= 6) { alert(Kata sandi pola Anda adalah: [ + puts.join( > ) + ] ); if (unlockFlag) { //Buka kunci pembuka() } else { //Setel pengaturan kata sandi buka kunciUnlockPwd(); alert(Pola kata sandi Anda terlalu sederhana~~~); init(); } } puts = [];}); Menerapkan logika membuka kunciMelalui langkah-langkah di atas, data dan efek tampilan setelah setiap gambar Jiugongge dibuka kuncinya. Sekarang Anda hanya perlu menambahkan kode logika yang sesuai di tempat-tempat utama.
Kode terkait
//Setel kata sandi buka kunci dan buka kunci fungsi uji settingUnlockPwd() { if (pwd.length <= 0) { pwd = put; init(); $(header).text(gambar pola buka kunci lagi); konfirmasiPwd.panjang <= 0) { konfirmasiPwd = put; } console.log(pwd + + konfirmasiPwd); //Perhatikan apakah kata sandi dua kali benar jika (pwd.length > 0 && konfirmasiPwd.length > 0) { if (compareArr(pwd, konfirmasiPwd)) { $(header).text(Pola pembuka kunci berhasil digambar); init(); else { $(header).text(Pola pembuka kunci digambar dua kali) tidak konsisten ); init(); konfirmasiPwd = []; } }}//Buka kunci fungsi unlock() { console.log(Buka kunci kata sandi: + put + + konfirmasiPwd); (bandingkanArr(letakkan, konfirmasiPwd)) { $(header).text(Pembukaan berhasil! Lompatan halaman... } else { $(header).text(Pola pembukaan kunci salah!!! init(); }$(footer).click(function() { if ($(this).text() === buka kunci) { unlockFlag = true; init(); $(header).text(gambar pola buka kunci); }});//Bandingkan dua larik (Angka) untuk fungsi kesetaraan bandingkanArr(arr1, arr2) { return arr1.toString() === arr2.toString();}nota bene
Alamat demo online demo lengkap artikel ini
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.