pc端签名 vue 生成图片_使用vue实现一个电子签名组件
使用vue实现一个电子签名组件
在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板
想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件相比不会被吐槽了吧~
canvas
标签是 HTML 5 中的新标签。
标签只是图形容器,您必须使用脚本来绘制图形。
canvas标签本身是没有绘图能力的,所有的绘制工作必须在 JavaScript 内部完成。
使用canvas绘图有几个必要的步骤:
获取canvas元素
通过canvas元素创建context对象
通过context对象来绘制图形
在当前电子签名需求中,由于签名其实是由一条条线组成的,因此我们会用到以下几个方法:
beginPath() :开始一条路径或重置当前的路径
moveTo():把路径移动到画布中的指定点,不创建线条
lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条
stroke():绘制已定义的路径
closePath():创建从当前点回到起始点的路径
事件
想要在canvas中绘图,还需要绑定几个特定的事件,而这些事件在pc端和手机端不尽相同
pc端事件
mousedown
mousemove
mouseup
手机端事件
touchstart
touchmove
touchend
核心代码
初始化canvas标签并绑定事件
获取画笔
在mounted生命周期初始化
mounted() {
let canvas = this.$refs.canvasF;
canvas.height = this.$refs.canvasHW.offsetHeight - 100;
canvas.width = this.$refs.canvasHW.offsetWidth - 10;
this.canvasTxt = canvas.getContext("2d");
this.canvasTxt.strokeStyle = this.color;
this.canvasTxt.lineWidth = this.linewidth;
}
事件处理
mouseDown
//电脑设备事件
mouseDown(ev) {
ev = ev || event;
ev.preventDefault();
let obj = {
x: ev.offsetX,
y: ev.offsetY
};
this.startX = obj.x;
this.startY = obj.y;
this.canvasTxt.beginPath();//开始作画
this.points.push(obj);//记录点
this.isDown = true;
},
touchStart
//移动设备事件
touchStart(ev) {
ev = ev || event;
ev.preventDefault();
if (ev.touches.length == 1) {
this.isDraw = true; //签名标记
let obj = {
x: ev.targetTouches[0].clientX,
y:
ev.targetTouches[0].clientY -
(document.body.offsetHeight * 0.5 +
this.$refs.canvasHW.offsetHeight * 0.1)
}; //y的计算值中:document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高,this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
this.startX = obj.x;
this.startY = obj.y;
this.canvasTxt.beginPath();//开始作画
this.points.push(obj);//记录点
}
},
mouseMove
//电脑设备事件
mouseMove(ev) {
ev = ev || event;
ev.preventDefault();
if (this.isDown) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
};
this.moveY = obj.y;
this.moveX = obj.x;
this.canvasTxt.moveTo(this.startX, this.startY);//移动画笔
this.canvasTxt.lineTo(obj.x, obj.y);//创建线条
this.canvasTxt.stroke();//画线
this.startY = obj.y;
this.startX = obj.x;
this.points.push(obj);//记录点
}
},
touchMove
//移动设备事件
touchMove(ev) {
ev = ev || event;
ev.preventDefault();
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX,
y:
ev.targetTouches[0].clientY -
(document.body.offsetHeight * 0.5 +
this.$refs.canvasHW.offsetHeight * 0.1)
};
this.moveY = obj.y;
this.moveX = obj.x;
this.canvasTxt.moveTo(this.startX, this.startY);//移动画笔
this.canvasTxt.lineTo(obj.x, obj.y);//创建线条
this.canvasTxt.stroke();//画线
this.startY = obj.y;
this.startX = obj.x;
this.points.push(obj);//记录点
}
},
mouseUp
//电脑设备事件
mouseUp(ev) {
ev = ev || event;
ev.preventDefault();
if (1) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
};
this.canvasTxt.closePath();//收笔
this.points.push(obj);//记录点
this.points.push({ x: -1, y: -1 });
this.isDown = false;
}
},
touchEnd
//移动设备事件
touchEnd(ev) {
ev = ev || event;
ev.preventDefault();
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX,
y:
ev.targetTouches[0].clientY -
(document.body.offsetHeight * 0.5 +
this.$refs.canvasHW.offsetHeight * 0.1)
};
this.canvasTxt.closePath();//收笔
this.points.push(obj);//记录点
this.points.push({ x: -1, y: -1 });//记录点
}
},
重写
发现自己写错字了,擦掉画板重新写过
//重写
overwrite() {
this.canvasTxt.clearRect(
0,
0,
this.$refs.canvasF.width,
this.$refs.canvasF.height
);
this.points = [];
this.isDraw = false; //签名标记
},
用到的data
data() {
return {
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false,
color: "#000",
linewidth: 3,
isDraw: false //签名标记
};
},
转评赞就是最大的鼓励
文章来源: www.oschina.net,作者:我的小熊不见了,版权归原作者所有,如需转载,请联系作者。
原文链接:https://my.oschina.net/u/4163870/blog/3153098
pc端签名 vue 生成图片_使用vue实现一个电子签名组件相关推荐
- 荒野行动 pc android,荒野行动pc端多大内存_荒野行动电脑版配置要求-APK8安卓网...
最近许多小伙伴在玩<荒野行动>这款吃鸡手游,而荒野行动现在已经PC版,那么荒野行动pc端多大内存_荒野行动电脑版配置要求是什么呢? <荒野行动>于11月23日上线了免费且与移动 ...
- 今日头条PC端改版上线搜索功能,更像一个搜索引擎平台了!(头条搜索seo)
今日头条移动搜索早就上线了,用户体验和界面还不错.不过PC端一直没有对外开放,只能搜索站内的内容.作者首发公众号宋九九发现pc端可以使用移动搜索功能,但是搜索界面页面是移动端的,在pc端不友好. 今日 ...
- vue构建pc端项目(ElementUI)、vue入门小应用
Webpack+Vue-router的架构方式 Vue-cli安装省略(vue-cli搭建) ElementUI库(pc端)的引用(见下文) 打包(项目完成后打包放服务器) 在项目目录下运行 npm ...
- pc端游戏修改器_原神:不要吐槽手机内存了,想要获得最佳游戏体验,PC端最合适...
想必大家这段时间都被一个米哈游公司的游戏给刷屏了吧,它就是号称用时三年,斥资一亿美元打造的<原神>,正是这种情况下,原神的关注远远要高于其他游戏,并且玩家的期望值也是和关注度成正比.但是, ...
- 学java要学vue吗_学vue之前必看
Vue学习 1.1 vue.js是什么? Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于 ...
- chrome vue插件_「Vue学习记录一」开发环境准备
1.开发工具 - VS Code ❝ 选择 VS Code 是因为这是一款很容易上手的工具,在 VS Code 中找到的每个功能都完成一项出色的工作,构建了一些简单的功能集,包括语法高亮.智能补全.集 ...
- pc端游戏修改器_【游戏资讯】大人,时代变了,这款游戏来PC端圈钱有点着急了...
要是说近几天游戏圈发生的大事,应该是<原神>开始PC端测试了,广告漫天飞,我在朋友圈也看到了好几个的截图,从宣布公测开始热度是居高不下. <原神>背后的公司米哈游手底下最出名的 ...
- pc端html调用麦克风_如何减少PC上的麦克风背景噪音
pc端html调用麦克风 Micolas/Shutterstock.com Micolas / Shutterstock.com Whether you're video conferencing w ...
- js定义全局变量 vue页面_在vue项目中 实现定义全局变量 全局函数操作
写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一 ...
最新文章
- R语言polygon函数绘制多边形实战
- 图神经网络在生物医药领域的12项研究综述
- php过滤特殊字符mysql攻击_php – MySQL在特殊字符处切断字符串
- Which of the following statement(s) equal(s) value 1 in C programming language?
- UITableView 学习笔记
- .net 默认时间格式不正确
- MIS2000Lab针对.NET 4.0出版的新书
- dotNET Core:编码规范
- Idea 同一工程根据不同配置文件启动、idea 同一工程多实例同时运行
- CV+NLP,使用tf.Keras构建图像搜索引擎
- idea 用鼠标滚轮调整代码文字大小
- 转:实战 SSH 端口转发
- 大话企业IT安全解决方案
- Unity手游实战:从0开始SLG——本地化篇(一)聊聊游戏本地化
- C语言求解一元二次方程
- Spring Boot layered(分层) jar 构建docker镜像
- 浅谈css样式及选择器
- Java程序员月薪30K和月薪3K差别在哪?
- 2021-11-06 ompl运动规划库的规划算法
- linux替换变量字符串,linux shell 替换字符串的几种方法,变量替换${},sed,awk
热门文章
- 【题解】1118 Birds in Forest (25分)⭐⭐ 【并查集】
- linux下deb安装包的运行
- 向SQL Server数据库中插入日期型数据
- TCP连接的建立和中止
- 【布局优化】基于人工蜂群算法的无线传感器网(WSN)覆盖优化matlab源码
- 求生之路2正版rpg服务器,求生之路2怎么屏蔽rpg服务器 求生之路2屏蔽rpg服务器方法-游侠网...
- 阿里推出新品牌“瓴羊”,致力成为“数字化领头羊”
- 2017年全国大学生电子设计竞赛 单相用电器分析监测装置(k题)
- android 发广播屏蔽home键,如何在Android App中屏蔽(拦截)Home按键及其他按键
- Windows 7下载