<template>
  <div ref="rectangleCanvas" style="position:relative ;z-index: 999;color: #fff;">
    <img ref="imgs" :src="AngleUrl" alt=""
      style="width:100%;height:calc(100% - 40px);position:absolute;top: 0px;left: 0;display:block;">
    <canvas ref="myCanvas" class="myCanvas" width="1280" height="720" @click="canClick($event)"
      @mousedown="mouseDown($event)" @mouseup="mouseUp($event)" @mousemove="mouseMove($event)"
      @contextmenu.prevent="contextMenu($event)" @mouseout="mouseOut($event)">
    </canvas>
    <canvas id="canvasSave" ref="canvasSave" width="1280" height="720"></canvas>
    <div style="display: flex;align-items: center;height: 40px;color: #000;padding-left: 15px;">
      <el-switch v-model="isRectangle" active-color="#009bff" inactive-color="#ff4949" active-text="矩形"
        inactive-text="多边形" @change="num = null">
      </el-switch>
      <el-button type="primary" style="margin-left:10px" @click="deleteCanvas">清空全部选区</el-button>
      <el-button type="primary" :disabled="num == null" style="margin-left:10px" @click="delPiece">删除{{ isRectangle ? '矩形'
        : '多边形' }}</el-button>
      <el-button type="primary" style="margin-left:10px" @click="closeMaintenanceArea">确定</el-button>
    </div>

  </div>
</template>

<script>
export default {
  props: ['AngleUrl', 'Custom3'],
  name: 'rectangleCanvas',
  data() {
    return {
      imgW: '',
      imgH: '',
      isRectangle: true,
      min_temp: '',
      max_temp: '',
      min_angle: '',
      max_angle: '',

      // 矩形
      can: '',
      ctx: '',
      ctxSave: '',
      canSave: '',
      tagObj: {
        newrecsObj: {},
        recs: [],  //两个矩形的宽高与坐标
        x: 0,
        y: 0,
        url: '',
        radious: 5,
        recSize: 5,
        drag: false,
        resize: false,
        draw: false,
        showLitRecs: true,
        index: -1,
        side: 0,
        startX: 0,
        startY: 0,
        isRightClick: false
      },

      // 多边形
      pointX: '',
      pointY: '',
      point: [],
      num: null,
      pointArr: [], // 存放坐标的数组
      oIndex: -1 //判断鼠标是否移动到起始点处，-1为否，1为是
    }
  },
  methods: {
    setMinAngle() {
      this.min_angle = this.draw_angle
      // this.$emit('setMinAngle',this.min_angle)
    },
    setMaxAngle() {
      this.max_angle = this.draw_angle
      // this.$emit('setMaxAngle',this.max_angle)
    },
    closeMaintenanceArea() {
      let custom3 = []
      let point = []
      
      this.point.forEach(element => {
        let arr = []
        element.forEach(element1 => {
          arr.push({
            x: Math.round(element1.x * (this.imgW / 1280)),
            y: Math.round(element1.y * (this.imgH / this.$refs.myCanvas.height))
          })
        })
        point.push(arr)
      });
      custom3.push({
        name: '多边形',
        data: point
      })
      let arr = []
      this.tagObj.recs.forEach(element => {
        let arr1 = []
        let x = element.x, y = element.y
        arr1.push({
          x: Math.round(x * (this.imgW / 1280)),
          y: Math.round(y * (this.imgH / this.$refs.myCanvas.height))
        })
        arr1.push({
          x: Math.round(x * (this.imgW / 1280) + (element.w * (this.imgW / 1280))),
          y: Math.round(y * (this.imgH / this.$refs.myCanvas.height))
        })
        arr1.push({
          x: Math.round(x * (this.imgW / 1280) + (element.w* (this.imgW / 1280))),
          y: Math.round(y * (this.imgH / this.$refs.myCanvas.height) + (element.h * (this.imgH / this.$refs.myCanvas.height)))
        })
        arr1.push({
          x: Math.round(x * (this.imgW / 1280)),
          y: Math.round(y * (this.imgH / this.$refs.myCanvas.height) + (element.h * (this.imgH / this.$refs.myCanvas.height)))
        })
        arr.push(arr1)
      });
      custom3.push({
        name: '矩形',
        data: arr
      })
      let info = {
        custom3: JSON.stringify(custom3),
      }
      this.$emit('closeMaintenanceArea', info)
    },



    mouseOut(e) {
      if (this.isRectangle == true) {
        let dom = this.$refs.myCanvas
        let x = e.clientX
        let y = e.clientY
        let domx1 = dom.offsetLeft
        let domy1 = dom.offsetTop
        let domx2 = dom.offsetLeft + dom.offsetWidth
        let domy2 = dom.offsetTop + dom.offsetHeight
        if (x < domx1 || x > domx2 || y < domy1 || y > domy2) {
          this.clearCanvas(this.$refs.myCanvas, this.ctx)
          this.drawOldRecs(this.tagObj.recs, this.ctx, this.num)
        }
      }
    },
    canClick(e) {
      if (this.isRectangle == true) {
        this.clearCanvas(this.$refs.myCanvas, this.ctx)
        this.num = this.getEventIndex(this.tagObj.recs, e.offsetX, e.offsetY, this.tagObj.radious)
        this.drawOldRecs(this.tagObj.recs, this.ctx, this.num) //必须放在moveRec之下
      } else {
        var isdraw = true
        let arr = []
        for (var i = 0; i < this.point.length; i++) {
          var polygon = this.point[i]
          arr.push(this.rayCasting([e.offsetX, e.offsetY], polygon))
        }
        arr.forEach((element, index) => {
          if (element == true) {
            isdraw = false
            this.num = index
          }
        })
        for (let i = 0; i < this.point.length; i++) {
          this.canvasSave(this.point[i], i)
        }
        if (isdraw) {
          if (e.offsetX || e.layerX) {
            this.pointX = e.offsetX == undefined ? e.layerX : e.offsetX
            this.pointY = e.offsetY == undefined ? e.layerY : e.offsetY
            var piX, piY
            if (this.oIndex > 0 && this.pointArr.length > 0) {
              piX = this.pointArr[0].x
              piY = this.pointArr[0].y
              //画点
              // this.makearc(this.ctx, piX, piY, this.GetRandomNum(2, 2), 0, 180, 'rgb(32, 159, 132)')
              this.pointArr.push({ x: piX, y: piY })
              this.canvasSave(this.pointArr) // 保存点线同步到另一个canvas
              this.point.push(this.pointArr)
              this.saveCanvas() // 生成画布
            } else {
              piX = this.pointX
              piY = this.pointY
              // this.makearc(this.ctx, piX, piY, this.GetRandomNum(2, 2), 0, 180, 'rgb(32, 159, 132)')
              this.pointArr.push({ x: piX, y: piY })
              this.canvasSave(this.pointArr) // 保存点线同步到另一个canvas
            }
          }
        }
      }
    },
    mouseDown(e) {
      if (this.isRectangle == true) {
        this.tagObj.x = e.offsetX
        this.tagObj.y = e.offsetY
        this.tagObj.index = this.getEventIndex(this.tagObj.recs, this.tagObj.x, this.tagObj.y, this.tagObj.radious) //得到落点所在框的序数
        if (e.button == 2) {
          if (this.tagObj.index >= 0) {
            this.tagObj.isRightClick = true
          }
          return
        }
        if (this.tagObj.index >= 0) { //移动或者放缩
          this.tagObj.startX = this.tagObj.recs[this.tagObj.index].x
          this.tagObj.startY = this.tagObj.recs[this.tagObj.index].y
          this.tagObj.side = this.getEventArea(this.tagObj.recs[this.tagObj.index], this.tagObj.x, this.tagObj.y, this.tagObj.radious) //得到落点在一个框中的区域
          if (this.tagObj.side < 9) { //准备缩放
            this.tagObj.resize = true
          } else { //准备拖动
            this.tagObj.drag = true
          }
          this.drawLitRecs(this.ctx, this.prepareLitRecs(this.tagObj.recs[this.tagObj.index]), this.tagObj.recSize) //画移动小框
        } else {
          this.tagObj.draw = true
        }
        this.changeResizeCursor(this.$refs.myCanvas, this.tagObj.side) //判断小框类型
      }
    },
    mouseUp(e) {
      if (this.isRectangle == true) {
        if (this.tagObj.isRightClick == true) {
          this.tagObj.index = this.getEventIndex(this.tagObj.recs, this.tagObj.x, this.tagObj.y, this.tagObj.radious)
          this.tagObj.recs.splice(this.tagObj.index, 1)
          this.clearCanvas(this.$refs.myCanvas, this.ctx)
          for (var i = 0; i < this.tagObj.recs.length; i++) {
            // if(this.tagObj.recs[i].w ==0 && this.tagObj.recs[i].h == 0) {
            //   this.tagObj.recs.splice(i,1)
            //   i--
            // }
            this.ctx.strokeRect(this.tagObj.recs[i].x, this.tagObj.recs[i].y, this.tagObj.recs[i].w, this.tagObj.recs[i].h)
          }
          this.tagObj.isRightClick = false
          return
        }
        this.tagObj.resize = false
        this.tagObj.drag = false
        if (this.tagObj.draw) {
          this.addToRecs(this.$refs.myCanvas, e) //添加框
          this.tagObj.draw = false
        }
      }
    },
    mouseMove(e) {
      if (this.isRectangle == true) {
        var index
        var side
        this.clearCanvas(this.$refs.myCanvas, this.ctx)
        index = this.getEventIndex(this.tagObj.recs, e.offsetX, e.offsetY, this.tagObj.radious)
        this.drawOldRecs(this.tagObj.recs, this.ctx, this.num) //必须放在moveRec之下
        if (index > -1) {
          side = this.getEventArea(this.tagObj.recs[index], e.offsetX, e.offsetY, this.tagObj.radious) //得到落点在一个框中的区域
        } else {
          side = 0
        }
        this.changeResizeCursor(this.$refs.myCanvas, side)
        if (this.tagObj.showLitRecs && index >= 0 && side > 0) {
          this.drawLitRecs(this.ctx, this.prepareLitRecs(this.tagObj.recs[index]), this.tagObj.recSize)
        }
        if (this.tagObj.draw) {
          this.drawRec(this.$refs.myCanvas, this.ctx, e)
        }
        if (this.tagObj.drag) {
          this.moveRec(this.$refs.myCanvas, this.tagObj.recs[this.tagObj.index], e)
        }
        if (this.tagObj.resize) {
          this.reSizeRec(this.tagObj.side, this.tagObj.recs[this.tagObj.index], e.offsetX, e.offsetY, this.tagObj.recSize)
        }
      } else {
        if (e.offsetX || e.layerX) {
          this.pointX = e.offsetX == undefined ? e.layerX : e.offsetX
          this.pointY = e.offsetY == undefined ? e.layerY : e.offsetY
          var piX, piY
          /*清空画布*/
          this.ctx.clearRect(0, 0, this.can.width, this.can.height)
          /*鼠标下跟随的圆点*/
          // this.makearc(this.ctx, this.pointX, this.pointY, this.GetRandomNum(4, 4), 0, 180, 'rgb(32, 159, 132)')
          this.drawOldRecs(this.tagObj.recs, this.ctx);

          let arr = []
          for (var i = 0; i < this.point.length; i++) {
            var polygon = this.point[i]
            arr.push(this.rayCasting([e.offsetX, e.offsetY], polygon))
          }
          if (this.pointArr.length > 0) {
            if ((this.pointX > this.pointArr[0].x - 15 && this.pointX < this.pointArr[0].x + 15) && (this.pointY > this.pointArr[0].y - 15 && this.pointY < this.pointArr[0].y + 15)) {
              if (this.pointArr.length > 1) {
                piX = this.pointArr[0].x
                piY = this.pointArr[0].y
                this.ctx.clearRect(0, 0, this.can.width, this.can.height)
                this.drawOldRecs(this.tagObj.recs, this.ctx);
                // this.makearc(this.ctx, piX, piY, this.GetRandomNum(4, 4), 0, 180, 'rgb(32, 159, 132)')
                this.oIndex = 1
              }
            } else {
              piX = this.pointX
              piY = this.pointY
              this.oIndex = -1
            }
            /*开始绘制*/
            this.ctx.beginPath()
            this.ctx.moveTo(this.pointArr[0].x, this.pointArr[0].y)
            if (this.pointArr.length > 1) {
              for (var i = 1; i < this.pointArr.length; i++) {
                this.ctx.lineTo(this.pointArr[i].x, this.pointArr[i].y)
              }
            }
            this.ctx.lineTo(piX, piY)
            // this.ctx.fillStyle = 'rgba(32, 159, 132,.3)'//填充颜色
            // this.ctx.fill()//填充
            this.ctx.stroke()//绘制
          }
        }
      }
    },
    contextMenu(e) {
      if (this.isRectangle == true) {
        return false
      }
    },
    getEventIndex(recs, x, y, radious) { //得到落点所在框的序数，-1代表没有落在任何框内 ，  // x初始值为0，y初始值为0
      if (recs.length == 0) {
        return -1
      }
      for (var i = 0; i < recs.length; i++) {
        if (x > (recs[i].x - radious) && x < (recs[i].x + recs[i].w + radious) &&
          y > (recs[i].y - radious) && y < (recs[i].y + recs[i].h + radious)) {
          return i
        }
        if (i == recs.length - 1) {
          return -1
        }
      }
    },
    clearCanvas(canvas, ctx) {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    getEventArea(data, x, y, radious) { //得到落点在一个框中的区域
      if (x > (data.x - radious) && x < (data.x + radious)) {
        if (y > (data.y - radious) && y < (data.y + radious)) {
          return 1
        } else if (y > (data.y + radious) && y < (data.y + data.h - radious)) {
          return 2
        } else if (y > (data.y + data.h - radious) && y < (data.y + data.h + radious)) {
          return 3
        }
      } else if (x > (data.x + data.w - radious) && x < (data.x + data.w + radious)) {
        if (y > (data.y - radious) && y < (data.y + radious)) {
          return 4
        } else if (y > (data.y + radious) && y < (data.y + data.h - radious)) {
          return 5
        } else if (y > (data.y + data.h - radious) && y < (data.y + data.h + radious)) {
          return 6
        }
      } else {
        if (y > (data.y - radious) && y < (data.y + radious) && x > (data.x + radious) && x < (data.x + data.w - radious)) {
          return 7
        } else if (y > (data.y + data.h - radious) && y < (data.y + data.h + radious) && x > (data.x + radious) && x < (data.x + data.w - radious)) {
          return 8
        } else {
          return 9
        }
      }
    },
    drawLitRecs(ctx, data, size) { //画移动时的小框,data为矩形框9个点的坐标
      this.ctx.strokeStyle = '#009bff'
      for (var i = 0; i < data.length; i++) {
        ctx.strokeRect(data[i][0] - size / 2, data[i][1] - size / 2, size, size)
      }
    },
    changeResizeCursor(canvas, index) {
      switch (index) {
        case 0:
          canvas.style.cursor = 'crosshair'
          break
        case 1:
          canvas.style.cursor = 'se-resize'
          break
        case 2:
          canvas.style.cursor = 'e-resize'
          break
        case 3:
          canvas.style.cursor = 'ne-resize'
          break
        case 4:
          canvas.style.cursor = 'sw-resize'
          break
        case 5:
          canvas.style.cursor = 'w-resize'
          break
        case 6:
          canvas.style.cursor = 'nw-resize'
          break
        case 7:
          canvas.style.cursor = 's-resize'
          break
        case 8:
          canvas.style.cursor = 'n-resize'
          break
        case 9:
          canvas.style.cursor = 'move'
          break
        default:
          canvas.style.cursor = 'default'
      }
    },
    addToRecs(canvas, e) {
      var rec = {}
      rec.x = (this.tagObj.x > e.offsetX) ? e.offsetX : this.tagObj.x
      rec.y = (this.tagObj.y > e.offsetY) ? e.offsetY : this.tagObj.y
      rec.w = Math.abs(e.offsetX - this.tagObj.x)
      rec.h = Math.abs(e.offsetY - this.tagObj.y)
      if (rec.w == 0 && rec.h == 0) return
      this.tagObj.newrecsObj = rec
      this.tagObj.recs.push(this.tagObj.newrecsObj)
      this.tagObj.url = canvas.toDataURL()
    },
    prepareLitRecs(data) { //把一个框的左上角坐标和宽高输入，得到8个坐标，左3，右3中2
      var li = []
      li[0] = [data.x, data.y]
      li[1] = [data.x, data.y + data.h / 2]
      li[2] = [data.x, data.y + data.h]
      li[3] = [data.x + data.w, data.y]
      li[4] = [data.x + data.w, data.y + data.h / 2]
      li[5] = [data.x + data.w, data.y + data.h]
      li[6] = [data.x + data.w / 2, data.y]
      li[7] = [data.x + data.w / 2, data.y + data.h]
      return li
    },
    drawOldRecs(recs, ctx, index) { //鼠标画图后
      if (recs.length == 0) {
        return 0
      }
      for (var i = 0; i < recs.length; i++) {
        this.ctx.beginPath()
        ctx.lineWidth = 4
        if (index == i) {
          ctx.strokeStyle = '#009bff'
        } else {
          ctx.strokeStyle = '#009bff'
        }
        ctx.strokeRect(recs[i].x, recs[i].y, recs[i].w, recs[i].h)
      }
    },
    drawRec(canvas, ctx, e) { //画图
      ctx.strokeRect(this.tagObj.x, this.tagObj.y, e.offsetX - this.tagObj.x, e.offsetY - this.tagObj.y)
    },
    moveRec(canvas, rec, e) {
      rec.x = this.tagObj.startX + e.offsetX - this.tagObj.x
      rec.y = this.tagObj.startY + e.offsetY - this.tagObj.y
    },
    reSizeRec(index, rec, ex, ey, recSize) {
      var temX = rec.x
      var temY = rec.y
      if (index < 4 && temX + rec.w - ex > recSize) {
        rec.x = ex
      }
      if ((index == 1 || index == 4 || index == 7) && temY + rec.h - ey > recSize) {
        rec.y = ey
      }
      if (index < 4) {
        if (temX + rec.w - ex > recSize) {
          rec.w = temX + rec.w - ex
        }
      } else if (index < 7) {
        if (ex - temX > recSize) {
          rec.w = ex - temX
        }
      }
      if (index == 1 || index == 4 || index == 7) {
        if (temY + rec.h - ey > recSize) {
          rec.h = temY + rec.h - ey
        }
      } else if (index == 3 || index == 6 || index == 8) {
        if (ey - temY > recSize) {
          rec.h = ey - temY
        }
      }
    },


    // 清空
    deleteCanvas() {
      this.ctx.clearRect(0, 0, this.can.width, this.can.height)
      this.ctxSave.clearRect(0, 0, this.canSave.width, this.canSave.height)
      this.point = []
      this.pointArr = []
      this.tagObj.recs = []
    },
    delPiece() {
      if (this.isRectangle == true) {
        this.clearCanvas(this.$refs.myCanvas, this.ctx)
        for (let i = 0; i < this.tagObj.recs.length; i++) {
          if (i == this.num) {
            this.tagObj.recs.splice(i, 1)
            this.drawOldRecs(this.tagObj.recs, this.ctx) //必须放在moveRec之下
          }
        }
        this.num = null
      } else {
        this.ctx.clearRect(0, 0, this.can.width, this.can.height);
        this.ctxSave.clearRect(0, 0, this.canSave.width, this.canSave.height);
        this.pointArr = [];
        if (this.num != null) {
          this.point.splice(this.num, 1)
          if (this.point.length == 0) {
            this.ctx.clearRect(0, 0, this.can.width, this.can.height)
            this.ctxSave.clearRect(0, 0, this.canSave.width, this.canSave.height)
            this.pointArr = []
          } else {
            for (let i = 0; i < this.point.length; i++) {
              // this.makearc(this.ctx, this.point[i].x, this.point[i].y, this.GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');
              this.canvasSave(this.point[i]);
            }
          }
        }
        this.num = null
        this.drawOldRecs(this.tagObj.recs, this.ctx) //必须放在moveRec之下
      }
    },
    // 多边形
    // 存储已生成的点线
    canvasSave(pointArr, index) {
      this.ctxSave.clearRect(0, 0, this.ctxSave.width, this.ctxSave.height)
      this.ctxSave.lineWidth = 4 // 线条粗细
      this.ctxSave.beginPath()
      this.ctxSave.moveTo(pointArr[0].x, pointArr[0].y)
      for (var i = 1; i < pointArr.length; i++) {
        if (index != null) {
          if (index == this.num) {
            this.ctx.strokeStyle = '#009bff'
            this.ctxSave.strokeStyle = '#009bff'
          } else {
            this.ctx.strokeStyle = '#009bff'
            this.ctxSave.strokeStyle = '#009bff'
          }
        } else {
          this.ctx.strokeStyle = '#009bff'
          this.ctxSave.strokeStyle = '#009bff'
        }
        this.ctxSave.lineTo(pointArr[i].x, pointArr[i].y)
        this.ctxSave.fillStyle = 'rgba(32, 159, 132,0)' // 填充颜色
        // this.ctxSave.fill()
        this.ctxSave.stroke()//绘制
      }
      this.ctxSave.closePath()
    },
    /*生成画布 结束绘画*/
    saveCanvas() {
      this.ctx.clearRect(0, 0, this.can.width, this.can.height)
      this.ctxSave.closePath()//结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来
      this.ctxSave.lineWidth = 4 // 线条粗细
      this.ctxSave.fill()//填充
      this.ctxSave.stroke()//绘制
      this.pointArr = []
    },
    /**
  * p :[x,y] ,带判定的P点
  * poly: [[x0,y0],[x1,y1]......] 多边形的路径
  */
    rayCasting(p, poly) {
      // px，py为p点的x和y坐标
      let px = p[0],
        py = p[1],
        flag = false

      //这个for循环是为了遍历多边形的每一个线段
      for (let i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
        let sx = poly[i].x, //线段起点x坐标
          sy = poly[i].y, //线段起点y坐标
          tx = poly[j].x, //线段终点x坐标
          ty = poly[j].y //线段终点y坐标

        // 点与多边形顶点重合
        if ((sx === px && sy === py) || (tx === px && ty === py)) {
          return true
        }
        // 点的射线和多边形的一条边重合，并且点在边上
        if (
          sy === ty &&
          sy === py &&
          ((sx > px && tx < px) || (sx < px && tx > px))
        ) {
          return true
        }
        // 判断线段两端点是否在射线两侧
        if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
          // 求射线和线段的交点x坐标，交点y坐标当然是py
          let x = sx + ((py - sy) * (tx - sx)) / (ty - sy)
          // 点在多边形的边上
          if (x === px) {
            return true
          }
          // x大于px来保证射线是朝右的，往一个方向射，假如射线穿过多边形的边界，flag取反一下
          if (x > px) {
            flag = !flag
          }
        }
      }
      // 射线穿过多边形边界的次数为奇数时点在多边形内
      return flag ? true : false
    },

    /*canvas生成圆点*/
    GetRandomNum(Min, Max) {
      var Range = Max - Min
      var Rand = Math.random()
      return (Min + Math.round(Rand * Range))
    },
    makearc(ctx, x, y, r, s, e, color) {
      ctx.clearRect(0, 0, 199, 202) // 清空画布
      ctx.beginPath()
      ctx.fillStyle = color
      ctx.arc(x, y, r, s, e)
      ctx.fill()
    },
    getImg() {
      let that = this
      var img = this.$refs.imgs
      this.$refs.imgs.onload = function () {
        that.imgW = img.naturalWidth
        that.imgH = img.naturalHeight
        that.$refs.rectangleCanvas.style.height = Math.ceil(img.naturalHeight / img.naturalWidth * 1280) + 40 + 'px'
        that.$refs.myCanvas.height = Math.ceil(img.naturalHeight / img.naturalWidth * 1280)
        that.$refs.canvasSave.height = Math.ceil(img.naturalHeight / img.naturalWidth * 1280)
        that.ctx.strokeStyle = '#009bff' // 线条颜色
        that.ctx.lineWidth = 4 // 线条粗细
        that.ctxSave.strokeStyle = '#009bff' // 线条颜色
        that.ctxSave.lineWidth = 4 // 线条粗细
        let point = []
        if(that.Custom3) {
          that.Custom3[0].data.forEach(element => {
            let arr = []
            element.forEach(element1 => {
              arr.push({
                x: Math.round(element1.x / (that.imgW / 1280)),
                y: Math.round(element1.y / (that.imgH / that.$refs.myCanvas.height))
              })
            })
            point.push(arr)
          });
          that.point = point
          for (let i = 0; i < that.point.length; i++) {
            // that.makearc(that.ctx, that.Custom3[0].data[i].x, that.Custom3[0].data[i].y, that.GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');
            that.canvasSave(that.point[i]);
          }
          let arr = []
          that.Custom3[1].data.forEach(element => {
            arr.push({
              x: Math.round(element[0].x / (that.imgW / 1280)),
              y: Math.round(element[0].y / (that.imgH / that.$refs.myCanvas.height)),
              w: Math.round((element[1].x / (that.imgW / 1280))) -( Math.round(element[0].x / (that.imgW / 1280))),
              h: Math.round((element[2].y / (that.imgH / that.$refs.myCanvas.height))) - (Math.round(element[0].y / (that.imgH / that.$refs.myCanvas.height))),
            })
          });
          that.tagObj.recs = arr
          that.drawOldRecs(that.tagObj.recs, that.ctx) //必须放在moveRec之下
        }
      }
    }
  },
  // [{"bayName":"矩形","data":[
  //   [{"x":395,"y":261},{"x":914,"y":261},{"x":914,"y":600},{"x":395,"y":600}]
  //   ,[{"x":1400,"y":498},{"x":1586,"y":498},{"x":1586,"y":747},{"x":1400,"y":747}]
  // ]}
  // ]
  mounted: function () {
    this.can = this.$refs.myCanvas
    this.ctx = this.$refs.myCanvas.getContext('2d')
    this.canSave = this.$refs.canvasSave
    this.ctxSave = this.$refs.canvasSave.getContext('2d')
    this.ctx.strokeStyle = '#009bff' // 线条颜色
    this.ctx.lineWidth = 4 // 线条粗细
    this.ctxSave.strokeStyle = '#009bff' // 线条颜色
    this.ctxSave.lineWidth = 4 // 线条粗细

    this.getImg()
  },

}
</script>
<style lang="scss" scoped>
.myCanvas {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: crosshair;
  user-select: none;
}

#canvasSave {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  user-select: none;
}
</style>
