vue如何使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)

更新時(shí)間：2022年04月28日 11:20:53 作者：清新小伙子

這篇文章主要介紹了vue如何使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

最近和深度學(xué)習(xí)方面搞個(gè)東西，需要前端對(duì)圖片進(jìn)行標(biāo)注，呃，這個(gè)我上網(wǎng)也沒(méi)找到什么好方法，只能自己通過(guò)js來(lái)實(shí)現(xiàn)，不過(guò)現(xiàn)在剛初步做出一點(diǎn)效果，樣式?jīng)]留意，挺丑的，嘻嘻。

功能

點(diǎn)擊開(kāi)始標(biāo)注按鈕后才可以對(duì)圖片進(jìn)行標(biāo)注
在圖片區(qū)域內(nèi)單機(jī)左鍵才可進(jìn)行加點(diǎn)
在標(biāo)注點(diǎn)上右擊刪除該點(diǎn)，在圖片上右擊無(wú)效果
完成標(biāo)注后點(diǎn)擊完成標(biāo)注按鈕后，結(jié)束標(biāo)注，此后點(diǎn)擊圖片不再加點(diǎn)

標(biāo)注前

標(biāo)注后

打印記錄坐標(biāo)點(diǎn)

這個(gè)坐標(biāo)看你自己需求，是相對(duì)圖片的百分比坐標(biāo)，還是相對(duì)整個(gè)窗口的坐標(biāo)，js都可以實(shí)現(xiàn)的

代碼實(shí)現(xiàn)

我先說(shuō)一說(shuō)關(guān)鍵功能實(shí)現(xiàn)的js代碼（里面涉及了date的數(shù)據(jù)，所以需要看下后面的全部代碼實(shí)現(xiàn)），后面就是全部代碼

判斷鼠標(biāo)是否右擊

if(e.button !== 2)       //判斷鼠標(biāo)是否右擊

阻止冒泡行為和默認(rèn)右鍵菜單事件

document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
        if(e && e.preventDefault) {
          //阻止默認(rèn)瀏覽器動(dòng)作(W3C)
          e.preventDefault()
        } else {
          //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
          window.event.returnValue = false
        }
        return false
      })      //阻止冒泡行為和默認(rèn)右鍵菜單事件

給圖片加點(diǎn)擊事件

document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        e = e || window.event
        if(e.button !== 2){       //判斷是否右擊
          if(this.canBiaoZhu){    //判斷是否可以進(jìn)行標(biāo)注
            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)
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y
            })
            this.createMarker(x,y)
          }
        }
      }

畫(huà)點(diǎn)

  createMarker(x, y) {
    var div = document.createElement('div')
    div.className = 'marker'
    div.id = 'marker'+this.banMa.length
    y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
    x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
    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.oncontextmenu=((e)=>{  //阻止冒泡行為和默認(rèn)右鍵菜單事件，同時(shí)刪除該點(diǎn)
      var id = e.target.id
      document.getElementById('myBiaoZhuDiv').removeChild(div)
      this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))
      if(e && e.preventDefault) {
        //阻止默認(rèn)瀏覽器動(dòng)作(W3C)
        e.preventDefault()
      } else {
        //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
        window.event.returnValue = false
      }
      return false
    })  
    document.getElementById('myBiaoZhuDiv').appendChild(div)
  },

html：

<template>
  <div class="myBiaoZhu" id="myBiaoZhuDiv">
    <img id="myBiaoZhu" src="./1.png" alt="" style="height: 400px;width: 400px;">
    <el-button type="text" @click="startBiaoZhu">開(kāi)始標(biāo)注</el-button>
    <el-button type="text" @click="endBiaoZhu">標(biāo)注完成</el-button>
  </div>
</template>

css：

<style lang="less">
  #myBiaoZhuDiv{
    position:relative;
    img{
      border:solid 1px #000;
      display:inline-block;
      margin:100px 100px;
      z-index: 1;
    }
    .marker{
      position:absolute;
      border-radius: 50%;
      z-index: 999;
    }
  }
</style>

js：

<script>
  export default {
    name: '',
    components: {},
    data () {
      return {
        banMa:[],           //斑馬線的數(shù)組
        canBiaoZhu:false,  //是否可以進(jìn)行標(biāo)注
        pointColor:'red',   //點(diǎn)的顏色
        pointSize:10,       //點(diǎn)的大小
      }
    },
    methods: {
      //開(kāi)始標(biāo)注
      startBiaoZhu(){
        this.canBiaoZhu = true
      },
      //完成標(biāo)注
      endBiaoZhu(){
        this.canBiaoZhu = false
      },
      //畫(huà)點(diǎn)
      createMarker(x, y) {
        var div = document.createElement('div')
        div.className = 'marker'
        div.id = 'marker'+this.banMa.length
        y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
        x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
        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.oncontextmenu=((e)=>{
          var id = e.target.id
          document.getElementById('myBiaoZhuDiv').removeChild(div)
          this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))
          if(e && e.preventDefault) {
            //阻止默認(rèn)瀏覽器動(dòng)作(W3C)
            e.preventDefault()
          } else {
            //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
            window.event.returnValue = false
          }
          return false
        })  //阻止冒泡行為和默認(rèn)右鍵菜單事件，刪除該點(diǎn)
        document.getElementById('myBiaoZhuDiv').appendChild(div)
      },
    },
    watch: {},
    computed: {},
    created () {
    },
    mounted () {
      document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
        if(e && e.preventDefault) {
          //阻止默認(rèn)瀏覽器動(dòng)作(W3C)
          e.preventDefault()
        } else {
          //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
          window.event.returnValue = false
        }
        return false
      })      //阻止冒泡行為和默認(rèn)右鍵菜單事件
      document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        e = e || window.event
        if(e.button !== 2){       //判斷是否右擊
          if(this.canBiaoZhu){    //判斷是否可以進(jìn)行標(biāo)注
            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)
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y
            })
            this.createMarker(x,y)
          }
        }
      }
    },
    beforeDestroy () {
    },
    destroyed () {
    },
  }
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: