宾馆预订微信小程序_vue移动端使用canvas签名的完

日期:2021-01-06 类型:行业动态 

关键词:学生个人网页制作代码,如何做网页或网站,网页游戏制作,dw网页设计作业,动态网页

vue移动端使用canvas签名的实现       这篇文章主要介绍了vue移动端使用canvas签名的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

canvas画板移动端 .gif

需求

在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢? 【本篇只讨论移动端,PC端请看上篇】

分析

很明显,我们需要一个canvas,关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下,其实本例也是基础操作。本案例在vue中完成。(脱离vue也一样。)

首先,需要一个canvas画布 其次,考虑逻辑 把逻辑实现

1. canvas画布

随意布局的一个画布,此处值得注意的是如果canvas的宽高确定,则在html canvas中直接写宽高,如果不确定,根据别的元素变化,那么可以在js中初始化画布时写。

html

 div 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 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; // 关闭绘制开关
},

思考