vue如何使用js對圖片進行點擊標注圓點并記錄它的坐標

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

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

功能

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

標注前

標注后

打印記錄坐標點

這個坐標看你自己需求，是相對圖片的百分比坐標，還是相對整個窗口的坐標，js都可以實現(xiàn)的

代碼實現(xiàn)

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

判斷鼠標是否右擊

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

阻止冒泡行為和默認右鍵菜單事件

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

給圖片加點擊事件

document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        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)
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y
            })
            this.createMarker(x,y)
          }
        }
      }

畫點

  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) {
        //阻止默認瀏覽器動作(W3C)
        e.preventDefault()
      } else {
        //IE中阻止函數(shù)器默認動作的方式
        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">開始標注</el-button>
    <el-button type="text" @click="endBiaoZhu">標注完成</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,  //是否可以進行標注
        pointColor:'red',   //點的顏色
        pointSize:10,       //點的大小
      }
    },
    methods: {
      //開始標注
      startBiaoZhu(){
        this.canBiaoZhu = true
      },
      //完成標注
      endBiaoZhu(){
        this.canBiaoZhu = false
      },
      //畫點
      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) {
            //阻止默認瀏覽器動作(W3C)
            e.preventDefault()
          } else {
            //IE中阻止函數(shù)器默認動作的方式
            window.event.returnValue = false
          }
          return false
        })  //阻止冒泡行為和默認右鍵菜單事件，刪除該點
        document.getElementById('myBiaoZhuDiv').appendChild(div)
      },
    },
    watch: {},
    computed: {},
    created () {
    },
    mounted () {
      document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
        if(e && e.preventDefault) {
          //阻止默認瀏覽器動作(W3C)
          e.preventDefault()
        } else {
          //IE中阻止函數(shù)器默認動作的方式
          window.event.returnValue = false
        }
        return false
      })      //阻止冒泡行為和默認右鍵菜單事件
      document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        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)
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y
            })
            this.createMarker(x,y)
          }
        }
      }
    },
    beforeDestroy () {
    },
    destroyed () {
    },
  }
</script>

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

您可能感興趣的文章: