//component/unlock.js
(function() {

  // canvasLock是全局对象

  window.canvasLock = function(obj) {

    this.width = obj.width

    this.height = obj.height

    this.circleNum = obj.circleNum

    ;(this.isOk = true), (this.errrorSum = '0')

  }

  //动态生成DOM

  canvasLock.prototype.initDom = function() {

    //创建一个div

    var div = document.createElement('div')

    let app = document.getElementById('app')

    var h4 = "<h4 id='title' class='title'>绘制解锁图案</h4>"

    div.innerHTML = h4

    div.id = 'unlock'

    div.setAttribute(

      'style',

      'position:absolute;top:0;left:0;right:0;bottom:0;'

    )

    //创建canvas

    var canvas = document.createElement('canvas')

    canvas.setAttribute('id', 'canvas')

    //cssText 的本质就是设置 HTML 元素的 style 属性值

    canvas.style.cssText =

      'background:#2d3a4b;display:inine-block;margin-top:15px;'

    div.appendChild(canvas)

    app.appendChild(div)

    //设置canvas默认宽高

    var width = this.width || 300

    var height = this.height || 300

    canvas.style.width = width + 'px'

    canvas.style.height = height + 'px'

    canvas.width = width

    canvas.height = height

  }

  //以给定坐标点为圆心画出单个圆

  canvasLock.prototype.drawCircle = function(x, y) {

    this.ctx.strokeStyle = '#abcdef'

    this.ctx.lineWidth = 2

    this.ctx.beginPath()

    this.ctx.arc(x, y, this.r, 0, 2 * Math.PI, true)

    this.ctx.closePath()

    this.ctx.stroke()

  }

  //绘制出所有的圆

  canvasLock.prototype.createCircle = function() {

    var n = this.circleNum //一行几个圆

    var count = 0

    this.r = this.canvas.width / (4 * n + 2)

    this.lastPoint = []

    this.arr = []

    this.restPoint = []

    var r = this.r

    for (var i = 0; i < n; i++) {

      for (var j = 0; j < n; j++) {

        count++

        var obj = {

          x: (4 * j + 3) * r,

          y: (4 * i + 3) * r,

          index: count

        }

        this.arr.push(obj)

        this.restPoint.push(obj)

      }

    }

    //清屏

    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    for (var i = 0; i < this.arr.length; i++) {

      this.drawCircle(this.arr[i].x, this.arr[i].y)

    }

  }

  //添加事件

  canvasLock.prototype.bindEvent = function() {

    var self = this

    this.canvas.addEventListener(

      'touchstart',

      function(e) {

        var po = self.getPosition(e)

        //判断是否在圆内

        for (var i = 0; i < self.arr.length; i++) {

          if (

            Math.abs(po.x - self.arr[i].x) < self.r &&

            Math.abs(po.y - self.arr[i].y) < self.r

          ) {

            self.touchFlag = true

            self.lastPoint.push(self.arr[i])

            self.restPoint.splice(i, 1)

            break

          }

        }

      },

      false

    )

    this.canvas.addEventListener(

      'touchmove',

      function(e) {

        if (self.touchFlag) {

          self.update(self.getPosition(e))

        }

      },

      false

    )

    this.canvas.addEventListener(

      'touchend',

      function(e) {

        if (self.touchFlag) {

          self.storePass(self.lastPoint)

          setTimeout(function() {

            self.reset()

          }, 300)

        }

      },

      false

    )

  }

  canvasLock.prototype.storePass = function() {

    if (this.checkPass()) {

      document.getElementById('title').innerHTML = '解锁成功'

      window.location.href = 'http://localhost:8080/home'

      this.drawStatusPoint('lightgreen')

    } else {

      this.errrorSum++

      if (this.errrorSum === 5) {

        let num = 30

        this.isOk = false

        let time = setInterval(() => {

          num--

          document.getElementById('title').innerHTML = `${num}秒后方可继续解锁`

          if (num === 0) {

            document.getElementById('title').innerHTML = `绘制图案解锁`

          }

        }, 1000)

        setTimeout(() => {

          this.isOk = true

          this.errrorSum = 0

          clearInterval(time)

        }, 30000)

      } else if (this.errrorSum <) {

        document.getElementById('title').innerHTML = '解锁失败'

        this.drawStatusPoint('orange')

      }

    }

  }

  //判断输入的密码

  canvasLock.prototype.checkPass = function() {

    var p1 = '72943816', //成功的密码

      p2 = ''

    for (var i = 0; i < this.lastPoint.length; i++) {

      p2 += this.lastPoint[i].index

    }

    return p1 === p2

  }

  //绘制判断结束后的状态

  canvasLock.prototype.drawStatusPoint = function(type) {

    for (var i = 0; i < this.lastPoint.length; i++) {

      this.ctx.strokeStyle = type

      this.ctx.beginPath()

      this.ctx.arc(

        this.lastPoint[i].x,

        this.lastPoint[i].y,

        this.r,

        0,

        2 * Math.PI,

        true

      )

      this.ctx.closePath()

      this.ctx.stroke()

    }

  }

  //程序全部结束后重置

  canvasLock.prototype.reset = function() {

    this.createCircle()

  }

  //获取鼠标点击处离canvas的距离

  canvasLock.prototype.getPosition = function(e) {

    var rect = e.currentTarget.getBoundingClientRect()

    var po = {

      x: e.touches[0].clientX - rect.left,

      y: e.touches[0].clientY - rect.top

    }

    return po

  }

  //触摸点移动时的动画

  canvasLock.prototype.update = function(po) {

    if (this.isOk) {

      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

      for (var i = 0; i < this.arr.length; i++) {

        this.drawCircle(this.arr[i].x, this.arr[i].y)

      }

      this.drawPoint()

      this.drawLine(po) //画线

      for (var i = 0; i < this.restPoint.length; i++) {

        if (

          Math.abs(po.x - this.restPoint[i].x) < this.r &&

          Math.abs(po.y - this.restPoint[i].y) < this.r

        ) {

          this.lastPoint.push(this.restPoint[i])

          this.restPoint.splice(i, 1)

          break

        }

      }

    }

  }

  //画实心圆

  canvasLock.prototype.drawPoint = function() {

    for (var i = 0; i < this.lastPoint.length; i++) {

      this.ctx.fillStyle = '#abcdef'

      this.ctx.beginPath()

      this.ctx.arc(

        this.lastPoint[i].x,

        this.lastPoint[i].y,

        this.r / 2,

        0,

        2 * Math.PI,

        true

      )

      this.ctx.closePath()

      this.ctx.fill()

    }

  }

  //画线

  canvasLock.prototype.drawLine = function(po) {

    this.ctx.beginPath()

    this.lineWidth = 3

    this.ctx.moveTo(

      this.lastPoint[0] ? this.lastPoint[0].x : '',

      this.lastPoint[0] ? this.lastPoint[0].y : ''

    ) //线条起点

    for (var i = 1; i < this.lastPoint.length; i++) {

      this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y)

    }

    this.ctx.lineTo(po.x, po.y) //触摸点

    this.ctx.stroke()

    this.ctx.closePath()

  }

  canvasLock.prototype.init = function() {

    this.initDom()

    this.canvas = document.getElementById('canvas')

    this.ctx = this.canvas.getContext('2d')

    this.touchFlag = false

    this.createCircle()

    this.bindEvent()

  }

})()

new canvasLock({ circleNum: 3 }).init()

<template></template>

<script>

import '@/component/unlock'

export default {

  created() {

    document.getElementById('unlock').style.display = 'block'

  },

  beforeDestroy() {

    document.getElementById('unlock').style.display = 'none'

  }

}

</script>

<style>

body {

  background: #2d3a4b;

  text-align: center;

}

</style>