转载：使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了，每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板。在这篇文章中我们主要采用的技术是canvas。

Canvas技术点：

  1. <canvas> 标签是 HTML 5 中的新标签。
  2. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

canvas标签本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。

一、使用canvas绘图有几个必要的步骤：

  • 获取canvas元素
  • 通过canvas元素创建context对象
  • 通过context对象来绘制图形

在当前电子签名需求中，由于签名其实是由一条条线组成的，因此我们会用到以下几个方法：

  1. beginPath() ：开始一条路径或重置当前的路径
  2. moveTo()：把路径移动到画布中的指定点，不创建线条
  3. lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条
  4. stroke()：绘制已定义的路径
  5. closePath()：创建从当前点回到起始点的路径

二、事件绑定：

由于PC端和移动端的差异，因此在PC端的绑定事件和移动端略有不同。以下是需要绑定的相关事件。

1、PC端

mousedown，mousemove，mouseup

2、移动端

touchstart，touchmove，touchend

三、核心代码：

1、初始化canvas标签并绑定事件

  1. <canvas
  2.         @touchstart="touchStart"
  3.         @touchmove="touchMove"
  4.         @touchend="touchEnd"
  5.         ref="canvasF"
  6.         @mousedown="mouseDown"
  7.         @mousemove="mouseMove"
  8.         @mouseup="mouseUp"
  9.       >
  10. </canvas>

2、在mounted生命周期初期获取画笔。

  1. mounted() {
  2.     let canvas = this.$refs.canvasF;
  3.     canvas.height = this.$refs.canvasHW.offsetHeight - 100;
  4.     canvas.width = this.$refs.canvasHW.offsetWidth - 10;
  5.     this.canvasTxt = canvas.getContext("2d");
  6.     this.canvasTxt.strokeStyle = this.color;
  7.     this.canvasTxt.lineWidth = this.linewidth;
  8.   }

3、事件处理

①mouseDown

  1. //电脑设备事件
  2.     mouseDown(ev) {
  3.       ev = ev || event;
  4.       ev.preventDefault();
  6.       let obj = {
  7.         x: ev.offsetX,
  8.         y: ev.offsetY
  9.       };
  10.       this.startX = obj.x;
  11.       this.startY = obj.y;
  12.       this.canvasTxt.beginPath();//开始作画
  13.       this.points.push(obj);//记录点
  14.       this.isDown = true;
  15.     },

②touchStart

  1. //移动设备事件
  2.     touchStart(ev) {
  3.       ev = ev || event;
  4.       ev.preventDefault();
  5.       if (ev.touches.length == 1) {
  6.         this.isDraw = true; //签名标记
  7.         let obj = {
  8.           x: ev.targetTouches[0].clientX,
  9.           y:
  10.             ev.targetTouches[0].clientY -
  11.             (document.body.offsetHeight * 0.5 +
  12.               this.$refs.canvasHW.offsetHeight * 0.1)
  13.         }; //y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
  14.         this.startX = obj.x;
  15.         this.startY = obj.y;
  16.         this.canvasTxt.beginPath();//开始作画
  17.         this.points.push(obj);//记录点
  18.       }
  19.     },
1 2
  • 版权声明： 本文源自 SegmentFault， 于4年前，由整理发表，共 4533字。
  • 原文链接：点此查看原文
你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！