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

设计思想流程图

1.全局常数

构造函数(page，opts){ //初始化全局常量数据this.page=pagethis . 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；//坐标点之间距离的一半这个。r=this.size/2;//外圆半径this . r=this.size/4;//内圆半径//判断缓存中是否有密码，如果有，直接进入第二步：解码，如果没有，初始化设置密码this . pswobj=wx . getstorageync(' password ')？{ step: 2，password : JSON . parse(wx . GetStorageync('密码'))} : { step: 0 }//启动手势锁定初始化this . init()；}2.全局变量

init(){ const _ this=this；//定义全局变量，标记开始，手势锁定各坐标的中心点数组，记录所选数组_ this.flag=false_ this . location arr=[]；_ this . LastPoint=[]；_ this . restpoint=[]；//设置canvas _ this.page.setdata的宽度和高度({width: _ this.width，height : _ this . height })；this . CTX=wx . createcanvascontext(this . canvasid，this)；//初始化中心坐标数组this . location()；//初始化绘制图形圆this . draw po()；//初始化绑定事件this . Bindievent()；}3.初始化坐标阵列位置Arr和restPoint

Location(){ //计算坐标的x、y坐标，记录当前位置所代表的数字：let count=0，arr=[]，arr 0=[]；for(设I=0；I .这种类型；i ){ for(让j=0；j .这种类型；j ){计数；由…改编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=arrthis.restPoint=arr0}4.绘制手势锁定矩阵

绘制圆函数(布尔值决定当前图形是空心的还是实心的)

DrawCle(x，y，r，bool){ //设置边框颜色。布尔？this . CTX . setstrokestyle(this . clecolor): this . CTX . setfillstyle(this . clecolor)；//注意用set //设置线条的宽度。this . CTX . setlinewidth(2)；//注意用set //创建路径。您需要调用填充或描边来填充或描边路径。this . CTX . BeginPath()；//画一条弧线。this.ctx.arc(x，y，r，0，Math。PI * 2，真)；//关闭一个路径this . CTX . closepath()；//绘制当前路径的边框。默认颜色是黑色。布尔？this . CTX . stroke(): this . CTX . fill()；//将绘图上下文中先前的描述(路径、变形和样式)绘制到画布中。this . CTX . draw(true)；}矩阵绘图

DrawPo(){ //画一个空圆。在绘制之前，清空画布以防止重复绘制this.ctx.clearrect (0，0，this.width，this.height)。this . location arr . foreach(current={ this . draw cle(current . x，current.y，this。r，真)；});}5.触发移动时间线的绘制功能

DrawLine(po) {//解锁曲目this . CTX . BeginPath()；//线宽this . CTX . line width=3；//起点this . CTX . move to(this . last point[0]。x，this.lastpoint [0]。y)；//中间变换的点为(var I=1；I 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)；}6.获取当前位置的坐标点函数

GetPosition(e) {//获取触摸点相对于画布的坐标返回{ x : e . touchs[0]。x，y : e . touch[0]。y }；}7.触发touchstart事件处理

_ this . page . OnTouchStart=function(e){ let po=_ this . GetPosition(e)；//获取(let [key，val]of _ this . location arr . entries()){//比较最近的坐标if(math . ABS(val . x-po . x)_ this.r math . ABS(val.y-po . y)_ this . r in a loop//输入判断，成功触发touchstart事件_ this.drawcle (val.x，val . y，_ this . r，false)；//画出这个点的实心内圆_ this . lastppoint . push(val)；//将该点的坐标记录到last point _ this . rest point . splice(key，1)；//删除记录数组restPoint的点坐标断点；//找到坐标跳出循环} }}8。触发触摸移动事件处理

_ this . page . ontouchmove=function(e){ _ this . flag _ this . updata(_ this . getposition(e))；}确定是否触发了touchstart，如果是，执行updata功能。

更新最后一点的坐标函数

Updata(po){ //空画布this.ctx.clearrect (0，0，this.width，this . height)；//重绘矩阵(让val来做这个。locationarr) {this。抽屉(val。x瓦尔。这个。r，真)；}//画一个记录坐标的实心圆。最后一点){这个。抽屉(val。x瓦尔。这个。r，假)；}//绘制解锁路线this . draw line(po)；//查找尚未落地的移动点的确切坐标，for (let [key，val]of this . rest point . entries()){ if(math . ABS(po . x-val . x)this . r math . ABS(po . y-val . y)this . r){ this . draw . this . lastppoint . push(val)；this.restPoint.splice(键，1)；打破；}} }9.触发触摸事件处理

_this.page.onTouchEnd=函数(e){ if(_ this . flag){ _ this . flag=false；_ this . end data()；_ this . check password(_ this . LastPoint)；setTimeout(函数(){ _ this . reset()；}, 500);}}通过流程图，我们可以更清晰地认识到制作一个函数需要创建的变量和函数，过程步骤也更清晰，当然生产过程也需要优化。建议在做一些大功能的时候，如果流程不清晰，最好画一个思路清晰，开发比较快，考虑比较全面的流程图。

摘要

以上是边肖介绍的微信小程序实现手势锁定的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！