基于Vue实现手势签名

本文实例为大家分享了基于Vue实现手势签名的具体代码，供大家参考，具体内容如下废话不多说，直接上效果图源码代码如下1.templatetemplatemainclass=hand-sign-p...

本文实例为大家分享了基于vue实现手势签名的具体代码，供大家参考，具体内容如下

废话不多说，直接上效果图&源码

代码如下

1. template

<template>
 <main class="hand-sign-page">
  <header class="sign-head">请在下方区域内签名</header>
  <div id="signContain" :style="{'--back': background}"></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,//绘画环境
    linewidth:1,//线条粗细，选填
    color:"black"js,//线条颜色，选填
    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;
    jsthis.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);
   
    //结束绘制
    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');//系统获取一个空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%);
   bacvMjQZkground-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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。