Shulou(Shulou.com)05/31 Report--

This article mainly explains "how WeChat Mini Programs realizes the function of gesture pattern locking screen". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. let's study and learn "how WeChat Mini Programs realizes the function of gesture pattern locking screen".

Effect picture

WXML

Reset password {{title}}

JS

Var Locker = class {constructor (page,opt) {var obj = opt | | {}; this.page = page; this.width = obj.width | | 300; this.height = obj.height | | 300; this.canvasId = obj.id | | 'canvas'; this.cleColor = obj.cleColor | |' # CFE6FF'; this.cleCenterColor = obj.cleCenterColor | |'# CFE6FF'; var chooseType = obj.chooseType | | 3 / / determine whether there is a chooseType cache and use the cache whenever possible. If not, use the passed value this.chooseType = Number (wx.getStorageSync ('chooseType')) | | chooseType; this.init ();} init () {this.pswObj = wx.getStorageSync (' passwordxx')? {step: 2, spassword: JSON.parse (wx.getStorageSync ('passwordxx'))}: {}; this.makeState () / / create canvas drawing context (specify canvasId) this.ctx = wx.createCanvasContext (this.canvasId,this); this.touchFlag = false; this.lastPoint = []; / draw circle this.createCircle (); / / canvas bind event this.bindEvent ();} makeState () {if (this.pswObj.step = = 2) {this.page.setData ({title:' Please unlock'}) } else if (this.pswObj.step = = 1) {/ / pass} else {/ / pass} / / the circle drawing method drawCle (XMagine) {/ / sets the border color. This.ctx.setStrokeStyle (this.cleColor); / / use set / / to set the width of the line. This.ctx.setLineWidth (2); / / Note to start creating a path with set / /, you need to call fill or stroke to fill or stroke with the path. This.ctx.beginPath (); / / draw an arc. This.ctx.arc (x, y, this.r, 0, Math.PI * 2, true); / / close a path this.ctx.closePath (); / / draw the border of the current path. The default color is black. This.ctx.stroke (); / / draw the description (path, deformation, style) previously in the drawing context into canvas. This.ctx.draw (true);} / / method for calculating the distance between two points getDis (a, b) {return Math.sqrt (Math.pow (a.x-b.x, 2) + Math.pow (a.y-b.y, 2));} / / create the coordinates of the unlocking point and distribute the radius createCircle () {var n = this.chooseType; var count = 0 evenly according to the size of the canvas (default 300px) / / calculate the circle radius this.r = this.width / (2 + 4 * n); this.arr = []; this.restPoint = []; var r = this.r; / / get the center coordinates and the number for (var I = 0; I) represented by the current circle

< n; i++) { for (var j = 0; j < n; j++) { count++; var obj = { x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r, index: count }; this.arr.push(obj); this.restPoint.push(obj); } } // 清空画布 this.ctx.clearRect(0, 0, this.width, this.height); // 绘制所有的圆 this.arr.forEach(current =>

{this.drawCle (current.x, current.y);};} / set password drawing getPosition (e) {/ / get the canvas point coordinates var po = {x: e.touches [0] .x, y: e.touches [0] .y}; return po;} precisePosition (po) {var arr = this.restPoint.filter (current = > Math.abs (po.x-current.x))

< this.r && Math.abs(po.y - current.y) < this.r); return arr[0]; } drawPoint(obj) { // 初始化圆心 for (var i = 0; i < this.lastPoint.length; i++) { this.ctx.setFillStyle(this.cleCenterColor); // 注意用set方法 this.ctx.beginPath(); this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true); this.ctx.closePath(); this.ctx.fill(); this.ctx.draw(true); } } drawLine(po) {// 解锁轨迹 this.ctx.beginPath(); this.ctx.lineWidth = 3; this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y); for (var i = 1; i < this.lastPoint.length; i++) { this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y); } this.ctx.lineTo(po.x, po.y); this.ctx.stroke(); this.ctx.closePath(); this.ctx.draw(true); } pickPoints(fromPt, toPt) { var lineLength = this.getDis(fromPt, toPt); var dir = toPt.index >

FromPt.index? 1:-1; var len = this.restPoint.length; var I = dir = = 1? 0: (len-1); var limit = dir = = 1? Len:-1; while (I! = = limit) {var pt = this.restPoint [I]; if (this.getDis (pt, fromPt) + this.getDis (pt, toPt) = lineLength) {this.drawPoint (pt.x, pt.y); this.lastPoint.push (pt); this.restPoint.splice (I, 1); if (limit > 0) {Imurf; limit--;} I + = dir }} update (po) {/ / Core transformation method calls this.ctx.clearRect (0,0, this.width, this.height) during touchmove; for (var I = 0; I < this.arr.length; iTransformation +) {/ / draw the panel first per frame this.drawCle (this.arr [I] .x, this.arr [I] .y);} this.drawPoint (this.lastPoint) / / this.drawLine (po, this.lastPoint) per frame; / / draw the center of each frame for (var I = 0; I < this.restPoint.length; iTunes +) {var pt = this.restPoint [I]; if (Math.abs (po.x-pt.x) < this.r & & Math.abs (po.y-pt.y) < this.r) {this.drawPoint (pt.x, pt.y) This.pickPoints (this.lastPoint.length-1], pt); break;}} checkPass (psw1, psw2) {/ / Detection password var p1 =', p2 ='; for (var I = 0; I < psw1.length; iPoint +) {p1 + = psw1 [I] .index + psw1 [I] .index;} for (var I = 0; I < psw2.length) Return +) {p2 + = psw2 [I] .index;} return p1 = p2;} storePass (psw) {/ / handling of passwords and states after the end of if (this.pswObj.step = = 1) {if (this.pswObj.fpassword, psw) {this.pswObj.step = 2; this.pswObj.spassword = psw; this.page.setData ({title:' password saved'}) This.drawStatusPoint ('# 2CFF26'); wx.setStorageSync ('passwordxx', JSON.stringify (this.pswObj.spassword)); wx.setStorageSync (' chooseType', this.chooseType);} else {this.page.setData ({title: 'inconsistent twice, re-enter'}); this.drawStatusPoint ('red'); delete this.pswObj.step }} else if (this.pswObj.step = = 2) {if (this.checkPass (this.pswObj.spassword, psw)) {this.page.setData ({title: 'unlocked successfully'}); this.drawStatusPoint ('# 2CFF26');} else {this.drawStatusPoint ('red'); this.page.setData ({title:' unlocking failed'});}} else {this.pswObj.step = 1 This.pswObj.fpassword = psw; this.page.setData ({title:'re-enter'});}} drawStatusPoint (type) {/ / initialize the status line for (var I = 0; I < this.lastPoint.length; iPoint +) {this.ctx.strokeStyle = type; this.ctx.beginPath (); this.ctx.arc (this.lastPoint [I] .x, this.lastPoint.y, this.r, 0, Math.PI * 2, true) This.ctx.closePath (); this.ctx.stroke (); this.ctx.draw (true);}} updatePassword () {wx.removeStorageSync ('passwordxx'); wx.removeStorageSync (' chooseType'); this.pswObj = {}; this.page.setData ({title: 'draw unlock pattern'}); this.reset ();} reset () {this.makeState (); this.createCircle ();} bindEvent () {var self = this This.page.onTouchStart = function (e) {var po = self.getPosition (e); self.lastPoint = []; for (var I = 0; I < self.arr.length; iTunes +) {if (Math.abs (po.x-self.arr [I] .x) < self.r & & Math.abs (po.y-self.arr [I] .y) < self.r) {self.touchFlag = true Self.drawPoint (self.arr [I] .x, self.arr [I] .y); self.lastPoint.push (self.arr [I]); self.restPoint.splice (I, 1); break;} this.page.onTouchMove = function (e) {if (self.touchFlag) {self.update (arr (e)) }} this.page.onTouchEnd = function (e) {if (self.touchFlag) {self.touchFlag = false; self.storePass (self.lastPoint); setTimeout (function () {self.reset ();}, 300);} module.exports = Locker Thank you for your reading. the above is the content of "how to achieve the gesture pattern lock screen function by WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs realizes the gesture pattern lock screen function. The specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.