vue移动端使用canvas签名的实现
2020-05-01 12:07
1656 查看
效果
canvas画板移动端 .gif
需求
在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢? 【本篇只讨论移动端,PC端请看上篇】
分析
很明显,我们需要一个canvas,关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下,其实本例也是基础操作。本案例在vue中完成。(脱离vue也一样。)
- 首先,需要一个canvas画布
- 其次,考虑逻辑
- 把逻辑实现
1. canvas画布
随意布局的一个画布,此处值得注意的是如果canvas的宽高确定,则在html>canvas中直接写宽高,如果不确定,根据别的元素变化,那么可以在js中初始化画布时写。
html
<div class="boardBox" ref="boardBox"> <canvas ref="board" </canvas> </div>
布局
.boardBox{ margin: 30px auto; width: 90vw; height: 25vh; background: #f9f9f9; canvas{ border: 1px solid #b3b3b3; } }
画布初始化
let board = this.$refs.board; // 获取DOM board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽 board.height = this.$refs.boardBox.offsetHeight; // 设置画布高 this.ctx = board.getContext('2d'); // 二维绘图 this.ctx.strokeStyle = '#000'; // 颜色 this.ctx.lineWidth = 3; // 线条宽度
2. 逻辑分析
由于本篇只讨论移动端端,因此无非是在画布上监听三个触摸事件:touchstart、touchmove、touchend。
那么,在这三个事件中,分别需要做什么呢?
touchstart
开始滑动按下,需要做:
- 获取触摸点做画布上的位置
- 存为一个点坐标(起始点)
- 以起始点建立一个路径
- 开启画布操作
touchmove
触摸滑动时,又要做那些准备呢?
- 判断是否开启画布操作,如果没开启就禁止绘制,因此先判断是否当前状态可绘制
- 获取触摸点做画布上的位置
- 上一个点到这一个点作连线
- 绘制出来
- 当前点存储,下一次用
touchend
滑动结束,事件结束:
- closePath() // 停止绘制
- 关闭画布操作的开关
好了,其实就是这三个事件,理清楚之后去代码实现就简单得多了。附上代码一份。
3. 代码
CSS略,如初始化即可,不是重点。
<div class="boardBox" ref="boardBox"> <canvas ref="board" @touchstart="mStart" @touchmove="mMove" @touchend="mEnd"> </canvas> </div> data() { return { ctx: null, point: { x: 0, y: 0 }, moving: false // 是否正在绘制中且移动 }; }, mounted() {let board = this.$refs.board; // 获取DOM board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽 board.height = this.$refs.boardBox.offsetHeight; // 设置画布高 this.ctx = board.getContext('2d'); // 二维绘图 this.ctx.strokeStyle = '#000'; // 颜色 this.ctx.lineWidth = 3; // 线条宽度}, methods: { // 触摸(开始) mStart (e) { console.log(e); let x = e.touches[0].clientX - e.target.offsetLeft, y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板(canvas)的坐标 this.point.x = x; this.point.y = y; this.ctx.beginPath(); this.moving = true; }, // 滑动中... mMove (e) { if(this.moving) { let x = e.touches[0].clientX - e.target.offsetLeft, y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板(canvas)的坐标 this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点,不创建线条(起始点) this.ctx.lineTo(x, y); // 添加一个新点,然后创建从该点到画布中最后指定点的线条,不创建线条 this.ctx.stroke(); // 绘制 this.point.x = x, this.point.y = y; // 重置点坐标为上一个坐标 } }, // 滑动结束 mEnd () { if(this.moving) { this.ctx.closePath(); // 停止绘制 this.moving = false; // 关闭绘制开关 } }, },
思考
- 上一篇,在PC端完成绘制,本篇如法炮制,在移动端也顺利完成,相比pc端只是稍微的修改了一下获取坐标点的算法而已。那么PC端和移动端如何并存呢?
- 出错了,怎么重新绘制呢?
- 绘制完成后,怎么保存呢?
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 使用websocket实现手机扫描PC端二维码,移动端canvas手绘签名确定后将图片同步到PC端 扫码及时更新图片
- Vue利用canvas实现移动端手写板的方法
- 使用canvas实现一个vue弹幕组件功能
- 使用Vue实现移动端左滑删除效果附源码
- Vue中组件的使用小技巧(移动端 去哪网项目的搭建及简单页面实现)
- 移动端Vue下使用Cropper.js + 原生js实现图片裁剪异步上传功能
- Vue利用canvas实现移动端手写板
- vue移动端使用appClound拉起支付宝支付的实现方法
- 如何在Vue项目中使用vw实现移动端适配
- 转:如何在Vue项目中使用vw实现移动端适配
- vue使用rem实现 移动端屏幕适配
- vue使用cropperjs实现移动端图片裁剪上传组件
- 用canvas在vue实现流星雨效果(移动端)
- 在Vue中使用WebSocket+HighCharts+Canvas实现高性能的频谱瀑布图
- 使用canvas实现一个vue弹幕组件功能
- h5 canvas实现移动端手写签名
- 使用vue实现简单键盘的示例(支持移动端和pc端)
- 使用canvas实现一个vue弹幕组件功能
- 学习vue从使用到源码实现
- 使用html5的canvas实现大转盘抽奖