استخدم مشروع تطبيق عملت عليه مؤخرًا apicloud لتحقيق تطوير عبر الأنظمة الأساسية. الآن أحتاج إلى إضافة وظيفة إلغاء قفل الإيماءات (شبكة ذات تسعة مربعات) إلى هذا التطبيق، ويحتوي apicloud بالفعل على بعض المكونات الإضافية لإلغاء قفل الإيماءات التي تم تنفيذها محليًا. نظرًا لأنها أصلية ولها أداء أفضل، فمن الملائم أكثر الاتصال بها، ولكن لا يمكن تعديل أنماطها، لذلك أخطط لتنفيذ هذه الوظيفة بنفسي. ستقوم هذه المقالة بتنظيم ومشاركة عملية التنفيذ وآمل أن يتمكن من يحتاجها من فهمها. ينفذ الكود المشترك فقط 设置密码功能الأساسية، 解锁功能، ووظائف 比较密码، وما إلى ذلك. بعض الوظائف المتقدمة مثل: لا يمكن تحديد الحد الأقصى لعدد المرات التي يمكن فيها تمرير نقطة ما، والحد من طول كلمة المرور التي يحددها مستخدم.
التنفيذ الأصلي أو طرق أخرى؟
1. استخدم الأنظمة الأساسية المقابلة لنظامي التشغيل Android وiOS لكتابة المكون الإضافي لفتح قفل الإيماءات من خلال الكود الأصلي. التجربة جيدة، لكن دورة التطوير طويلة، وتحتاج إلى معالجة مشكلات التوافق لكل نظام أساسي، ويجب تعلم طريقة كتابة المكونات الإضافية لمنصة APICloud. (يستسلم)
2. استخدم قماش html5 للتنفيذ. دورة التطوير قصيرة، ليست هناك حاجة للتعامل مع مشكلات التوافق كثيرًا، والتجربة جيدة. (يختار)
تحليل المبدأ فتح لفتةاستخدم أصابعك لتوصيل تسع نقاط على الشاشة بالتسلسل لتكوين نمط، وهذا ما يسمى فتح النمط. كما هو موضح في الصورة أعلاه، فإن كل دائرة فتح يتبعها في الواقع رقم ما تتم مقارنته في كل مرة ليس النمط الذي رسمه المستخدم، ولكن سلسلة كلمة المرور المكونة من الأرقام الموجودة أسفل الدوائر المتصلة في سلسلة في كل مرة. في جوهر الأمر، لا تزال المقارنة هي كلمة مرور السلسلة، ولكنها من وجهة نظر المستخدم عبارة عن نمط مرسوم. ذاكرة الأنماط أقوى بكثير من سلاسل الأرقام.
خطوات التنفيذ رسم قرص التشفيريعد رسم قرص كلمة المرور أمرًا بسيطًا نسبيًا، والشيء الوحيد الذي يجب عليك الانتباه إليه هو أنك تحتاج إلى استخدام الحساب الديناميكي لإنشاء النمط الإيجابي المحاط بتسع نقاط دائمًا في منتصف الشاشة تحتاج إلى طرح ارتفاع شريط الحالة.
var width = $(document).width();var height = $(document).height() - 40; // اطرح ارتفاع شريط حالة الهاتف المحمول // الشبكة المكونة من تسعة مربعات هي في الواقع تسع نقاط، أ كائن إحداثي مكون من 9 نقاط var lockCicle = { x: 0, //x إحداثي y: 0, //y لون الإحداثي: #999999, الحالة: 1 // الحالة ما إذا كانت النقطة الحالية مرتبطة} var offset = (width - ارتفاع) / 2; // حساب الإزاحة var arr = []; // مجموعة إحداثيات من تسع نقاط // طريقة لحساب إحداثيات تسع نقاط for (var i = 1; i <= 3; i++) { // كل صف لـ (var) j = 1; j <= 3; j++) { // كل فار في كل صف lockCicle = {}; // شاشة أفقية if (offset > 0) { lockCicle.x = (height / 4) * j + Math.abs(offset); lockCicle.y = (height / 4) * i; lockCicle.state = 0; // شاشة عمودية} else { lockCicle.x = (width / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle); init() { ctx.clearRect(0, 0, width, height); // امسح مؤشر اللوحة القماشية = []; // امسح مسار الرسم for (var i = 0; i < arr.length; i++) { arr [i ].state = 0; // امسح حالة الرسم drawPointer(i); }}// ارسم واجهة إلغاء القفل ذات المربعات التسعة function drawPointer(i) { ctx.save(); (hastouch) { radius = width / 12; } else { radius = 24 } var _fillStyle = #dd514c var _strokeStyle = #dd514c; // تعرض الحالات المختلفة ألوانًا مختلفة if (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.strokeStyle = _strokeStyle; ctx.lineWidth = 0.3; ctx.lineJoin = round; ctx.arc(arr[i].x, arr[i].y, radius, 0, Math.PI * 2, false); ctx.ClosePath(); .restore();}// واجهة التهيئة init(); ارسم اتصالاً كيفية رسم اتصال var pointerArr = []; // مجموعة إحداثيات من نقاط الخط المتصلة var startX, startY; // نقطة بداية السطر var puts = []; // صفيف من تسع نقاط تم تمريرها varcurrentPointer; متصل var pwd = []; // كلمة المرور var ConfirmPwd = []; // تأكيد كلمة المرور var unlockFlag = false; // تحديد ما إذا كان سيتم إلغاء القفل/** ** طريقة رسم خطوط الارتباط ورسم النقاط في مصفوفة الإحداثيات قماش في **/function drawLinePointer(x, y, flag) { ctx.clearRect(0, 0, width, height(); ctx.beginPath(); ctx.strokeStyle = #1bd6c5; = round; ctx.lineJoin = round; i++) { if (i == 0) { ctx.moveTo(pointerArr[i].x, pointerArr[i].y); } else { ctx.lineTo(pointerArr[i].x, pointerArr[i].y); } } ctx.stroke(); ctx. ClosePath(); ctx.restore(); arr.length; i++) { drawPointer(i); // ارسم الدائرة والأصل if (ctx.isPointInPath(x, y) &¤tPointer != i) { // تحديد ما إذا كانت نقرة الماوس موجودة في الدائرة pointerArr.push ({ x : arr[i].x, y: arr[i].y }); puts.push(i + 1); startY = arr[i].y; arr[i].state = 1; } } if (flag) { ctx.beginPath(); ctx.lineWidth = 5; ctx.lineCap = round; ctx.moveTo(startX, startY); ctx.restore(); حدث ملزمتتمثل عملية الاتصال في الجمع بين ثلاثة أحداث تعمل باللمس (محطة متنقلة) للحصول على إحداثيات الموقع الحالي ووضعها في مصفوفة، ثم عرض هذه الإحداثيات على الواجهة.
// كتابة الأحداث متوافقة مع اللمس المحمول var hastouch = ontouchstart in window ? true : false, Tapstart = hastouch ? touchstart : mousedown, Tapmove = touchmove ? mousemove, tapeend = hastouch ? touchend : mouseup; 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, 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 - Canvas.offsetTop; x1, y1, true }});// إلغاء lockCnavs.addEventListener(tapend, function(e) { drawLinePointer(0, 0, false); isMouseDown = false; ); if (unlockFlag) { //Unlock unlock(); } else { // تعيين إعداد كلمة مرور إلغاء القفلUnlockPwd(); } else { if (puts.length >= 1) { تنبيه (كلمة المرور الخاصة بك بسيطة جدًا ~~~ init() } } puts = [];}); تنفيذ منطق فتحمن خلال الخطوات المذكورة أعلاه، يتم فتح البيانات وتأثيرات العرض بعد كل رسم لـ Jiugongge. الآن تحتاج فقط إلى إضافة الكود المنطقي المقابل في الأماكن الرئيسية. هنا نقدم بشكل أساسي منطق التنفيذ الخاص به دون تغليف الكود.
الكود ذو الصلة
// تعيين كلمة مرور إلغاء القفل واختبار وظيفة فتح القفل () { if (pwd. length <= 0) { pwd = puts; $(header).text(ارسم نمط إلغاء القفل مرة أخرى)); ConfirmPwd length <= 0) { ConfirmPwd = puts } console.log(pwd + + ConfirmPwd); // لاحظ ما إذا كانت كلمة المرور صحيحة if (pwd.length > 0 && ConfirmPwd.length > 0) { if (compareArr(pwd, ConfirmPwd)) { $(header).text(فتح النمط المرسوم بنجاح init(); } else { $(header).text(فتح النمط المرسوم مرتين) غير متناسق ); init(); ConfirmPwd = []; } }}// فتح وظيفة unlock() { console.log(فتح كلمة المرور: + puts + +firmPwd); (compareArr(puts, ConfirmPwd)) { $(header).text(تم فتح القفل بنجاح! قفز الصفحة...); else { $(header).text(فتح النمط غير صحيح!!! }); }$(footer).click(function() { if ($(this).text() === unlock) { unlockFlag = true; init(); $(header).text(رسم نمط القفل); }});// قارن بين صفيفين (رقم) للمساواة function CompareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}حاشية
عنوان العرض التوضيحي الكامل عبر الإنترنت لهذه المقالة
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.