基于Vue如何實現(xiàn)手勢簽名

本篇內(nèi)容主要講解“基于Vue如何實現(xiàn)手勢簽名”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“基于Vue如何實現(xiàn)手勢簽名”吧!

代碼如下

1. template

<template>
  <main class="hand-sign-page">
    <header class="sign-head">請在下方區(qū)域內(nèi)簽名</header>
    <div id="signContain" :></div>
    <footer class="sign-foot">
      <button @click="clearCanvas">清除</button>
      <button @click="saveCanvas">保存</button>
    </footer>
    <img v-show="vaildSign" class="sign-img" :src="vaildSign" alt=" "/>
  </main>
</template>

2. js

<script>
  export default {
    name: "hand-sign",
    data() {
      return {
        domEl: null,//繪制canvas的父級div
        canvas: null,//畫布
        cxt: null,//繪畫環(huán)境
        linewidth:1,//線條粗細，選填
        color:"black",//線條顏色，選填
        background:"aliceblue",//線條背景，選填
        vaildSign: null
      }
    },
    
    mounted() {
      this.initCanvas();
    },

    methods: {
      initCanvas() {
        this.domEl = document.getElementById("signContain");
        this.canvas = document.createElement("canvas");
        this.domEl.appendChild(this.canvas);
        this.cxt = this.canvas.getContext("2d");
        this.canvas.width = this.domEl.clientWidth;
        this.canvas.height = this.domEl.clientHeight;
        this.cxt.fillStyle = this.background;
        this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
        this.cxt.strokeStyle = this.color;
        this.cxt.lineWidth = this.linewidth;
        //this.cxt.lineCap = "round";
        this.clearCanvas();//先清理下

        //開始繪制
        this.canvas.addEventListener("touchstart", (e) => {
          this.cxt.beginPath();
          this.cxt.moveTo(e.changedTouches[0].pageX - e.target.offsetLeft, e.changedTouches[0].pageY - e.target.offsetTop);
        }, false);

        //繪制中
        this.canvas.addEventListener("touchmove", (e)=> {
          this.cxt.lineTo(e.changedTouches[0].pageX - e.target.offsetLeft, e.changedTouches[0].pageY - e.target.offsetTop);
          this.cxt.stroke();
        }, false);
        
        //結(jié)束繪制
        this.canvas.addEventListener("touchend", (e)=> {
          this.cxt.closePath();
        }, false);
      },

      //清除畫布
      clearCanvas() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
      },

      //保存畫布
      saveCanvas() {
        console.log(this.blankCanvas());//檢查畫布是否為空白
        if(this.blankCanvas()) {
          window.alert('請簽名');
        }else {
          this.vaildSign = this.canvas.toDataURL();
        }
      },

      //canvas非空驗證
      blankCanvas() {
        let blank = document.createElement('canvas');//系統(tǒng)獲取一個空canvas對象
        blank.width = this.canvas.width;
        blank.height = this.canvas.height;
        return this.canvas.toDataURL() == blank.toDataURL();//比較值相等則為空
      },

    }
  }
</script>

3. css

<style lang="less" scoped>
  .hw(@h, @w: @h) {
    height: @h;
    width: @w
  }

  .hand-sign-page{
    background-color: #fff;
    .sign-head {
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #ebebeb;
      color: #666;
      font-size: 14px;
    }

    #signContain {
      .hw(400px, 100%);
      background-color: var(--back);
    }

    .sign-foot{
      display: flex;
      justify-content: center;
      margin: 15px;

      button {
        margin: 0 15px;
        padding: 10px 20px;
        background-color: #ddd;
        border-radius: 5px;

        &:active {
          background-color: #efefef;
        }
      }
    }

    .sign-img {
      .hw(100px, 200px);
      display: block;
      margin: 10px auto;
    }
  }

</style>

到此，相信大家對“基于Vue如何實現(xiàn)手勢簽名”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！