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;
      width: 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%;
        width: 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;
          width: 0.40rem;
          height: 0.40rem;
          border-radius: 50%;
          i{
            display: inline-block;
            width: 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 */;
    width: 100%;
    p{
      padding: 0 0.5rem;
      font-size: inherit;
    }
    div{
      margin: 0.353rem 0 0.337rem;
    }
  }
</style>