h5 ใช้ Canvas เพื่อปลดล็อกด้วยท่าทาง

โปรเจ็กต์แอปที่ฉันเพิ่งใช้ apicloud เพื่อบรรลุการพัฒนาข้ามแพลตฟอร์ม ตอนนี้ฉันต้องเพิ่มฟังก์ชันการปลดล็อกด้วยท่าทาง (ตารางเก้าตาราง) ให้กับแอปนี้แล้ว เพราะมันเป็นภาษาเนทีฟและมีประสิทธิภาพที่ดีกว่า เรียกมันว่าสะดวกกว่า แต่สไตล์ของมันไม่สามารถแก้ไขได้ ดังนั้นฉันจึงวางแผนที่จะใช้ฟังก์ชันนี้ด้วยตัวเอง บทความนี้จะจัดระเบียบและแบ่งปันขั้นตอนการดำเนินการ ฉันหวังว่าผู้ที่ต้องการจะเข้าใจได้ รหัสที่ใช้ร่วมกันจะใช้เฉพาะ 设置密码功能ผ่านพื้นฐานที่สุด 解锁功能比较密码ฯลฯ ฟังก์ชันขั้นสูงบางอย่าง เช่น: ไม่สามารถจำกัดจำนวนครั้งสูงสุดที่สามารถส่งผ่านจุดได้ และจำกัดความยาวของรหัสผ่านที่ตั้งค่าโดย ผู้ใช้

การใช้งานแบบเนทีฟหรือวิธีการอื่น?

1. ใช้แพลตฟอร์มที่เกี่ยวข้องของ Android และ iOS เพื่อเขียนปลั๊กอินปลดล็อคด้วยท่าทางผ่านโค้ดเนทีฟ ประสบการณ์เป็นสิ่งที่ดี แต่วงจรการพัฒนานั้นยาวนาน จำเป็นต้องจัดการปัญหาความเข้ากันได้ของแต่ละแพลตฟอร์ม และวิธีการเขียนปลั๊กอินแพลตฟอร์ม APICloud จำเป็นต้องได้รับการเรียนรู้ (ยอมแพ้)

2. ใช้ html5 canvas เพื่อนำไปใช้งาน วงจรการพัฒนานั้นสั้น ไม่จำเป็นต้องจัดการกับปัญหาความเข้ากันได้มากเกินไป และประสบการณ์ก็ดี (เลือก)

ใช้นิ้วของคุณเชื่อมต่อจุดเก้าจุดบนหน้าจอตามลำดับเพื่อสร้างรูปแบบ จึงเรียกว่าการปลดล็อครูปแบบ ดังที่แสดงในภาพด้านบน วงกลมปลดล็อคแต่ละวงจะตามด้วยตัวเลขจริงๆ สิ่งที่เปรียบเทียบในแต่ละครั้งไม่ใช่รูปแบบที่ผู้ใช้วาด แต่เป็นสตริงรหัสผ่านที่ประกอบด้วยตัวเลขใต้วงกลมที่เชื่อมต่อกันเป็นอนุกรมทุกครั้งที่ นิ้วผ่านรูปแบบ โดยพื้นฐานแล้วเรา การเปรียบเทียบยังคงเป็นรหัสผ่านสตริง แต่จากมุมมองของผู้ใช้ มันเป็นรูปแบบที่วาด ความทรงจำของรูปแบบนั้นแข็งแกร่งกว่าสตริงตัวเลขมาก

การวาดดิสก์รหัสผ่านนั้นค่อนข้างง่าย สิ่งเดียวที่คุณต้องใส่ใจคือคุณต้องใช้การคำนวณแบบไดนามิกเพื่อสร้างรูปแบบบวกที่ล้อมรอบด้วยจุดเก้าจุดตรงกลางหน้าจอเสมอ จำเป็นต้องลบความสูงของแถบสถานะ

 var width = $(document).width();var height = $(document).height() - 40; //ลบความสูงของแถบสถานะโทรศัพท์มือถือ//ตารางเก้าตารางจริง ๆ แล้วคือเก้าจุด, a พิกัดวัตถุ 9 คะแนน var lockCicle = { x: 0, //x พิกัด y: 0, // พิกัดสี: #999999, สถานะ: 1 //สถานะว่าจุดปัจจุบันได้รับการเชื่อมโยงแล้ว}; - ความสูง) / 2; // คำนวณออฟเซ็ต var arr = []; // พิกัดอาร์เรย์ของเก้าจุด // วิธีการคำนวณพิกัดของเก้าจุดสำหรับ (var i = 1; i <= 3; i ++) { // แต่ละแถวสำหรับ (var j = 1; j <= 3; j++) { // แต่ละ var ในแต่ละแถว lockCicle = {}; // หน้าจอแนวนอนถ้า (offset > 0) { lockCicle.x = (height / 4) * j + Math.abs(offset); lockCicle.y = (ความสูง / 4) * i; lockCicle.state = 0; // หน้าจอแนวตั้ง} อื่น ๆ { lockCicle.x = (ความกว้าง / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle); }}//ฟังก์ชันเมธอดเพื่อเริ่มต้นอินเทอร์เฟซ init() { ctx.clearRect(0, 0, width, height); //ล้าง canvas pointerArr = []; //ล้างพาธการวาดสำหรับ (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //ล้างสถานะการวาด DrawPointer(i); }}//วาดฟังก์ชันปลดล็อคเก้าช่อง DrawPointer(i) { ctx.save(); var radius = 0; (hastouch) { รัศมี = ความกว้าง / 12; } อื่น ๆ { รัศมี = 24; } var _fillStyle = #dd514c; var _ strokeStyle = #dd514c; // สถานะที่แตกต่างกันแสดงสีที่แตกต่างกันถ้า (arr [i] .state == 1) _ strokeStyle = #1bd6c5; } //วาดต้นกำเนิด ctx.beginPath(); ctx.fillStyle = _fillStyle; ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false); ctx.closePath(); .beginPath(); ctx.lineCap = _จังหวะสไตล์; ctx.lineJoin = รอบ; ctx.arc(arr[i].x, arr[i].y, รัศมี, 0, Math.PI * 2, false); ctx.closePath(); .restore();}//อินเทอร์เฟซการเริ่มต้น init();

 var pointerArr = []; // อาร์เรย์ของจุดเชื่อมต่อ var startX, startY; // จุดเริ่มต้นของบรรทัด var ทำให้ = []; // อาร์เรย์ของเก้าจุดที่ผ่าน var currentPointer; เชื่อมต่อ var pwd = []; // รหัสผ่าน var ยืนยัน Pwd = []; // ยืนยันรหัสผ่าน var UnlockFlag = false; // ตั้งค่าสถานะว่าจะปลดล็อคหรือไม่/** วิธีการวาดเส้นลิงค์, วาดจุดในอาร์เรย์พิกัดบน แคนวาสใน**/function DrawLinePointer(x, y, ธง) { ctx.clearRect(0, 0, ความกว้าง, ความสูง); ctx.beginPath(); ctx. strokeStyle = #1bd6c5; = รอบ; ctx.lineJoin = รอบ; สำหรับ (var i = 0; i < pointerArr.length; i++) { if (i == 0) { ctx.moveTo(pointerArr[i].x, pointerArr[i].y); } อื่น ๆ { ctx.lineTo(pointerArr[i].x, pointerArr[i].y } } ctx.จังหวะ(); ctx.closePath(); ctx.restore(); สำหรับ (var i = 0; i < arr.length; i++) { DrawPointer(i); //วาดวงกลมและจุดกำเนิด if (ctx.isPointInPath(x, y) && currentPointer != i) { //ตรวจสอบว่าการคลิกเมาส์อยู่ในวงกลม pointerArr.push หรือไม่ ({ x : arr[i].x, y: arr[i].y }); currentPointer = i; puts.push(i + 1); startX = arr[i].x; startY = arr [i] .y; arr [i] .state = 1; } } ถ้า (ตั้งค่าสถานะ) { ctx.save (); ctx.globalCompositeOperation = ปลายทาง e2e0e0; ctx.lineWidth = 5; ctx.lineCap = รอบ; ctx.moveTo(startX, startY); ctx.lineTo(x, y); ctx.beginPath();

กระบวนการเชื่อมต่อคือการรวมเหตุการณ์การสัมผัส (เทอร์มินัลมือถือ) สามครั้งเพื่อรับพิกัดของตำแหน่งปัจจุบันและใส่ไว้ในอาร์เรย์ จากนั้นแสดงพิกัดเหล่านี้ไปยังอินเทอร์เฟซ

• touchstart (mousedown) ตั้งค่า isMouseDown=true เมื่อกดนิ้ว (เมาส์) บันทึกพิกัดของจุดลงในอาร์เรย์เส้น และวาดจุดในอาร์เรย์
• touchmove (mousemove) เมื่อ isMouseDown=true จุดพิกัดทั้งหมดระหว่างการเคลื่อนไหวของนิ้ว (เมาส์) จะถูกบันทึกลงในอาร์เรย์ภาวะซึมเศร้า และจุดในอาร์เรย์จะถูกวาด
• mouseup (mouseup) ตั้งค่า isMouseDown=fasle เมื่อปล่อยนิ้ว (เมาส์) วาดจุดทั้งหมดในอาร์เรย์ ล้างอาร์เรย์ pointerArr แล้วเปรียบเทียบจำนวนจุดที่เชื่อมต่อหากน้อยกว่า 6 (โดยปกติจะตั้งค่าด้วยตัวเอง รหัสผ่านมีมากกว่า 6 หลัก) ให้พรอมต์ว่ารหัสผ่านมีความยาวไม่เพียงพอ ล้างอาร์เรย์ put และเรียกเมธอด init อีกครั้งเพื่อเริ่มต้นอินเทอร์เฟซ หากมากกว่าหรือเท่ากับ 6 รหัสผ่านจะถูกตั้งค่า ประสบความสำเร็จ

 // การเขียนเหตุการณ์ที่เข้ากันได้กับระบบสัมผัสมือถือ var hastouch = ontouchstart ในหน้าต่าง ? true : false, tapstart = hastouch ? touchstart : mousedown, tapmove = hastouch ? touchmove : mousemove, tapend = hastouch ? // ผูกกดเหตุการณ์ lockCnavs addEventListener (tapstart, function (e) { isMouseDown = true; var x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft; var y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop; DrawLinePointer(x1, y1, จริง);}) ;//เมื่อเคลื่อนที่ ให้บันทึกจุดพิกัดทั้งหมดที่ส่งผ่านโดย 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 - canvas.offsetTop; x1, y1, จริง); }}); // ยกเลิก lockCnavs.addEventListener (tapend, function(e) { DrawLinePointer(0, 0, false); isMouseDown = false; pointerArr = []; if (puts.length >= 6) { การแจ้งเตือน(รหัสผ่านรูปแบบของคุณคือ: [ + puts.join( > ) + ] ); if (unlockFlag) { //ปลดล็อคปลดล็อค(); } else { //ตั้งค่ารหัสผ่านปลดล็อคUnlockPwd(); } } else { if (puts.length >= 1) { alert(รหัสผ่านรูปแบบของคุณง่ายเกินไป~~~); init(); } } puts = [];});

จากขั้นตอนข้างต้น ข้อมูลและเอฟเฟกต์การแสดงผลหลังจากแต่ละภาพวาดของ Jiugongge จะถูกปลดล็อค ตอนนี้คุณเพียงแต่ต้องเพิ่มโค้ดตรรกะที่เกี่ยวข้องในตำแหน่งสำคัญ ที่นี่เราจะแนะนำตรรกะการใช้งานโดยไม่ต้องห่อหุ้มโค้ดเป็นหลัก

รหัสที่เกี่ยวข้อง

 //ตั้งรหัสผ่านปลดล็อคและตั้งค่าฟังก์ชั่นทดสอบUnlockPwd() { if (pwd.length <= 0) { pwd = put; init(); $(header).text(วาดรูปแบบการปลดล็อคอีกครั้ง); ConfirmPwd. length <= 0) { ConfirmPwd = puts; } console.log(pwd + + cancelPwd); // โปรดทราบว่ารหัสผ่านถูกต้องสองครั้งหรือไม่หาก (pwd.length > 0 && ConfirmPwd.length > 0) { if (compareArr(pwd, ยืนยัน Pwd)) { $(header).text(การปลดล็อครูปแบบที่วาดสำเร็จ); init(); } else { $(header).text(การปลดล็อครูปแบบที่วาดสองครั้ง) ไม่สอดคล้องกัน ); init(); ยืนยัน Pwd = [] }}//ปลดล็อกฟังก์ชัน () { console.log(ปลดล็อกรหัสผ่าน: + ใส่ + + ยืนยัน Pwd); (compareArr(puts, cancelPwd)) { $(header).text(การปลดล็อคสำเร็จ! การกระโดดหน้า...); } else { $(header).text(รูปแบบการปลดล็อคไม่ถูกต้อง!!!); }$(footer).click(function() { if ($(this).text() === Unlock) { UnlockFlag = true; init(); $(header).text(วาดรูปแบบการปลดล็อค); }});//เปรียบเทียบสองอาร์เรย์ (หมายเลข) สำหรับฟังก์ชันความเท่าเทียมกัน comparisonArr(arr1, arr2) { return arr1.toString() === arr2.toString();}

คำลงท้าย

ที่อยู่สาธิตออนไลน์สาธิตที่สมบูรณ์ของบทความนี้

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network