vue3图片描点标记

<el-dialog v-model="markVisible" title="图片标注" width="70%" :before-close="cancelBiaoZhu">
      <el-row>
        <el-col :span="24">
          <span>(图片标注可点击鼠标右键进行撤销)</span>
        </el-col>
        <el-col :span="24">
          <div class="myBiaoZhu" id="myBiaoZhuDiv" v-if="isRefresh">
            <img id="myBiaoZhu" :src="imageUrl" style="max-width: 800px" />
          </div>
        </el-col>
      </el-row>
      <!--      展示标记点位置-->
      <!--      <div class="showBiaoZhu" id="showBiaoZhuDiv">-->
      <!--&lt;!&ndash;        style="max-width: 600px"&ndash;&gt;-->
      <!--        <img id="showBiaoZhu" :src="imageUrl" style="width: 600px;height: 200px"/>-->
      <!--      </div>-->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelBiaoZhu" size="default">取 消</el-button>
          <el-button type="primary" size="default" @click="endBiaoZhu">结束标注</el-button>
        </span>
      </template>
    </el-dialog>


#myBiaoZhuDiv {
  position: relative;
  cursor: pointer;
  img {
    border: solid 1px #000;
    display: inline-block;
    margin: 20px 20px;
    z-index: 1;
  }
  .marker {
    position: absolute;
    border-radius: 50%;
    z-index: 999;
  }
}

// 开始标注
    startBiaoZhu() {
      this.markVisible = true
      this.canBiaoZhu = true
      // console.log('ppp',this.banMa)
      this.$nextTick(() => {
        // let this.tableData[this.picturePropIndex].buList[this.pictureIndex].banMa
        // console.log('ppp',document.getElementById('myBiaoZhu'))
        document.getElementById('myBiaoZhu').oncontextmenu = (e) => {
          if (e && e.preventDefault) {
            //阻止默认浏览器动作(W3C)
            e.preventDefault()
          } else {
            //IE中阻止函数器默认动作的方式
            window.event.returnValue = false
          }
          return false
        } //阻止冒泡行为和默认右键菜单事件
        let arr = JSON.parse(JSON.stringify(this.banMa))
        // 如果存在已经有位置信息的点直接回显
        arr.forEach((v) => {
          // console.log(')0))0',v.proportionHeightInImg)
          if (v.proportionHeightInImg != null) {
            setTimeout(()=>{
              // this.createMarker(v.x,v.y,v.sort)
              let markImg = document.querySelector('#myBiaoZhu')
              let markWidth = markImg.clientWidth
              let markHeight = markImg.clientHeight
              // console.log('进行',markWidth,markHeight)
              let div = document.createElement('div')
              div.className = 'marker'
              div.id = 'marker' + v.sort
              div.style.width = this.pointSize + 'px'
              div.style.height = this.pointSize + 'px'
              div.style.backgroundColor = this.pointColor
              div.style.left = markWidth * v.proportionWidthInImg + document.getElementById('myBiaoZhu').offsetTop - this.pointSize / 2 + 'px'
              div.style.top = markHeight * v.proportionHeightInImg + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize / 2 + 'px'
              div.style.borderRadius = '50%'
              div.style.position = 'absolute'
              div.style.zIndex = 999
              div.innerHTML = `${v.sort}`
              div.style.color = '#ffffff'
              div.style.textAlign = 'center'
              div.style.lineHeight = this.pointSize + 'px'
              div.oncontextmenu = (e) => {
                // this.isRefresh = false
                var sort = e.target.id
                // console.log('sss',sort)
                document.getElementById('myBiaoZhuDiv').removeChild(div)
                this.banMa.forEach((item, index) => {
                  if (item.sort == sort.slice(6, sort.length)) {
                    // console.log('进',item.id)
                    // delete this.banMa[index];
                    this.banMa[index].x = null
                    this.banMa[index].y = null
                    this.banMa[index].proportionHeightInImg = null
                    this.banMa[index].proportionWidthInImg = null
                  }
                  // console.log('&&&&',item.id,id.slice(6,id.length),item.id == id.slice(6,id.length))
                })
                this.canBiaoZhu = true
                if (e && e.preventDefault) {
                  //阻止默认浏览器动作(W3C)
                  e.preventDefault()
                } else {
                  //IE中阻止函数器默认动作的方式
                  window.event.returnValue = false
                }
                return false
              } //阻止冒泡行为和默认右键菜单事件，删除该点、
              document.getElementById('myBiaoZhuDiv').appendChild(div)
            },500)
          }
        })

        document.getElementById('myBiaoZhu').onmousedown = (e) => {
          // console.log('进')
          e = e || window.event
          if (e.button !== 2) {
            //判断是否右击
            if (this.canBiaoZhu) {
              //判断是否可以进行标注
              var x = e.offsetX || e.layerX
              var y = e.offsetY || e.layerY
              // console.log(x,y)
              var myImg = document.querySelector('#myBiaoZhu')
              var currWidth = myImg.clientWidth
              var currHeight = myImg.clientHeight
              var proportionWidthInImg = x / currWidth
              var proportionHeightInImg = y / currHeight
              // console.log("图片比例高度："+proportionHeightInImg)
              // console.log("图片比例宽度："+proportionWidthInImg)
              let obj = {
                // id:this.banMa.length+1,
                sort: null,
                x,
                y,
                proportionHeightInImg,
                proportionWidthInImg,
              }
              let arr = JSON.parse(JSON.stringify(this.banMa))
              let flag = false
              for (let i = 0; i < arr.length; i++) {
                if (this.banMa[i].proportionHeightInImg == null) {
                  // console.log('jinjinjin')
                  flag = true
                  obj.sort = Number(this.banMa[i].sort)
                  this.banMa[i] = obj
                  break
                }
              }
              if (obj.sort === this.banMa[this.banMa.length - 1].sort && this.banMa[this.banMa.length - 1].x != null) {
                // console.log('进')
                this.canBiaoZhu = false
              }
              if (obj.sort != null) {
                this.createMarker(x, y, obj.sort)
              } else {
                ElMessage({
                  message: '标注点数已达上限！',
                  type: 'warning',
                })
              }

              // if(this.banMa[this.banMa.length-1].id===obj.id){
              //   this.canBiaoZhu = false
              // }
              // console.log('ppp')
              // var markImg = document.querySelector("#showBiaoZhu")
              // var markWidth = markImg.clientWidth
              // var markHeight = markImg.clientHeight
              // var div = document.createElement('div')
              // div.className = 'show'
              // div.style.width = this.pointSize + 'px'
              // div.style.height = this.pointSize + 'px'
              // div.style.backgroundColor = this.pointColor
              // div.style.left = markWidth*ProportionWidthInImg + document.getElementById('showBiaoZhu').offsetTop- this.pointSize/2 + 'px'
              // div.style.top = markHeight*ProportionHeightInImg + document.getElementById('showBiaoZhu').offsetLeft - this.pointSize/2 + 'px'
              // div.style.borderRadius = '50%'
              // div.style.position='absolute'
              // div.style.zIndex= 999
              // div.innerHTML=`${this.banMa.length}`
              // div.style.color='#ffffff'
              // div.style.textAlign='center'
              // div.style.lineHeight = this.pointSize + 'px'
              // document.getElementById('showBiaoZhuDiv').appendChild(div)
            } else {
              ElMessage({
                message: '标注点数已达上限！',
                type: 'warning',
              })
            }
          } else {
            console.log(e)
          }
        }
      })
    },
    //画点
    createMarker(x, y, sort) {
      // console.log('ppp',id)
      var div = document.createElement('div')
      div.className = 'marker'
      div.id = 'marker' + sort
      y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize / 2
      x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize / 2
      // console.log('@@@',document.getElementById('myBiaoZhu').offsetTop,document.getElementById('myBiaoZhu').offsetLeft)
      div.style.width = this.pointSize + 'px'
      div.style.height = this.pointSize + 'px'
      div.style.backgroundColor = this.pointColor
      div.style.left = x + 'px'
      div.style.top = y + 'px'
      div.style.borderRadius = '50%'
      div.style.position = 'absolute'
      div.style.zIndex = 999
      div.innerHTML = `${sort}`
      div.style.color = '#ffffff'
      div.style.textAlign = 'center'
      div.style.lineHeight = this.pointSize + 'px'
      div.oncontextmenu = (e) => {
        // this.isRefresh = false
        // console.log('pppp',e)
        var sort = e.target.id
        document.getElementById('myBiaoZhuDiv').removeChild(div)
        this.banMa.forEach((item, index) => {
          if (item.sort == sort.slice(6, sort.length)) {
            // console.log('进',item.id)
            // delete this.banMa[index];
            this.banMa[index].x = null
            this.banMa[index].y = null
            this.banMa[index].proportionHeightInImg = null
            this.banMa[index].proportionWidthInImg = null
          }
          // console.log('&&&&',item.id,id.slice(6,id.length),item.id == id.slice(6,id.length))
        })
        this.canBiaoZhu = true
        if (e && e.preventDefault) {
          //阻止默认浏览器动作(W3C)
          e.preventDefault()
        } else {
          //IE中阻止函数器默认动作的方式
          window.event.returnValue = false
        }
        return false
      } //阻止冒泡行为和默认右键菜单事件，删除该点
      document.getElementById('myBiaoZhuDiv').appendChild(div)
    },
    //结束标注
    endBiaoZhu() {
      this.tableData[this.picturePropIndex].buList[this.pictureIndex].banMa = JSON.parse(JSON.stringify(this.banMa))
      this.cancelBiaoZhu()
      this.markVisible = false
      this.canBiaoZhu = false
      // this.comfirmAdd()
    },
    // 取消标注
    cancelBiaoZhu() {
      this.markVisible = false
      this.canBiaoZhu = false
      this.banMa.forEach((v) => {
        let div = document.getElementById('marker' + v.sort)
        if (div) {
          document.getElementById('myBiaoZhuDiv').removeChild(div)
        }
      })
      this.comfirmAdd()
      this.banMa = []
    },

获取已经有标注信息的数据并回显，通过拧紧信息带括号判断从数字几开始标注，到几结束，限制标注个数

// 步序图片上传
    handleChildUpImg(row, index, propIndex) {
      // this.cancelBiaoZhu()
      this.picturePropIndex = propIndex
      this.pictureIndex = index
      this.pictureDialogVisible = true
      let str = row.stepName
      if (str.indexOf('（') != -1 || str.indexOf('(') != -1) {
        // console.log('row',row.stepName)
        this.banMa = []
        this.pointSortList = []
        var num1, num2, num3
        if (str.indexOf('（') != -1) {
          num1 = str.indexOf('（')
        } else if (str.indexOf('(') != -1) {
          num1 = str.indexOf('(')
        } else {
          num1 = ''
        }
        // console.log('次数',str.match(/-/g).length,str.indexOf('-',2))
        num2 = str.indexOf('-')
        if(str.match(/-/g).length===2){
          num2 = str.indexOf('-',num2+1)
        }
        if (str.indexOf(')') != -1) {
          num3 = str.indexOf(')')
        } else if (str.indexOf('）') != -1) {
          num3 = str.indexOf('）')
        } else {
          num3 = ''
        }
        var start = str.slice(num1 + 1, num2)
        var end = str.slice(num2 + 1, num3)
        for (var i = start; i <= end; i++) {
          this.pointSortList.push({ sort: Number(i), x: null, y: null, proportionHeightInImg: null, proportionWidthInImgInImg: null })
        }
        // console.log('进行',start,end)
        this.isNingJin = true
        if (row.banMa) {
          // this.banMa = []
          row.banMa.forEach((v, i) => {
            if (v.sort) {
              this.banMa.push({ sort: v.sort, x: null, y: null, proportionHeightInImg: v.proportionHeightInImg, proportionWidthInImg: v.proportionWidthInImg })
            } else {
              let sort = Number(i) + Number(start)
              this.banMa.push({ sort, x: null, y: null, proportionHeightInImg: v.proportionHeightInImg, proportionWidthInImg: v.proportionWidthInImg })
            }
          })
        } else {
          // console.log('jin',start,end)
          // var tips = str.slice(0, num1)
          // for (var i = start; i <= end; i++) {
          //   this.banMa.push({sort:Number(i),
          //     x:null,
          //     y:null,
          //     proportionHeightInImg:null,
          //     proportionWidthInImgInImg:null})
          // }
          // console.log('步序',this.banMa)
          this.banMa = [...this.pointSortList]
        }
        // console.log('oooo',this.banMa,row.banMa)
      } else {
        this.isNingJin = false
        this.banMa = []
      }
      if (row.pictureUrl) {
        this.imageUrl = this.mateUrl + row.pictureUrl
        this.picUrl = row.pictureUrl
      } else {
        this.imageUrl = ''
        this.picUrl = ''
      }
      // if(row.banMa){
      //   this.banMa = row.banMa
      // }else{
      //   this.banMa = []
      // }
    },

效果