4dkankan_official/src/components/Linecanvas/index.vue

<template>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>

let speed = 20

export default {
  props: {
    canvasWidth: {
      default: 1091,
      type: Number
    },
    canvasHeight: {
      default: 626,
      type: Number
    },
    start: {
      default: false
    }
  },
  data () {
    let devicePixelRatio = window.devicePixelRatio || 1
    let lineTxt = [
      {
        posi: [840, 290],
        val: '3.2米',
        guideLine: [{
          type: 'm',
          val: [790, 320]
        },
        {
          type: 'l',
          val: [800, 280]
        },
        {
          type: 'l',
          val: [815, 280]
        } ]
      },
      {
        posi: [690, 395],
        val: '5.4米',
        guideLine: [{
          type: 'm',
          val: [640, 425]
        },
        {
          type: 'l',
          val: [650, 385]
        },
        {
          type: 'l',
          val: [665, 385]
        } ]
      },
      {
        posi: [920, 470],
        val: '3.4米',
        guideLine: [{
          type: 'm',
          val: [870, 490]
        },
        {
          type: 'l',
          val: [880, 460]
        },
        {
          type: 'l',
          val: [895, 460]
        } ]
      }
    ]

    let lineArr2 = [
      [{
        type: 'm',
        val: [790, 430]
      },
      {
        type: 'l',
        val: [790, 85]
      } ],

      [{
        type: 'm',
        val: [790, 430]
      }, {
        type: 'l',
        val: [35, 400]
      }, {
        type: 'l',
        val: [0, 420]
      } ],

      [{
        type: 'm',
        val: [790, 430]
      }, {
        type: 'l',
        val: [1045, 626]
      }]
    ]

    let testArr2 = []
    let tempA = lineArr2.concat(lineTxt)
    tempA.forEach(() => {
      testArr2.push([])
    })
    // 这里存放数据
    return {
      realWidth: 1091,
      realHeigth: 626,
      devicePixelRatio,
      interval: null,
      index: 0,
      testArr: [],
      testArr2,
      lineArr2,
      lineTxt,
      arr: []
    }
  },
  computed: {
    imgWidth () {
      return this.canvasWidth
    },
    imgHeight () {
      return this.canvasHeight
    },
    fixCanvasWidth () {
      return this.canvasWidth * this.devicePixelRatio
    },
    fixCanvasHeight () {
      return this.canvasHeight * this.devicePixelRatio
    },
    img () {
      let img = new Image()
      img.src = require('@/assets/images/fjqxd.png')
      return img
    },
    ctx () {
      var mycanvas = document.getElementById('canvas')
      var ctx = mycanvas.getContext('2d')
      mycanvas.setAttribute('width', this.fixCanvasWidth)
      mycanvas.setAttribute('height', this.fixCanvasHeight)
      mycanvas.style.width = this.imgWidth + 'px'
      mycanvas.style.height = this.imgHeight + 'px'
      return ctx
    },
    lineArr () {
      return [
        {
          type: 'm',
          val: [790, 430]
        }, {
          type: 'l',
          val: [790, 90]
        }, {
          type: 'l',
          val: [890, 0]
        }, {
          type: 'm',
          val: [790, 90]
        }, {
          type: 'l',
          val: [35, 110]
        }, {
          type: 'l',
          val: [0, 100]
        },
        {
          type: 'm',
          val: [790, 430]
        }, {
          type: 'l',
          val: [35, 400]
        }, {
          type: 'l',
          val: [0, 420]
        }, {
          type: 'm',
          val: [35, 400]
        }, {
          type: 'l',
          val: [35, 110]
        },
        {
          type: 'm',
          val: [790, 430]
        }, {
          type: 'l',
          val: [1045, 626]
        },
        {
          type: 'm',
          val: [110, 150]
        },
        {
          type: 'l',
          val: [110, 350]
        },
        {
          type: 'l',
          val: [305, 350]
        },
        {
          type: 'l',
          val: [305, 150]
        },
        {
          type: 'l',
          val: [110, 150]
        },
        {
          type: 'm',
          val: [440, 150]
        },
        {
          type: 'l',
          val: [438, 360]
        },
        {
          type: 'l',
          val: [540, 362]
        },
        {
          type: 'l',
          val: [540, 150]
        },
        {
          type: 'l',
          val: [440, 150]
        },
        {
          type: 'm',
          val: [635, 150]
        },
        {
          type: 'l',
          val: [630, 423]
        },
        {
          type: 'l',
          val: [765, 428]
        },
        {
          type: 'l',
          val: [770, 150]
        },
        {
          type: 'l',
          val: [635, 150]
        }
      ]
    }
  },
  watch: {
    start (newVal) {
      if (newVal) {
        this.index = 0
        let t = this.lineArr2.concat(this.lineTxt)
        this.testArr2 = null
        this.testArr2 = t.map(item => {
          return []
        })

        this.animated()
      } else {
        this.init()
      }
    }
  },
  methods: {
    animated () {
      let drawTxt = () => {
        this.ctx.font = 'normal 16px Arial'
        this.ctx.textAlign = 'center'
        this.ctx.textBaseline = 'bottom'
        this.ctx.fillStyle = '#fff'
        this.ctx.strokeStyle = '#1fe4dc'
        this.ctx.lineWidth = 1

        this.lineTxt.forEach(item => {
          this.ctx.fillText(item.val, item.posi[0], item.posi[1])
        })
      }

      let drawLine = arr => {
        this.ctx.clearRect(0, 0, this.fixCanvasWidth, this.fixCanvasHeight)
        this.ctx.drawImage(this.img,
          0,
          0,
          this.realWidth,
          this.realHeigth,
          (this.fixCanvasWidth - this.imgWidth * this.devicePixelRatio) / 2,
          0,
          this.imgWidth * this.devicePixelRatio,
          this.imgHeight * this.devicePixelRatio
        )
        this.ctx.strokeStyle = '#1fe4dc'
        this.ctx.lineWidth = 2
        this.ctx.beginPath()

        arr.forEach((item, index) => {
          item.forEach(i => {
            if (i.type === 'm') {
              this.ctx.moveTo(i.val[0], i.val[1])
              this.ctx.stroke()
              this.ctx.beginPath()
              if (index < myArr.length) {
                this.ctx.lineWidth = 2.5
              } else {
                this.ctx.lineWidth = 1
              }
            } else {
              this.ctx.lineTo(i.val[0], i.val[1])
            }
          })
        })
        this.ctx.stroke()
      }

      let getCutArr = () => {
        let arr = []
        this.lineArr2.forEach(() => {
          arr.push([])
        })
        let intervalX, intervalY
        this.lineArr2.forEach((item, index) => {
          item.forEach((sub, idx) => {
            if (sub.type === 'm') {
              arr[index].push(sub)
            }
            if (idx < this.lineArr2[index].length - 1) {
              if (this.lineArr2[index][idx + 1]['type'] !== 'm') {
                intervalX = (this.lineArr2[index][idx + 1]['val'][0] - this.lineArr2[index][idx]['val'][0]) / speed
                intervalY = (this.lineArr2[index][idx + 1]['val'][1] - this.lineArr2[index][idx]['val'][1]) / speed
                let i = 0
                while (i <= speed) {
                  arr[index].push(Object.assign({}, sub, {
                    val: [this.lineArr2[index][idx]['val'][0] + i * intervalX, this.lineArr2[index][idx]['val'][1] + i * intervalY],
                    type: 'l'
                  }))
                  i++
                }
              }
            }
          })
        })
        return arr
      }

      let getGuideArr = () => {
        let arr = []
        this.lineTxt.forEach(() => {
          arr.push([])
        })
        let intervalX, intervalY
        this.lineTxt.forEach((item, index) => {
          item.guideLine.forEach((sub, idx) => {
            let lt = this.lineTxt[index]['guideLine']
            if (sub.type === 'm') {
              arr[index].push(sub)
            }
            if (idx < lt.length - 1) {
              if (lt[idx + 1]['type'] !== 'm') {
                intervalX = (lt[idx + 1]['val'][0] - lt[idx]['val'][0]) / speed
                intervalY = (lt[idx + 1]['val'][1] - lt[idx]['val'][1]) / speed
                let i = 0
                while (i <= speed) {
                  arr[index].push(Object.assign({}, sub, {
                    val: [lt[idx]['val'][0] + i * intervalX, lt[idx]['val'][1] + i * intervalY],
                    type: 'l'
                  }))
                  i++
                }
              }
            }
          })
        })
        return arr
      }

      let guideArr = getGuideArr()

      let myArr = getCutArr()
      console.log(myArr)

      let maxLength = 0
      let guideLength = 0

      myArr.forEach(item => {
        maxLength = Math.max(item.length, maxLength)
      })
      guideArr.forEach(item => {
        guideLength = Math.max(item.length, guideLength)
      })
      let draw = () => {
        if (!this.start) {
          return
        }
        if (this.index === maxLength + guideLength) {
          setTimeout(() => {
            drawTxt()
          }, 300)
          return
        }
        myArr.forEach((item, index) => {
          item.forEach((sub, idx) => {
            item[this.index] && this.testArr2[index].push(item[this.index])
          })
        })

        if (this.index >= maxLength) {
          guideArr.forEach((item, index) => {
            item.forEach((sub, idx) => {
              item[this.index - maxLength] && this.testArr2[myArr.length + index].push(item[this.index - maxLength])
            })
            console.log(this.testArr2)
          })
        }
        this.index++
        drawLine(this.testArr2)

        requestAnimationFrame(draw)
      }
      draw()
    },
    init () {
      this.ctx.clearRect(0, 0, this.fixCanvasWidth, this.fixCanvasHeight)
      this.ctx.drawImage(this.img,
        0,
        0,
        this.realWidth,
        this.realHeigth,
        (this.fixCanvasWidth - this.imgWidth * this.devicePixelRatio) / 2,
        0,
        this.imgWidth * this.devicePixelRatio,
        this.imgHeight * this.devicePixelRatio
      )
    }
  },
  mounted () {
    this.img.onload = () => {
      this.ctx.clearRect(0, 0, this.fixCanvasWidth, this.fixCanvasHeight)
      this.ctx.drawImage(this.img,
        0,
        0,
        this.realWidth,
        this.realHeigth,
        (this.fixCanvasWidth - this.imgWidth * this.devicePixelRatio) / 2,
        0,
        this.imgWidth * this.devicePixelRatio,
        this.imgHeight * this.devicePixelRatio
      )
      // this.ctx.strokeStyle = '#1fe4dc'
      // this.ctx.lineWidth = 5
      // this.ctx.beginPath()

      // // arr1
      // this.ctx.moveTo(790, 430)
      // this.ctx.lineTo(790, 90)
      // this.ctx.lineTo(890, 0)
      // this.ctx.moveTo(790, 90)
      // this.ctx.lineTo(35, 110)
      // this.ctx.lineTo(0, 100)

      // // arr2
      // this.ctx.moveTo(790, 430)
      // this.ctx.lineTo(35, 400)
      // this.ctx.lineTo(0, 420)
      // this.ctx.moveTo(35, 400)
      // this.ctx.lineTo(35, 110)

      // // arr3
      // this.ctx.moveTo(790, 430)
      // this.ctx.lineTo(1045, 626)
      // this.ctx.stroke()
    }
    // this.animated()
  }
}
</script>

<style scoped>

</style>