h5 использует холст для разблокировки жестами

Проект приложения, над которым я недавно работал, использовал apicloud для обеспечения кросс-платформенной разработки. Теперь мне нужно добавить функцию разблокировки жестов (сетка из девяти квадратов) в это приложение. apicloud уже имеет некоторые сторонние встроенные плагины разблокировки жестов. потому что она нативная и имеет лучшую производительность, ну их удобнее вызывать, но их стили нельзя модифицировать, поэтому я планирую реализовать эту функцию самостоятельно. В этой статье будет организован и описан процесс реализации. Надеюсь, те, кому это нужно, смогут это понять. Общий код реализует только самые основные 设置密码功能, 解锁功能, функции 比较密码и т. д. Некоторые расширенные функции, такие как: невозможно ограничить максимальное количество раз, которое можно пройти через точку, и ограничить длину пароля, установленного пользователь.

Собственная реализация или другие методы?

1. Используйте соответствующие платформы Android и iOS, чтобы написать плагин разблокировки жестами через собственный код. Опыт хороший, но цикл разработки длинный, нужно решать вопросы совместимости каждой платформы и изучать метод написания плагина платформы APICloud. (сдаться)

2. Для реализации используйте холст HTML5. Цикл разработки короткий, вопросами совместимости особо заниматься не приходится, опыт хороший. (выбирать)

Пальцами последовательно соедините девять точек на экране, чтобы сформировать рисунок, поэтому это называется разблокировкой рисунка. Как показано на рисунке выше, за каждым кружком разблокировки фактически следует номер. Каждый раз сравнивается не шаблон, нарисованный пользователем, а строка пароля, состоящая из цифр под кружками, которые каждый раз соединяются последовательно. палец проходит через шаблон. По сути, мы Сравнение по-прежнему представляет собой строку пароля, но с точки зрения пользователя это нарисованный шаблон. Память на шаблоны гораздо сильнее, чем на цепочки чисел.

Нарисовать диск с паролем относительно просто. Единственное, на что вам нужно обратить внимание, это то, что вам нужно использовать динамический расчет, чтобы положительный узор, окруженный девятью точками, всегда находился в центре экрана. На мобильных телефонах это также необходимо. вычесть высоту строки состояния.

 var width = $(document).width();var height = $(document).height() - 40 //Вычитаем высоту строки состояния мобильного телефона //Сетка из девяти квадратов на самом деле состоит из девяти точек; координатный объект девяти точек var lockCicle = { x: 0, // координата x y: 0, // цвет координаты y: #999999, состояние: 1 // статус, была ли связана текущая точка var offset = (; ширина - высота)/ 2; //Вычисляем смещение var arr = []; //Массив координат из девяти точек //Метод расчета координат девяти точек for (var i = 1; i <= 3; i++) { //Каждая строка for (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; lockCicle.y = (width); / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle }}//Функция метода для инициализации интерфейса init() { ctx.clearRect(0, 0, width, height); //Очищаем указатель холстаArr = []; //Очищаем путь рисования for (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //Очистить состояние рисования drawPointer(i); }}//Нарисовать интерфейс разблокировки сетки из девяти клеток drawPointer(i) { var radius = 0; (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.fill(); ctx.closePath(); //Рисуем круг ctx; .beginPath(); ctx.strokeStyle = _strokeStyle; ctx.lineWidth = 0,3; ctx.lineCap = round; 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 = []; // Массив из девяти проходящих точек var currentPointer; // Была ли текущая точка подключена var pwd = []; //Пароль var submitPwd = []; //Подтверждение пароля var unlockFlag = false; //Флажок, следует ли разблокировать/** ** Метод рисования линий связи, рисования точек в массиве координат на холсте в**/функция drawLinePointer(x, y, flag) { ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle = #1bd6c5; ctx.lineWidth = 5; = круглый; ctx.lineJoin = круглый для (вар я = 0; я <pointerArr.length; 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(); для (вар я = 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; puts.push(i + 1); startX = arr[i].x; startY = arr[i].state = 1; } } if (flag) { ctx.beginPath(); ctx.globalCompositeOperation = Destination-over; e2e0e0; ctx.lineWidth = 5; ctx.lineCap = круглый; ctx.moveTo(startX, startY); ctx.lineTo(x, y); ctx.stroke(); ctx.beginPath(); ctx.restore();

Процесс подключения заключается в объединении трех событий касания (мобильного терминала) для получения координат текущей позиции и помещения их в массив, а затем рендеринга этих координат в интерфейс.

• touchstart (mousedown) Установите isMouseDown=true при нажатии пальца (мыши), сохраните координаты точки в массиве линий и нарисуйте точки в массиве.
• touchmove (mousemove) Когда isMouseDown=true, все точки координат при движении пальца (мыши) сохраняются в массив нажатия, и точки в массиве отрисовываются.
• mouseup (mouseup) Установите isMouseDown=fasle, когда палец (мышь) отпущен. Нарисуйте все точки в массиве, очистите массив pointerArr, а затем сравните количество подключенных точек, если оно меньше 6 (обычно устанавливается самостоятельно). пароль больше 6 цифр) Выдайте подсказку, что длины пароля недостаточно, очистите массив puts и повторно вызовите метод init для инициализации интерфейса. Если оно больше или равно 6, пароль установлен. успешно.

 //Метод записи событий, совместимый с мобильным сенсорным управлением var hastouch = ontouchstart в окне ? true : false, Tapstart = hastouch ? Touchstart : mousedown, Tapmove = Hastouch ? TouchMove : mousemove, Tapend = Hastouch ? Touchend : mouseup; // Привязать событие нажатия 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, 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; pointerArr = []; if (puts.length >= 6) { alert(ваш пароль: [ + puts.join( > ) + ] ); if (unlockFlag) { //Разблокировать разблокировку(); } else { //Установить пароль разблокировки SettingUnlockPwd(); } } else { if (puts.length >= 1) { alert(ваш шаблонный пароль слишком прост~~~ init() } } puts = [];});

Благодаря вышеуказанным шагам данные и эффекты отображения после каждого рисунка Jiugongge разблокируются. Теперь вам нужно только добавить соответствующий логический код в ключевых местах. Здесь мы в основном представляем логику его реализации без инкапсуляции кода.

Связанный код

 //Устанавливаем пароль разблокировки и тестируем функцию SettingUnlockPwd() { if (pwd.length <= 0) { pwd = puts; $(header).text(снова рисуем шаблон разблокировки); submitPwd. length <= 0) { submitPwd = puts; } console.log(pwd + + submitPwd //Отметьте, правильный ли пароль дважды, если (pwd.length > 0 &&); submitPwd.length > 0) { if (compareArr(pwd, submitPwd)) { $(header).text(Шаблон разблокировки нарисован успешно init(); } else { $(header).text(Шаблон разблокировки нарисован дважды несогласованно) ; init(); submitPwd = []; } }} // Разблокировка функции unlock() { console.log(Пароль разблокировки: + puts + + if); (compareArr(puts, submitPwd)) { $(header).text(Разблокировка прошла успешно! Переход страницы... } else { $(header).text(Шаблон разблокировки неверен!!! init(); }$(footer).click(function() { if ($(this).text() === unlock) { unlockFlag = true; init(); $(header).text(нарисовать шаблон разблокировки); }});//Сравниваем два массива (Number) на предмет равенства function CompareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}

постскриптум

Полный демонстрационный онлайн-адрес этой статьи.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.