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

這篇文章主要介紹“vue怎么使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue怎么使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)”文章能幫助大家解決問(wèn)題。

功能

• 點(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="" >
    <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>

關(guān)于“vue怎么使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。