Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "html5 how to achieve gesture unlocking". The content is detailed, the steps are clear, and the details are handled properly. I hope this "html5 how to achieve gesture unlocking" article can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

Native implementation or other implementation?

1. Use the platforms corresponding to android and ios to write gesture unlocking plug-ins through native code. The experience is good, but the development cycle is long, need to deal with the compatibility of various platforms, and need to learn the apicloud platform plug-in writing method. (abandon)

2. Use html5's canvas canvas to implement. Short development cycle, do not need to deal with too many compatibility issues, good experience. (select)

Principle analysis

Gesture unlock

Nine dots on the screen are connected by fingers to form a pattern, so it is called pattern unlocking. Such as the figure above, behind each unlock circle is actually a number, each time the comparison is not the pattern drawn by the user, but the password string composed of the numbers under the circle connected every time the fingers pass through the pattern. In essence, we compare the password of the string, but from the user's point of view is the drawn pattern. The memory of patterns is much stronger than that of numeric strings.

Implementation steps

Draw password disk

The drawing of the password disk is relatively simple, the only thing to pay attention to is that the positive way surrounded by nine points is always in the middle of the screen through dynamic calculation, and the height of the status bar needs to be subtracted from the mobile phone.

Var width = $(document). Width (); var height = $(document). Height ()-40; / / minus the height of the phone's status bar / / the nine-point grid is actually nine points, the coordinate object var lockCicle = {x: 0, / x coordinates y: 0, / y coordinates color: "# 999999", state: "1" / status whether the current point has been linked} Var offset = (width-height) / 2; / / calculate offset var arr = []; / / coordinate array of nine points / / method of calculating nine point coordinates for (var I = 1; I = 6) {alert ("your pattern password is: [" + puts.join (">") + "]"); if (unlockFlag) {/ / unlock unlock () } else {/ / set the unlock password settingUnlockPwd ();}} else {if (puts.length > = 1) {alert ("your pattern password is too simple ~ ~"); init ();}} puts = [];})

Implement unlocking logic

Through the operation of the above steps, the data and display effect after each drawing are unlocked. Now we only need to add the corresponding logic code in the key places. Here we mainly introduce its implementation logic and do not encapsulate the code.

Related code

/ set unlock password and unlock test function settingUnlockPwd () {if (pwd.length 0) {if (compareArr (pwd, confirmPwd)) {$("header"). Text ("unlock pattern drawn successfully"); init ();} else {$("header") .text ("the unlock pattern drawn is inconsistent"); init () ConfirmPwd = [];} / / unlock function unlock () {console.log ("unlock password:" + puts + "" + confirmPwd); if (compareArr (puts, confirmPwd)) {$("header"). Text ("unlocked successfully! The page is jumping. ");} else {$(" header "). Text (" unlocking pattern is incorrect! ") ; init ();} $("footer") .click (function () {if ($(this). Text () = = "unlock") {unlockFlag = true; init (); $("header"). Text ("draw unlock pattern");}}); / / compare whether two arrays (Number) are equal function compareArr (arr1, arr2) {return arr1.toString () = arr2.toString () } after reading this, the article "how to realize gesture unlocking in html5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.