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

发布时间:2022-04-28 14:49:44 作者:iii
来源:亿速云 阅读:1268

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

功能

标注前

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

标注后

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

打印记录坐标点

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

vue怎么使用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对图片进行点击标注圆点并记录它的坐标”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. 如何使用Vue实现点击显示不同图片的效果
  2. 使用Vue怎么对图片地址进行拼接

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue js

上一篇:Java中的Spring循环依赖实例分析

下一篇:Java注释、数据类型、常量与变量怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》