vue在图片标注矩形框

<template>
  <div id="test" style="user-select: none;">
    <button @click="fangda">放大</button>
    <button @click="suoxiao">缩小</button>
    <button v-show="isTrue" @click="gai">添加</button>
    <button v-show="!isTrue" @click="gai">移动</button>

    <div class="content">
      <div
        :style="{
          transform: 'scale(' + num + ')',
          position: 'relative',
          width: '100%',
          height: '100%',
        }"
        @mousedown="moveMouse"
        @click="getOffect"
      >
        <div
          v-for="(item, index) in boxArry"
          :key="index"
          :ref="'biaozhu' + index"
          :class="'biaozhu' + index == 'biaozhu' + b_i ? 'biaozhu b_border' : 'biaozhu'"
          :style="{
            width: item.width + 'px',
            height: item.height + 'px',
            position: 'absolute',
            left: item.left + 'px',
            top: item.top + 'px',
            background: 'rgba(43,100,206,0.3)',
            border: 'none',
          }"
          @mousedown.stop="move"
          @click="handelClick(index)"
        >
          <div v-if="b_i == index" class="r_b" @mousedown="mouseMove11"></div>
        </div>
        <div
          :style="{
            height: biaozhuHeight + 'px',
            width: biaozhuWidth + 'px',
            top: biaozhuTop + 'px',
            left: biaozhuLeft + 'px',
            position: 'absolute',
            background: 'rgba(43,100,206,0.3)',
          }"
        ></div>
        <img
          style="width: 100%; height: 100%; pointer-events: none;"
          src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3479844176,2436830052&fm=26&gp=0.jpg"
          alt=""
          @mousedown="isTrue ? null : move"
        />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    directives: {
      drag: function(el) {
        let dragBox = el //获取当前元素
        dragBox.onmousedown = (e) => {
          //算出鼠标相对元素的位置

          let disX = e.clientX - dragBox.offsetLeft
          let disY = e.clientY - dragBox.offsetTop
          console.log(disX, disY)
          document.onmousemove = (e) => {
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX
            let top = e.clientY - disY
            //移动当前元素
            dragBox.style.left = left + 'px'
            dragBox.style.top = top + 'px'
            console.log(left, top, '111111111')
          }
          document.onmouseup = (e) => {
            //鼠标弹起来的时候不再移动
            document.onmousemove = null
            //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
            document.onmouseup = null
          }
        }
      },
    },
    data() {
      return {
        num: 1,
        boxArry: [],
        isTrue: false,
        width: '',
        height: '',
        left: '',
        top: '',
        b_i: '',
        biaozhuHeight: 0,
        biaozhuWidth: 0,
        biaozhuTop: 0,
        biaozhuLeft: 0,
      }
    },

    methods: {
      getVuex() {
        console.log(this.$store.state.treeData)
      },
      commitVuex() {
        this.$store.commit('changeTreeData', { a: 1, b: 2 })
      },
      mouseOver2(e) {
        document.onmousedown = (e) => {
          let odiv = e.target //获取目标元素

          //算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft
          let disY = e.clientY - odiv.offsetTop
          let left = e.clientX - disX
          let top = e.clientY - disY

          //绑定元素位置到positionX和positionY上面
          this.positionX = top
          this.positionY = left
          console.log(this.boxArry, this.dragsIndex)
          //移动当前元素
          this.boxArry[this.b_i].width = left
          this.boxArry[this.b_i].height = top
        }
      },
      drags(e) {
        console.log(e)
      },
      mouseMove11(e) {
        // console.log(e,index)
        let odiv = e.target //获取目标元素

        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft
        let disY = e.clientY - odiv.offsetTop
        // debugger;
        e.target.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          // console.log('aaaaaaaaaaaaa',e)
          let left = e.clientX - disX
          let top = e.clientY - disY

          //绑定元素位置到positionX和positionY上面
          this.positionX = top
          this.positionY = left
          // console.log(this.boxArry,this.dragsIndex)
          //移动当前元素
          this.boxArry[this.b_i].width = left
          this.boxArry[this.b_i].height = top
          e.target.onmouseup = (e) => {
            e.target.onmousemove = null

            // document.onmouseup = null;
          }
        }
      },
      gai() {
        this.isTrue = !this.isTrue
      },
      getOffect(e) {
        console.log(e)
        document.onmouseup = null
        // this.left=e.offsetX
        //     this.top=e.offsetY
      },
      moveMouse(e) {
        let odiv = e.target //获取目标元素

        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft
        let disY = e.clientY - odiv.offsetTop
        console.log(disX, disY)
        if (this.isTrue) {
          // 拖动
          document.onmousemove = (e) => {
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX
            let top = e.clientY - disY

            //绑定元素位置到positionX和positionY上面
            this.positionX = top
            this.positionY = left

            //移动当前元素
            odiv.style.left = left + 'px'
            odiv.style.top = top + 'px'
          }
          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        } else {
          // 添加div

          console.log(e)
          document.onmousemove = (e) => {
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

            let left = disX - odiv.getBoundingClientRect().x
            let top = disY - odiv.getBoundingClientRect().y

            console.log(e.target.offsetLeft)
            this.width = (e.clientX - disX) / this.num
            this.height = (e.clientY - disY) / this.num
            this.biaozhuWidth = this.width
            this.biaozhuHeight = this.height
            this.biaozhuLeft = left
            this.biaozhuTop = top
            document.onmouseup = (e) => {
              let left = disX - odiv.getBoundingClientRect().x
              let top = disY - odiv.getBoundingClientRect().y
              this.width = (e.clientX - disX) / this.num
              this.height = (e.clientY - disY) / this.num

              console.log(e.target.getBoundingClientRect(), disX, disY)
              if (this.width > 5 && this.height > 5) {
                this.boxArry.push({
                  width: this.width,
                  height: this.height,
                  left: left,
                  top: top,
                })
              }

              this.biaozhuWidth = 0
              this.biaozhuHeight = 0
              this.biaozhuLeft = 0
              this.biaozhuTop = 0
              document.onmousemove = null
              document.onmouseup = null
            }
          }
        }
      },
      move(e) {
        let odiv = e.target //获取目标元素

        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft
        let disY = e.clientY - odiv.offsetTop
        document.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY

          //绑定元素位置到positionX和positionY上面
          this.positionX = top
          this.positionY = left

          //移动当前元素
          odiv.style.left = left + 'px'
          odiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
        }
      },

      fangda() {
        this.num += 0.1
      },
      suoxiao() {
        this.num -= 0.1
      },
      tianjia() {
        this.boxArry.push({
          width: 100,
          height: 100,
          left: 20,
          top: 20,
        })
      },
      handelClick(i) {
        this.b_i = i
        console.log(i)
      },
      dragstart(event, data) {
        // console.log('drag')
        // event.dataTransfer.setData('item', data)
      },
      dragend(event) {
        // event.dataTransfer.clearData()
      },
    },
  }
</script>
<style lang="less">
  #test {
    /deep/.el-dialog__body {
      padding: 10px 20px !important;
    }
    .content {
      width: 800px;
      height: 500px;
      background: rgb(0, 255, 64);
      margin: 0 auto;
      overflow: hidden;
      position: relative;

      .drag_box {
        width: 150px;
        height: 90px;
        border: 1px solid #666;
        background-color: #ccc;
        /* 使用定位，脱离文档流 */
        position: relative;
        top: 100px;
        left: 100px;
        /* 鼠标移入变成拖拽手势 */
        cursor: move;
        z-index: 3000;
      }
      .b_border {
        border: 1px solid red !important;
      }
      .biaozhu {
        z-index: 9999999;
      }
      .r_b {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: red;
      }
      .r_b:hover {
        cursor: se-resize;
      }
    }
  }
</style>