Vue에서 전자 서명 구성 요소를 구현하는 방법은 무엇입니까?

생활에서 전자 서명을 가장 많이 사용하는 곳은 아마도 매번 이름을 남길 수 있는 은행일 것입니다. 오늘은 vue를 사용하여 전자 서명 패널을 구현해 보겠습니다

그래픽을 그리고 싶다면 가장 먼저 떠오르는 단계는 이전 글에서 사용했던 canvas 태그입니다. 캔버스그래픽 인증 코드를 생성하는 프런트엔드 구성 요소를 구현했습니다. 안전하지 않다는 비판을 받았으니 이 전자 서명 구성 요소는 절대 비판을 받지 않을 것입니다~canvas标签，在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件，被吐槽不够安全，那么这个电子签名组件想必不会被吐槽了吧~

canvas

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

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

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

1. 获取canvas元素
2. 通过canvas元素创建context对象
3. 通过context对象来绘制图形

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

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

canvas

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;
  }

canvas 태그 자체에는 그리기 기능이 없으며 모든 그리기 작업은 JavaScript 내에서 완료되어야 합니다.

캔버스를 사용하여 그리는 데 필요한 몇 가지 단계가 있습니다.

1. 캔버스 요소 가져오기
2. 캔버스 요소를 통해 컨텍스트 개체 만들기
3. 컨텍스트 개체를 전달하여 그래픽 그리기

현재 전자 서명 요구 사항에서는 서명이 실제로 선으로 구성되므로 다음 방법을 사용합니다.

1. beginPath ( ): 경로 시작 또는 현재 경로 재설정
2. moveTo(): ​​​​선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다.
3. lineTo(): ​​​​새 점을 추가한 다음 해당 점에서 캔버스의 마지막으로 지정된 점까지 선을 만듭니다.
4. Stroke(): 정의된 경로 그리기
5. closePath(): 선 만들기 현재 지점에서 시작 시작 지점까지의 경로

이벤트

캔버스에 그리려면 여러 특정 이벤트를 바인딩해야 하며 이러한 이벤트는 PC 측과 모바일 측에서 다릅니다

PC 측 이벤트

• mousedown
• mousemove
mouseup

모바일 이벤트

• touchstart
• touchmove li>
• touchend

핵심 코드

캔버스 초기화code> 태그 및 이벤트 바인딩

//电脑设备事件
    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(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);//记录点
  }
},

이벤트 처리

mouseDown

//电脑设备事件
    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);//记录点
      }
    },

touchStart

//移动设备事件
    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);//记录点
      }
    },

mouseMove

//电脑设备事件
    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;
      }
    },

touchMove

//移动设备事件
    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 });//记录点
      }
    },

mouseUp

//重写
    overwrite() {
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.points = [];
      this.isDraw = false; //签名标记
    },

touchEnd

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 //签名标记
    };
  },

Rewrite

제가 오타를 내고 화판을 지우고 다시 쓴 걸 발견했습니다rrreee사용된 데이터

rrreee

관련 추천:

🎜 2020년 프론트엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 추천: 2020 최신 5 vue.js 비디오 튜토리얼 선택🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 원하시면, 🎜프로그래밍 입문🎜을 방문해 주세요! ! 🎜🎜

위 내용은 Vue에서 전자 서명 구성 요소를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!