手势解锁java后端设计_canvas手势解锁源码

(function(){/**

* 实现画圆和划线:

* 1、添加事件touchstart、touchmove、touchend

* 2、touchstart判断是否点击的位置处于圆内getPosition,处于则初始化

* lastpoint、restPoint

* 3、touchmove做的就是:画圆drawPoint和画线drawLine

*

* 实现自动画圆的效果

* 1、检测手势移动的位置是否处于圆内

* 2、圆内的话则画圆 drawPoint

* 3、已经画过实心圆的圆,无需重复检测

*

* 实现解锁成功:

* 1、检测路径是否是对的

* 2、如果是对的就重置,圆圈变绿

* 3、不对也重置,圆圈变红

* 4、重置*/window.canvasLock= function(obj){this.height =obj.height;this.width =obj.width;this.chooseType =obj.chooseType;

};//js方式动态生成dom

canvasLock.prototype.initDom = function(){var wrap = document.createElement('div');var str = '

绘制解锁图案
';

wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');var canvas = document.createElement('canvas');

canvas.setAttribute('id','canvas');

canvas.style.cssText= 'background-color: #305066;display: inline-block;margin-top: 15px;';

wrap.innerHTML=str;

wrap.appendChild(canvas);var width = this.width || 300;var height = this.height || 300;

document.body.appendChild(wrap);//高清屏锁放

canvas.style.width = width + "px";

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序手势解锁源码可以参考以下步骤: 1. 首先,需要创建一个画布,用于绘制手势轨迹。可以在 wxml 文件中添加一个 canvas 标签,并设置宽高和 id: ```html <canvas canvas-id="gestureCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在 js 文件中,需要获取 canvas 对象,并设置一些相关的属性: ```javascript const ctx = wx.createCanvasContext('gestureCanvas') const canvasWidth = wx.getSystemInfoSync().windowWidth const canvasHeight = wx.getSystemInfoSync().windowHeight const cellWidth = canvasWidth / 3 // 九宫格每个格子的宽度 const cellHeight = canvasHeight / 3 // 九宫格每个格子的高度 let startPoint = {} // 起点坐标 let endPoint = {} // 终点坐标 let selectedPoints = [] // 已经选中的点 let isDrawing = false // 是否正在绘制手势轨迹 ``` 3. 接着,需要监听 canvas 的 touchstart、touchmove 和 touchend 事件,并在事件处理函数中实现手势解锁的逻辑: ```javascript // 监听 touchstart 事件 wx.canvasStart = function (e) { startPoint = { x: e.touches[0].x, y: e.touches[0].y } isDrawing = true } // 监听 touchmove 事件 wx.canvasMove = function (e) { if (isDrawing) { const x = e.touches[0].x const y = e.touches[0].y const cellX = Math.floor(x / cellWidth) const cellY = Math.floor(y / cellHeight) const point = `${cellX}-${cellY}` if (selectedPoints.indexOf(point) === -1) { selectedPoints.push(point) endPoint = { x, y } drawLine(startPoint, endPoint) startPoint = endPoint } } } // 监听 touchend 事件 wx.canvasEnd = function (e) { isDrawing = false // 处理手势解锁结果 handleGestureResult(selectedPoints) } ``` 4. 最后,实现绘制手势轨迹的函数 drawLine 和处理手势解锁结果的函数 handleGestureResult: ```javascript // 绘制手势轨迹 function drawLine(start, end) { ctx.setStrokeStyle('#fff') ctx.setLineWidth(2) ctx.beginPath() ctx.moveTo(start.x, start.y) ctx.lineTo(end.x, end.y) ctx.stroke() ctx.closePath() ctx.draw(true) } // 处理手势解锁结果 function handleGestureResult(points) { // TODO: 处理手势解锁结果的逻辑 } ``` 以上就是微信小程序手势解锁的基本实现思路和代码示例,仅供参考。完整的源码还需要根据具体需求进行调整和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值