vue项目中实现手势密码

tips:本文是做记录用的

思路：

　　本来应该全部都用canvas来实现的，但时间紧迫 写的时候只想着圆圈用li写，线用canvas，写到一半才想通，不过还好这一通下来还算比较顺利

　　第一步：页面中的9个点用v-for循环出来li，ul设置成宽高相等的正方形。给li设置margin，保证一行只能装得下三个li，然后ul用display:flex;justify-content: space-between; align-content: space-between;给子元素排成九宫格；

　　第二步：先获取九个点圆心的位置，在手指按下移动的方法中判断当前手指的坐标是否到li区域内，然后把对应位置的数字存进密码数组，调用画线的方法，把密码数组中的数字对应的点连起来，最后连到手指的位置

　　第三步：在手指松开的方法中进行各种判断，判断是创建密码还是登录，判断密码长度是否小于4，有错的话颜色变红，最后再判断密码是否正确

说明：

　　1、手势密码部分以组件的形式引入需要用到的页面中

　　2、父组件中不传值的话就默认是创建手势密码（创建时密码长度不能小于4），需要输入两次，两次密码必须一致，如果是登录，父组件就把密码传给子组件，子组件就会根据密码判断当前输入是否正确，执行时请看控制台

不足之处：

　　1、未处理创建或登录成功之后的事情（写一个emit就行了，把输入的密码传给父组件）

　　2、还有一个就是canvas的高度问题，这里是用的设备高度的86%，如果九个点下面紧挨着有其他按钮的话是点不了的，因为被canvas覆盖了

演示：

父组件未传值，此时是创建手势密码

 登录时，父组件穿的值为<gestureUnlock :fatherPassword="[1,2,3,4,5]"></gestureUnlock>

下面分别是密码正确和密码错误的情况

密码组件：

<template>
  <div class="gestureUnlock">
    <div class="gesture">
      <ul>
        <li ref="selectLi" v-for="(item, index) in list" :key="item.id"
            :class="{'selectedOuter': password.indexOf(index) !== -1 ? true : false,
            'selectedOuter2': password.indexOf(index) !== -1 && redStyle ? true : false}">
          <span :class="{'selectedInside': password.indexOf(index) !== -1 ? true : false,
                'selectedInside2': password.indexOf(index) !== -1 && redStyle ? true : false}">
            <!--圆心-->
            <i ref="selectLiO"></i>
          </span>
        </li>
      </ul>
    </div>
    <div class="canvasDiv">
      <!-- <canvas id="canvasClearTop">此浏览器不支持canvas</canvas> -->
      <canvas id="canvas"  @touchstart="start" @touchmove="move" @touchend="end">此浏览器不支持canvas</canvas>
    </div>
    <div class='incorrectTip'><span v-show="tips">incorrect pattern</span></div>
  </div>
</template>

<script>
  export default {
    name: "GestureUnlock",
    data () {
      return {
        list: [
          {id:0, top: 0, left: 0, isSelected: false},
          {id:1, top: 0, left: 0, isSelected: false},
          {id:2, top: 0, left: 0, isSelected: false},
          {id:3, top: 0, left: 0, isSelected: false},
          {id:4, top: 0, left: 0, isSelected: false},
          {id:5, top: 0, left: 0, isSelected: false},
          {id:6, top: 0, left: 0, isSelected: false},
          {id:7, top: 0, left: 0, isSelected: false},
          {id:8, top: 0, left: 0, isSelected: false},
        ],
        left: [], // 圆心x坐标
        top: [], // 圆心y坐标
        password: [], // 用来存储创建密码，从上到下，从左到右依次是123,456,789
        cas: '', // 画笔
        casClearTop:'', // 上部清除线条的画布对象
        clientWidth: 0,
        clientHeight: 0,
        isCorrect: true, // 密码是否且是否正确
        redStyle: false, // li样式是否为红色
        createPassword: Array, // 这个用来存一下父组件传过来的fatherPassword，因为子组件不能直接修改父组件传过来的值
        radius: Number, // 半径
        tips: false // 错误提示是否显示
      }
    },
    props: {
      // 存储确认密码，变成组件后由父组件传过来，默认是空数组
      fatherPassword: {
        default: ()=>[], // 这个地方不能写成default: []
        type: Array
      }
    },
    created () {
      // 存一下父组件传过来的fatherPassword，因为子组件不能直接修改父组件传过来的值
      this.createPassword = this.fatherPassword
    },
    mounted() {
      // 获取到的是每个方块中心i标签的位置，
      for (let i = 0; i < this.$refs.selectLiO.length; i++) {
        this.left.push(this.$refs.selectLiO[i].getBoundingClientRect().left)
        this.top.push(this.$refs.selectLiO[i].getBoundingClientRect().top)
      }
      this.radius = this.$refs.selectLiO[0].getBoundingClientRect().left - this.$refs.selectLi[0].getBoundingClientRect().left
      console.log('半径为：', this.radius)
      console.log(this.left)
      console.log(this.top)
      this.clientWidth = document.documentElement.clientWidth
      this.clientHeight = document.documentElement.clientHeight
      console.log('设备宽高：', this.clientWidth, this.clientHeight)
      this.cas = document.getElementById('canvas').getContext('2d');
      document.getElementById('canvas').width = this.clientWidth;
      // canvas高度为最后一个圆的圆心加半径乘以1.5，就是大于最后一行多一点
      document.getElementById('canvas').height = this.top[this.top.length-1] + this.radius*1.5;
      // this.casClearTop = document.getElementById('canvasClearTop').getContext('2d');
      // document.getElementById('canvasClearTop').width = this.clientWidth;
      // document.getElementById('canvasClearTop').height = this.top[0] - this.radius*1.5;
    },
    methods: {
      // 手指点下
      start (e) {
        if(e.touches.length > 1 || e.scale && e.scale !== 1) { // 多点触碰或者缩放
          console.log('这样不行', e)
        } else {
          console.log('start', e.touches[0].pageX , e.touches[0].pageY)
        }
      },
      // 手指移动
      move (e) {
        // this.casClearTop.clearRect(0,0,200,200);
        let nowLeft = e.touches[0].pageX
        let nowTop = e.touches[0].pageY
        for (var i = 0; i < this.left.length; i++) {
          // 圆心坐标
          let oLeft = this.left[i]
          let oTop = this.top[i]
          if((oLeft - this.radius) <= nowLeft && nowLeft <= (oLeft + this.radius) && (oTop - this.radius) <= nowTop && nowTop <= (oTop + this.radius)) {
            if (this.password.length === 0 && this.password.indexOf(i) === -1) {
              this.password.push(i) // 直接存进密码
            } else if(this.password.indexOf(i) === -1){
              console.log('连中的值：', this.password[this.password.length - 1])
              let value = this.password[this.password.length - 1] // 根据此值(下标)找出对应的this.left和this.top
              // value是上一个点的值，i是当前连接点的值
              // 1-9 9-1、3-7 7-3、2-8 8-2、4-6 6-4
              if (i === 0 && value === 8 || i === 8 && value === 0 ||
                i === 2 && value === 6 || i === 6 && value === 2 ||
                i === 1 && value === 7 || i === 7 && value === 1 ||
                i === 3 && value === 5 || i === 5 && value === 3) {
                // this.password中存的是下标
                if (this.password.indexOf(4) === -1) {this.password.push(4)}
              } else if(i === 2 && value === 0 || i === 0 && value === 2) { // 1-3  3-1
                if (this.password.indexOf(1) === -1) {this.password.push(1)}
              } else if(i === 6 && value === 8 || i === 8 && value === 6){ // 7-9  9-7
                if (this.password.indexOf(7) === -1) {this.password.push(7)}
              }else if(i === 0 && value === 6 || i === 6 && value === 0){ // 1-7  7-1
                if (this.password.indexOf(3) === -1) {this.password.push(3)}
              }else if(i === 2 && value === 8 || i === 8 && value === 2){ // 3-9  9-3
                if (this.password.indexOf(5) === -1) {this.password.push(5)}
              }
              // 存密码
              this.password.push(i)
            }
          }
        }
        this.paint(nowLeft, nowTop, true)
      },
      // 画线的方法
      paint (nowX, nowY, color) {
        // console.log('paint')
        // this.casClearTop.clearRect(0,0,200,200); // 因为不是在这个canvas上画的，所以清了也没用
        this.cas.clearRect(0,0,this.clientWidth,this.clientHeight); // 每次画都清空整个画布
        this.cas.beginPath();
        for (var i = 0; i < this.password .length; i++) {
          this.cas.lineTo(this.left[this.password [i]], this.top[this.password [i]]); // 从这个开始
        }
        this.cas.lineTo(nowX, nowY);
        if (!color) {
          this.cas.strokeStyle = '#ff4b4b'
        } else {
          this.cas.strokeStyle = '#498bcb'
        }
        this.cas.lineJoin = "round"
        this.cas.lineWidth = 2;
        this.cas.stroke();
        // 清除li内圆形区域的线条
        this.password.forEach((item) => {
          this.clearArcFun(this.left[item], this.top[item], this.radius)
        })
      },
      // 清除li内的圆形区域
      clearArcFun (centerX, centerY, radius) {
        var stepClear = 1; //别忘记这一步
        var _this = this
        clearArc(centerX, centerY, radius);
        function clearArc(x, y, radius){ // 圆心x,y，半径radius
          var calcWidth = radius - stepClear;
          var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);
          var posX = x - calcWidth;
          var posY = y - calcHeight;
          var widthX = 2 * calcWidth;
          var heightY = 2 * calcHeight;
          if(stepClear <= radius){
            _this.cas.clearRect(posX, posY, widthX, heightY);
            stepClear += 1;
            clearArc(x, y, radius);
          }
        }
      },
      // 手指松开
      end () {
        console.log('end', this.password)
        if (this.createPassword.length === 0) { // 创建密码的第一次
          if(this.password.length >= 4) {
            this.tips = false
            // 此时再调用一次paint，传undefined, undefined,避免最后一条多余的线出现
            this.paint(undefined, undefined, true)
            // 不变红
            this.redStyle = false
            this.createPassword = this.password
            this.$emit('firstDown', {success: true})
            // 500ms后清空样式
            console.log('第一次设置密码createPassword：', this.createPassword)
            console.log('第一次设置密码password：', this.password)
            setTimeout(() => {
              this.password = []
              this.cas.clearRect(0,0,this.clientWidth,this.clientHeight);
            }, 500)
          } else if(this.password.length < 4 && this.password.length !== 0) {
            console.log('创建密码时长度小于4')
            this.tips = true
            this.paint(undefined, undefined, false)
            // 长度小于4样式为红色
            this.redStyle = true
            // 清空画布，颜色变正常，不然下次输入还是红色
            setTimeout(() => {
              this.password = []
              this.cas.clearRect(0,0,this.clientWidth,this.clientHeight);
              this.redStyle = false // 颜色变蓝，不然下次输入还是红色
            }, 500)
          }
        } else { // 创建密码的第二次 或者 登录，不管是啥反正都是拿password和createPassword（第一次输入的密码或者父组件传过来的密码）比较
          console.log('createPassword.length不为0，进入密码比较环节')
          console.log('createPassword:', this.createPassword)
          console.log('password:', this.password)
          if (this.password.toString() === this.createPassword.toString()) {
            this.tips = false
            // 设置/登录成功
            console.log('设置/登录成功')
            this.$emit('onDrawDone', {success: true, pwd: this.password})
            setTimeout(() => {
              this.password = []
              this.cas.clearRect(0,0,this.clientWidth,this.clientHeight);
              this.redStyle = false // 没true好像就可以没有false，加上吧保险一点
            }, 500)
          } else if(this.password.length !== 0){ // 两次输入不一致/密码不正确    这里写this.password.length !== 0是为了防止点一下canvas也会出现输入错误的提示
            this.tips = true
            this.paint(undefined, undefined, false)
            // 两次输入不一致/密码不正确 样式为红色
            this.redStyle = true // 有true下面必得有false
            console.log('失败')
            // 清空画布，颜色变蓝
            setTimeout(() => {
              this.password = [] // 还有蓝色是因为前几个存在于那个数组，得把password清空
              this.cas.clearRect(0,0,this.clientWidth,this.clientHeight);
              this.redStyle = false
              console.log(this.redStyle)
            }, 500)
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .incorrectTip{
    height: .5rem;
    span{
      /*line-height: .8rem;*/
      color: #ff4b4b;
    }
  }
  .gestureUnlock{
    margin: 0 auto;
  }
  .gesture{
    margin: 1.0rem auto 0;
    ul{
      margin: auto;
      display: flex;
       8.88rem;
      height: 8.88rem;
      justify-content: space-between;
      align-content: space-between;
      flex-wrap: wrap;
      li{
        display: flex;
        align-items:center;
        justify-content:center;
        margin: 0.45rem 0.45rem;
        border-radius: 50%;
         1.2rem;
        height: 1.2rem;
        border: 0.08rem solid #e0e0e0;
        /*宽度是1.2rem,边框是0.08rem,所以半径是0.68rem,1rem=37.5px，所以0.68x37.5 = 25.5px*/
        span{
          display: flex;
          align-items:center;
          justify-content:center;
           0.40rem;
          height: 0.40rem;
          border-radius: 50%;
          i{
            display: inline-block;
             1px;
            height: 1px;
          }
        }
      }
      /*被选中的样式*/
      .selectedOuter{
        border: 0.08rem solid #498bcb;
        .selectedInside{
          background: #498bcb;
        }
      }
      .selectedOuter2{
        border: 0.08rem solid #ff4b4b;
        .selectedInside2{
          background: #ff4b4b;
        }
      }
    }
  }
  .canvasDiv{
    position: fixed;
    top:0;
    left: 0;
    // background: rgba(0,0,0,0.1);
    z-index: 100;
    #canvasClearTop{
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(255,0,0,0.2)
    }
  }315 </style>

父组件调用（创建密码）：

<template>
  <!--首次登陆设置手势密码-->
  <div class="createGesture">
    <div class="picture">
      <img :src='logoImg' alt="">
    </div>
    <div class="words">
      <p v-if="!isShowConfirm">{{$t('createGesture.createGesture')}}</p>
      <p v-if="!isShowConfirm">{{$t('createGesture.drawTips')}}.</p>
      <p v-if="isShowConfirm">{{$t('createGesture.confirmGesture')}}</p>
      <p v-if="isShowConfirm">{{$t('createGesture.drawTips2')}}.</p>
    </div>
    <!--下面这是模拟登录时传密码过去-->
    <!-- <gestureUnlock @firstDown="onceDraw" @onDrawDone='fromNinePoint' :fatherPassword="[1,2,3,4,5]"></gestureUnlock> -->
    <!--此页面是创建密码，需要输入两次，组件不传值，fatherPassword默认是一个空数组-->
    <gestureUnlock @firstDown="onceDraw" @onDrawDone='fromNinePoint'></gestureUnlock>
    <!-- @firstDown="onceDraw"是第一次输入密码的事件  @onDrawDone='fromNinePoint'第二次完成密码的事件 -->
    <div class="bottom">
      <p>{{$t('createGesture.bottomTips')}}.</p>
      <div>
        <a class="btn_text" @click="skip"> {{$t('createGesture.skip')}} </a>
      </div>
    </div>
  </div>
</template>

<script>
  import gestureUnlock from '../../components/gestureUnlock'
  import Vue from 'vue';
  import { Grid, GridItem } from 'vant';
  Vue.use(Grid).use(GridItem);
  export default {
    name: "createGesture",
    components: {
      gestureUnlock
    },
    data() {
      return {
        logoImg: require('./Zurich_logo.png'),
        firstPwd: '', // 用来存创建密码时第一次输入的密码，便于和第二次比较
        regOrLogin: 'reg', // 传给子组件用于判断是注册还是登陆
        isShowConfirm: false, // 是否显示confirm密码
      }
    },
    methods: {
      onceDraw (e) {
        if (e.success) {
          console.log('第一次')
          this.isShowConfirm = true
        }
      },
      fromNinePoint (e) {
        if(e.success) {
          console.log('父组件：', e.pwd, '手势密码设置完成，登录')
          this.send(e.pwd.join(''))
        }
      },
      send (gesPwd) {
        console.log('手势密码：', gesPwd)
        this.$axios.post('http://*****/*****/****/gesturePasswordSetup', {
          username: '123',
          gesturePassword: gesPwd, // 手势密码
        })
        .then((res) => {
          console.log('返回的数据：', res)
          let flag = res.data.flagStr
          if (flag === 'Succ') {
            console.log('设置成功')
          }
        })
        .catch((res) => {
          console.log('报错：', res)
        })
      },
      // 跳过
      skip () {
        this.$router.push({name: '/'})
      }
    }
  }
</script>

<style lang="less" scoped>
  .createGesture{
    height: 100%;
  }
  .picture{
    padding-top: 0.533rem;
    text-align: center;
    img {
      height: 3rem;
    }
  }
  .words{
    text-align: center;
    color: #498bcb;
    p:nth-child(1) {
      margin: 0.267rem 0;
      font-size: 0.723rem;
    }
    p:nth-child(2) {
      font-size: 0.373rem;
    }
  }
  .bottom{
    z-index: 2000;
    margin-top: .3rem /* 30/37.5 */;
     100%;
    p{
      padding: 0 0.5rem;
      font-size: inherit;
    }
    div{
      margin: 0.353rem 0 0.337rem;
    }
  }
</style>