WeChat applet implementation gesture lock function instance code

微信小程序实现之手势锁功能实例代码

1, global constant

Constructor (PAGE , OPTS) {// Initializing global constant data this.page = page; this.width = opts.width || 300; this.height = opts.height || 300; this.canvasid = opts.canvasid || ‘Lock’ this.Type = OPTS.TYPE || 3; this.Clecolor = OPTS.CLECOLOR || ‘RGBA (0,136,204,1)’; this.size = this.width / this.type / 2; // between coordinate points Semi-spacing this.r = this.size / 2; // outer radius THISR = this.size / 4; // Inner circle radius // Judgment whether there is a password in the cache, if there is, the second Steps: Decoding, if there is no existence, initialization, set password this.pswobj = wx.getStorageSync (‘password’)? {Step: 2, password: json.parse (wx.getStorageSync (‘password’)}: {Step : 0}; // Start gesture lock initialization this.init ();}
   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 ();}

3, initialization coordinate array Locationarr and RESTPOINT
   
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

Draw a circular function (Bool The value is judged that the current draw is hollow or solid)
DrawCle (X, Y, R, BOOL) {// set border color. Bool? This.ctx.setStrokestyle THIS.CLECOLOR): this.ctx.setfillStyle (this.clecolor); // Note Use the SET // to set the width of the line. This.ctx.SetLineWidth (2); // Note Use the SET // to create a path, you need to call Fill or Stroke to use the path to fill or stroke. This.ctx.beginpath (); // draws a arc. This.ctx.arc (x, y, r, 0, math.pi * 2, true); // Turn off a path this.ctx.closepath (); / / Draw the border of the current path. The default color is black. BOOL? this.ctx.stroke (): this.ctx.fill (); // Painted the previous description (path, deformation, pattern) in the drawing context to Canvas. “
  < 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};}

7, triggering TouchStart event processing
  < 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)

8, trigger TouchMove event processing
   
_thispage.ontouchmove = function (e) {_this.flag && _tis.updata (_this.getPosition (e))

If TouchStart is triggered, the UPDATA function is executed if it triggers.
 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;//找到坐标,跳出循环
  }
 }
} 
Updata (PO) {// Clear Canvas this.ctx.clearRect (0, 0, this.width, this.Height); // Resend Matrix for (Let Val of this.locationarr) {this. Drawcle (Val.x, Val.y, this.r, true);} // Draws the recorded coordinates of the solid round for (Let Val of this.lastpoint) {THIS.DRAWCLE (Val.x, Val.y, this .r, false;} // Draw the unlock line this.drawline (po); // Find the exact coordinate for “LET [key, val] of this.restpoint.entries ()) { IF (Math.Abs ​​(PO.X – VAL.X)

9, trigger TOUCHEND event processing
   
_this.page.ontouchend = function (e) {i (_this.flag) {_this.flag = false; _this.Enddata (); _this.checkpassword; settimeout (function) {_THIS.RESET ();}
By flow chart, it can be more clearly recognized that variables and functions, flows, flows, flows, flow The steps are clearer, and of course the process also needed to optimize. It is recommended to make some big function.If the process is unclear, it is best to draw a flow chart, the idea is clear, the development is faster, and it is more common.

Summary

The above is a detailed explanation of the hand gesture lock for the WeChat applet to introduce it to you. I hope that everyone can help, if everyone If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment