1, global constant

** **

` `` `

2, global variable

** ** init () {const _this = this; // Define global variables, mark Start, The central point array of each coordinate of gesture lock, record the selected number of groups_this.flag = false; _this.locationarr = []; _this.lastpoint = []; _this.restpoint = []; // Set the width of Canvas _this.page.setdata ({width: _this.His.w); this.ctx = wx.createcanvascontext (this.canvasid, this); // Initialization center coordinate array this.location (); / / Initialize Drawing Graphic THIS.DRAWPO (); // Initialization Binding Event this.bindEvent ();}

` `` `

Location () {// Calculate the X, Y coordinates of the coordinate, and record the number let count = 0 represented by the current location, Arr = [], Arr0 = []; for (LET I = 0; i 4, plotting gesture lock matrix ** **

` ````
< this.type; i++){
for(let j = 0 ; j < this.type; j++){
count++;
arr.push({
x: this.size * ((j + 1) * 2 - 1),//奇数个坐标间半间距
y: this.size * ((i + 1) * 2 - 1),//奇数个坐标间半间距
count: count//每个坐标代表的数
});
arr0.push({
x: this.size * ((j + 1) * 2 - 1),//奇数个坐标间半间距
y: this.size * ((i + 1) * 2 - 1),//奇数个坐标间半间距
count: count//每个坐标代表的数
});
}
}
this.locationArr = arr;
this.restPoint = arr0;
}
```

Matrix Draw ** ** DRAWPO () {// Draw hollow Circle, draw, clear Canvas to prevent repeating this.ctx.clearRect (0, 0, this.width, this.Height); this.locationarr.Foreach (current => {this.drawcle (Current.x, Current). Y, this.r, true);};}

5, the drawing function of triggering the MOVE timeline

` `` Drawline (PO) {// Unlock Track this.ctx.beginpath (); // Line Wide THIS.CTX.LINEWIDTH = 3; // Start Point THIS.ctx.moveto (this.lastpoint [0] .x, this.lastpoint [0] .y); // Intermediate conversion point for (var i = 1; i `

6, get the coordinate point function

` `` `

** ** GetPosition (e) {// Get the coordinate return {of the Touch point for Canvas { x: e.touches [0] .x, y: E.TOUCHES [0] .y};}

` ````
< this.lastPoint.length; i++) {
this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
}
// 正在移动选择的点
if (po) { this.ctx.lineTo(po.x, po.y);}
this.ctx.stroke();
this.ctx.closePath();
this.ctx.draw(true);
}
```

_this.page.ontouchstart = function (e) {let po = _this.getPosition (e); // Get the current accurate coordinate for (Let [key, VAL ] OF _THIS.LOCATIONARR.Entries ()) {// Cycle contrast nearest coordinate IF (Math.Abs (Val.x – Po.x) ** **

` `` `

_thispage.ontouchmove = function (e) {_this.flag && _tis.updata (_this.getPosition (e)) ** **

` Update the last point coordinate function ````
< _this.r && Math.abs(val.y - po.y) < _this.r){
_this.flag = true;//进入判断，触发touchstart事件成功
_this.drawCle(val.x, val.y, _this.r, false);//绘制该点的实心内圆
_this.lastPoint.push(val);//记录该点坐标到lastPoint
_this.restPoint.splice(key,1);//删除记录数组restPoint的该点坐标
break;//找到坐标，跳出循环
}
}
}
```

** **

` `` `

_this.page.ontouchend = function (e) {i (_this.flag) {_this.flag = false; _this.Enddata (); _this.checkpassword; settimeout (function) {_THIS.RESET ();}

Summary

` `` `

```
© Copyright NoticeThe copyright of this article belongs to the author. Please do not reprint it without permission。THE ENDJust support it if you like
```

```
```

## Please log in to comment

register