这篇文章主要介绍了vue如何使用js对图片进行点击标注圆点并记录它的坐标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
最近和深度学习方面搞个东西，需要前端对图片进行标注，呃，这个我上网也没找到什么好方法，只能自己通过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：
开始标注 标注完成
css：
js：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是vue如何使用js对图片进行点击标注圆点并记录它的坐标的详细内容，更多请关注0133技术站其它相关文章！
