在生活中我们使用到电子签名最多的地方可能就是银行了, 每次都会让你留下大名. 今天我们就要用 vue 实现一个电子签名的面板
想要绘制图形, 第一步想到的就是使用 canvas 标签, 在之前的文章里我们使用 canvas 实现了一个前端生成图形验证码的组件, 被吐槽不够安全, 那么这个电子签名组件想必不会被吐槽了吧~
- canvas
- <canvas> 标签是 html 5 中的新标签.
- <canvas> 标签只是图形容器, 您必须使用脚本来绘制图形.
canvas 标签本身是没有绘图能力的, 所有的绘制工作必须在 JavaScript 内部完成.
使用 canvas 绘图有几个必要的步骤:
获取 canvas 元素
通过 canvas 元素创建 context 对象
通过 context 对象来绘制图形
在当前电子签名需求中, 由于签名其实是由一条条线组成的, 因此我们会用到以下几个方法:
beginPath() : 开始一条路径或重置当前的路径
moveTo(): 把路径移动到画布中的指定点, 不创建线条
lineTo(): 添加一个新点, 然后在画布中创建从该点到最后指定点的线条
stroke(): 绘制已定义的路径
closePath(): 创建从当前点回到起始点的路径
事件
想要在 canvas 中绘图, 还需要绑定几个特定的事件, 而这些事件在 pc 端和手机端不尽相同
pc 端事件
- mousedown
- mousemove
- mouseup
手机端事件
- touchstart
- touchmove
- touchend
核心代码
初始化 canvas 标签并绑定事件
- <canvas
- @touchstart="touchStart"
- @touchmove="touchMove"
- @touchend="touchEnd"
- ref="canvasF"
- @mousedown="mouseDown"
- @mousemove="mouseMove"
- @mouseup="mouseUp"
- ></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 // 签名标记
- };
- },
转评赞就是最大的鼓励
来源: https://segmentfault.com/a/1190000021480313