Vue で電子署名コンポーネントを実装するにはどうすればよいですか?

人生の中で、電子署名を最もよく使用する場所はおそらく銀行でしょう。銀行では、毎回自分の名前を残すことができます。今日は、vue を使用して電子署名パネルを実装します

グラフィックを描画したい場合、最初に思い浮かぶのは、canvas タグを使用することです。 canvas を使用しました グラフィック検証コードを生成するフロントエンド コンポーネントを実装しました。安全性が十分ではないと批判されているため、この電子署名コンポーネントは絶対に批判されません~

canvas

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

canvas タグ自体には描画機能がないため、すべての描画作業は JavaScript 内で完了する必要があります。

canvasDrawing を使用するには、いくつかの必要な手順があります。

1. canvas 要素を取得します
2. canvas 要素を通じてコン​​テキスト オブジェクトを作成します
3. コンテキスト オブジェクトを通じてグラフィックを描画する

現在の電子署名要件では、署名は実際には線で構成されているため、次の方法を使用します。

1. beginPath(): パスを開始するか、現在のパスをリセットします。
2. moveTo(): ラインを作成せずに、パスをキャンバス内の指定された点に移動します。
3. lineTo(): 追加新しい点を作成し、その点から最後に指定した点までキャンバス内に線を作成します。
4. stroke(): 定義されたパスを描画します。
5. closePath(): 現在の点から戻る線を作成します。開始点へのパス

Event

canvas に描画したい場合は、いくつかの特定のイベントをバインドする必要があります。これらのイベントはPC 側とモバイル版は異なります

PC 版イベント

• mousedown
• mousemove
• mouseup

モバイル バージョンのイベント

• touchstart
• touchmove
• touchend

コア コード

Initializationcanvas タグを付けてイベントをバインドします

<canvas
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        ref="canvasF"
        @mousedown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      ></canvas>

ブラシを取得します

In 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 });//记录点
      }
    },

Rewrite

タイプミスに気づいたので、製図板を消して書き直しました

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

使用したデータ

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

関連推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新 5 つの vue.js ビデオ チュートリアルのセレクション

プログラミング関連の知識の詳細については、プログラミング入門をご覧ください。 ！

以上がVue で電子署名コンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。