vue怎么使用js对图片进行点击标注圆点并记录它的坐标

这篇文章主要介绍“Vue怎么使用js对图片进行点击标注圆点并记录它的坐标”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么使用js对图片进行点击标注圆点并记录它的坐标”文章能帮助大家解决问题。

功能

• 点击开始标注按钮后才可以对图片进行标注

• 在图片区域内单机左键才可进行加点

• 在标注点上右击删除该点，在图片上右击无效果

• 完成标注后点击完成标注按钮后，结束标注，此后点击图片不再加点

标注前

标注后

打印记录坐标点

这个坐标看你自己需求，是相对图片的百分比坐标，还是相对整个窗口的坐标，js都可以实现的

代码实现

我先说一说关键功能实现的js代码（里面涉及了date的数据，所以需要看下后面的全部代码实现），后面就是全部代码

判断鼠标是否右击

if(e.button !== 2)       //判断鼠标是否右击

阻止冒泡行为和默认右键菜单事件

document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{        if(e && e.preventDefault) {          //阻止默认浏览器动作(W3C)          e.preventDefault()        } else {          //IE中阻止函数器默认动作的方式          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中阻止函数器默认动作的方式        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">开始标注</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:[],           //斑马线的数组        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中阻止函数器默认动作的方式            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中阻止函数器默认动作的方式          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>

关于“vue怎么使用js对图片进行点击标注圆点并记录它的坐标”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。