devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3图片描点标记_vue3 图片标记

作者：繁依Fanyi0 | 2024-02-18 19:02:54

赞

踩

vue3 图片标记
  1. <el-dialog v-model="markVisible" title="图片标注" width="70%" :before-close="cancelBiaoZhu">
  2.       <el-row>
  3.         <el-col :span="24">
  4.           <span>(图片标注可点击鼠标右键进行撤销)</span>
  5.         </el-col>
  6.         <el-col :span="24">
  7.           <div class="myBiaoZhu" id="myBiaoZhuDiv" v-if="isRefresh">
  8.             <img id="myBiaoZhu" :src="imageUrl" style="max-width: 800px" />
  9.           </div>
  10.         </el-col>
  11.       </el-row>
  12.       <!--      展示标记点位置-->
  13.       <!--      <div class="showBiaoZhu" id="showBiaoZhuDiv">-->
  14.       <!--&lt;!&ndash;        style="max-width: 600px"&ndash;&gt;-->
  15.       <!--        <img id="showBiaoZhu" :src="imageUrl" style="width: 600px;height: 200px"/>-->
  16.       <!--      </div>-->
  17.       <template #footer>
  18.         <span class="dialog-footer">
  19.           <el-button @click="cancelBiaoZhu" size="default">取 消</el-button>
  20.           <el-button type="primary" size="default" @click="endBiaoZhu">结束标注</el-button>
  21.         </span>
  22.       </template>
  23.     </el-dialog>
  24.  
  25.  
  26. #myBiaoZhuDiv {
  27.   position: relative;
  28.   cursor: pointer;
  29.   img {
  30.     border: solid 1px #000;
  31.     display: inline-block;
  32.     margin: 20px 20px;
  33.     z-index: 1;
  34.   }
  35.   .marker {
  36.     position: absolute;
  37.     border-radius: 50%;
  38.     z-index: 999;
  39.   }
  40. }
  1. // 开始标注
  2.     startBiaoZhu() {
  3.       this.markVisible = true
  4.       this.canBiaoZhu = true
  5.       // console.log('ppp',this.banMa)
  6.       this.$nextTick(() => {
  7.         // let this.tableData[this.picturePropIndex].buList[this.pictureIndex].banMa
  8.         // console.log('ppp',document.getElementById('myBiaoZhu'))
  9.         document.getElementById('myBiaoZhu').oncontextmenu = (e) => {
  10.           if (e && e.preventDefault) {
  11.             //阻止默认浏览器动作(W3C)
  12.             e.preventDefault()
  13.           } else {
  14.             //IE中阻止函数器默认动作的方式
  15.             window.event.returnValue = false
  16.           }
  17.           return false
  18.         } //阻止冒泡行为和默认右键菜单事件
  19.         let arr = JSON.parse(JSON.stringify(this.banMa))
  20.         // 如果存在已经有位置信息的点直接回显
  21.         arr.forEach((v) => {
  22.           // console.log(')0))0',v.proportionHeightInImg)
  23.           if (v.proportionHeightInImg != null) {
  24.             setTimeout(()=>{
  25.               // this.createMarker(v.x,v.y,v.sort)
  26.               let markImg = document.querySelector('#myBiaoZhu')
  27.               let markWidth = markImg.clientWidth
  28.               let markHeight = markImg.clientHeight
  29.               // console.log('进行',markWidth,markHeight)
  30.               let div = document.createElement('div')
  31.               div.className = 'marker'
  32.               div.id = 'marker' + v.sort
  33.               div.style.width = this.pointSize + 'px'
  34.               div.style.height = this.pointSize + 'px'
  35.               div.style.backgroundColor = this.pointColor
  36.               div.style.left = markWidth * v.proportionWidthInImg + document.getElementById('myBiaoZhu').offsetTop - this.pointSize / 2 + 'px'
  37.               div.style.top = markHeight * v.proportionHeightInImg + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize / 2 + 'px'
  38.               div.style.borderRadius = '50%'
  39.               div.style.position = 'absolute'
  40.               div.style.zIndex = 999
  41.               div.innerHTML = `${v.sort}`
  42.               div.style.color = '#ffffff'
  43.               div.style.textAlign = 'center'
  44.               div.style.lineHeight = this.pointSize + 'px'
  45.               div.oncontextmenu = (e) => {
  46.                 // this.isRefresh = false
  47.                 var sort = e.target.id
  48.                 // console.log('sss',sort)
  49.                 document.getElementById('myBiaoZhuDiv').removeChild(div)
  50.                 this.banMa.forEach((item, index) => {
  51.                   if (item.sort == sort.slice(6, sort.length)) {
  52.                     // console.log('进',item.id)
  53.                     // delete this.banMa[index];
  54.                     this.banMa[index].x = null
  55.                     this.banMa[index].y = null
  56.                     this.banMa[index].proportionHeightInImg = null
  57.                     this.banMa[index].proportionWidthInImg = null
  58.                   }
  59.                   // console.log('&&&&',item.id,id.slice(6,id.length),item.id == id.slice(6,id.length))
  60.                 })
  61.                 this.canBiaoZhu = true
  62.                 if (e && e.preventDefault) {
  63.                   //阻止默认浏览器动作(W3C)
  64.                   e.preventDefault()
  65.                 } else {
  66.                   //IE中阻止函数器默认动作的方式
  67.                   window.event.returnValue = false
  68.                 }
  69.                 return false
  70.               } //阻止冒泡行为和默认右键菜单事件，删除该点、
  71.               document.getElementById('myBiaoZhuDiv').appendChild(div)
  72.             },500)
  73.           }
  74.         })
  75.  
  76.         document.getElementById('myBiaoZhu').onmousedown = (e) => {
  77.           // console.log('进')
  78.           e = e || window.event
  79.           if (e.button !== 2) {
  80.             //判断是否右击
  81.             if (this.canBiaoZhu) {
  82.               //判断是否可以进行标注
  83.               var x = e.offsetX || e.layerX
  84.               var y = e.offsetY || e.layerY
  85.               // console.log(x,y)
  86.               var myImg = document.querySelector('#myBiaoZhu')
  87.               var currWidth = myImg.clientWidth
  88.               var currHeight = myImg.clientHeight
  89.               var proportionWidthInImg = x / currWidth
  90.               var proportionHeightInImg = y / currHeight
  91.               // console.log("图片比例高度："+proportionHeightInImg)
  92.               // console.log("图片比例宽度："+proportionWidthInImg)
  93.               let obj = {
  94.                 // id:this.banMa.length+1,
  95.                 sort: null,
  96.                 x,
  97.                 y,
  98.                 proportionHeightInImg,
  99.                 proportionWidthInImg,
  100.               }
  101.               let arr = JSON.parse(JSON.stringify(this.banMa))
  102.               let flag = false
  103.               for (let i = 0; i < arr.length; i++) {
  104.                 if (this.banMa[i].proportionHeightInImg == null) {
  105.                   // console.log('jinjinjin')
  106.                   flag = true
  107.                   obj.sort = Number(this.banMa[i].sort)
  108.                   this.banMa[i] = obj
  109.                   break
  110.                 }
  111.               }
  112.               if (obj.sort === this.banMa[this.banMa.length - 1].sort && this.banMa[this.banMa.length - 1].x != null) {
  113.                 // console.log('进')
  114.                 this.canBiaoZhu = false
  115.               }
  116.               if (obj.sort != null) {
  117.                 this.createMarker(x, y, obj.sort)
  118.               } else {
  119.                 ElMessage({
  120.                   message: '标注点数已达上限！',
  121.                   type: 'warning',
  122.                 })
  123.               }
  124.  
  125.               // if(this.banMa[this.banMa.length-1].id===obj.id){
  126.               //   this.canBiaoZhu = false
  127.               // }
  128.               // console.log('ppp')
  129.               // var markImg = document.querySelector("#showBiaoZhu")
  130.               // var markWidth = markImg.clientWidth
  131.               // var markHeight = markImg.clientHeight
  132.               // var div = document.createElement('div')
  133.               // div.className = 'show'
  134.               // div.style.width = this.pointSize + 'px'
  135.               // div.style.height = this.pointSize + 'px'
  136.               // div.style.backgroundColor = this.pointColor
  137.               // div.style.left = markWidth*ProportionWidthInImg + document.getElementById('showBiaoZhu').offsetTop- this.pointSize/2 + 'px'
  138.               // div.style.top = markHeight*ProportionHeightInImg + document.getElementById('showBiaoZhu').offsetLeft - this.pointSize/2 + 'px'
  139.               // div.style.borderRadius = '50%'
  140.               // div.style.position='absolute'
  141.               // div.style.zIndex= 999
  142.               // div.innerHTML=`${this.banMa.length}`
  143.               // div.style.color='#ffffff'
  144.               // div.style.textAlign='center'
  145.               // div.style.lineHeight = this.pointSize + 'px'
  146.               // document.getElementById('showBiaoZhuDiv').appendChild(div)
  147.             } else {
  148.               ElMessage({
  149.                 message: '标注点数已达上限！',
  150.                 type: 'warning',
  151.               })
  152.             }
  153.           } else {
  154.             console.log(e)
  155.           }
  156.         }
  157.       })
  158.     },
  159.     //画点
  160.     createMarker(x, y, sort) {
  161.       // console.log('ppp',id)
  162.       var div = document.createElement('div')
  163.       div.className = 'marker'
  164.       div.id = 'marker' + sort
  165.       y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize / 2
  166.       x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize / 2
  167.       // console.log('@@@',document.getElementById('myBiaoZhu').offsetTop,document.getElementById('myBiaoZhu').offsetLeft)
  168.       div.style.width = this.pointSize + 'px'
  169.       div.style.height = this.pointSize + 'px'
  170.       div.style.backgroundColor = this.pointColor
  171.       div.style.left = x + 'px'
  172.       div.style.top = y + 'px'
  173.       div.style.borderRadius = '50%'
  174.       div.style.position = 'absolute'
  175.       div.style.zIndex = 999
  176.       div.innerHTML = `${sort}`
  177.       div.style.color = '#ffffff'
  178.       div.style.textAlign = 'center'
  179.       div.style.lineHeight = this.pointSize + 'px'
  180.       div.oncontextmenu = (e) => {
  181.         // this.isRefresh = false
  182.         // console.log('pppp',e)
  183.         var sort = e.target.id
  184.         document.getElementById('myBiaoZhuDiv').removeChild(div)
  185.         this.banMa.forEach((item, index) => {
  186.           if (item.sort == sort.slice(6, sort.length)) {
  187.             // console.log('进',item.id)
  188.             // delete this.banMa[index];
  189.             this.banMa[index].x = null
  190.             this.banMa[index].y = null
  191.             this.banMa[index].proportionHeightInImg = null
  192.             this.banMa[index].proportionWidthInImg = null
  193.           }
  194.           // console.log('&&&&',item.id,id.slice(6,id.length),item.id == id.slice(6,id.length))
  195.         })
  196.         this.canBiaoZhu = true
  197.         if (e && e.preventDefault) {
  198.           //阻止默认浏览器动作(W3C)
  199.           e.preventDefault()
  200.         } else {
  201.           //IE中阻止函数器默认动作的方式
  202.           window.event.returnValue = false
  203.         }
  204.         return false
  205.       } //阻止冒泡行为和默认右键菜单事件，删除该点
  206.       document.getElementById('myBiaoZhuDiv').appendChild(div)
  207.     },
  208.     //结束标注
  209.     endBiaoZhu() {
  210.       this.tableData[this.picturePropIndex].buList[this.pictureIndex].banMa = JSON.parse(JSON.stringify(this.banMa))
  211.       this.cancelBiaoZhu()
  212.       this.markVisible = false
  213.       this.canBiaoZhu = false
  214.       // this.comfirmAdd()
  215.     },
  216.     // 取消标注
  217.     cancelBiaoZhu() {
  218.       this.markVisible = false
  219.       this.canBiaoZhu = false
  220.       this.banMa.forEach((v) => {
  221.         let div = document.getElementById('marker' + v.sort)
  222.         if (div) {
  223.           document.getElementById('myBiaoZhuDiv').removeChild(div)
  224.         }
  225.       })
  226.       this.comfirmAdd()
  227.       this.banMa = []
  228.     },

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

  1. // 步序图片上传
  2.     handleChildUpImg(row, index, propIndex) {
  3.       // this.cancelBiaoZhu()
  4.       this.picturePropIndex = propIndex
  5.       this.pictureIndex = index
  6.       this.pictureDialogVisible = true
  7.       let str = row.stepName
  8.       if (str.indexOf('（') != -1 || str.indexOf('(') != -1) {
  9.         // console.log('row',row.stepName)
  10.         this.banMa = []
  11.         this.pointSortList = []
  12.         var num1, num2, num3
  13.         if (str.indexOf('（') != -1) {
  14.           num1 = str.indexOf('（')
  15.         } else if (str.indexOf('(') != -1) {
  16.           num1 = str.indexOf('(')
  17.         } else {
  18.           num1 = ''
  19.         }
  20.         // console.log('次数',str.match(/-/g).length,str.indexOf('-',2))
  21.         num2 = str.indexOf('-')
  22.         if(str.match(/-/g).length===2){
  23.           num2 = str.indexOf('-',num2+1)
  24.         }
  25.         if (str.indexOf(')') != -1) {
  26.           num3 = str.indexOf(')')
  27.         } else if (str.indexOf('）') != -1) {
  28.           num3 = str.indexOf('）')
  29.         } else {
  30.           num3 = ''
  31.         }
  32.         var start = str.slice(num1 + 1, num2)
  33.         var end = str.slice(num2 + 1, num3)
  34.         for (var i = start; i <= end; i++) {
  35.           this.pointSortList.push({ sort: Number(i), x: null, y: null, proportionHeightInImg: null, proportionWidthInImgInImg: null })
  36.         }
  37.         // console.log('进行',start,end)
  38.         this.isNingJin = true
  39.         if (row.banMa) {
  40.           // this.banMa = []
  41.           row.banMa.forEach((v, i) => {
  42.             if (v.sort) {
  43.               this.banMa.push({ sort: v.sort, x: null, y: null, proportionHeightInImg: v.proportionHeightInImg, proportionWidthInImg: v.proportionWidthInImg })
  44.             } else {
  45.               let sort = Number(i) + Number(start)
  46.               this.banMa.push({ sort, x: null, y: null, proportionHeightInImg: v.proportionHeightInImg, proportionWidthInImg: v.proportionWidthInImg })
  47.             }
  48.           })
  49.         } else {
  50.           // console.log('jin',start,end)
  51.           // var tips = str.slice(0, num1)
  52.           // for (var i = start; i <= end; i++) {
  53.           //   this.banMa.push({sort:Number(i),
  54.           //     x:null,
  55.           //     y:null,
  56.           //     proportionHeightInImg:null,
  57.           //     proportionWidthInImgInImg:null})
  58.           // }
  59.           // console.log('步序',this.banMa)
  60.           this.banMa = [...this.pointSortList]
  61.         }
  62.         // console.log('oooo',this.banMa,row.banMa)
  63.       } else {
  64.         this.isNingJin = false
  65.         this.banMa = []
  66.       }
  67.       if (row.pictureUrl) {
  68.         this.imageUrl = this.mateUrl + row.pictureUrl
  69.         this.picUrl = row.pictureUrl
  70.       } else {
  71.         this.imageUrl = ''
  72.         this.picUrl = ''
  73.       }
  74.       // if(row.banMa){
  75.       //   this.banMa = row.banMa
  76.       // }else{
  77.       //   this.banMa = []
  78.       // }
  79.     },

效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/109920?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号