vue 点击对图片进行标注并记录当前的坐标

功能如下：

1、在图片区域内，点击鼠标左键对图片进行标注，并添加标注图片；

2、鼠标右键点击已标注图片删除当前标注。

<div class="myBiaoZhu" id="myBiaoZhuDiv"><imgid="myBiaoZhu":src="parseImgUrl"style="width:1000px;height:638px;"alt=""/></div>

 data() {return {parseImgUrl:"",pointImg: require("../../../public/01.svg"),pointSize: 10, //点的大小banMa: [],};},

mounted() {document.getElementById("myBiaoZhu").oncontextmenu = e => {if (e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault();} else {//IE中阻止函数器默认动作的方式window.event.returnValue = false;}return false;}; //阻止冒泡行为和默认右键菜单事件// console.log(196, this.parseImgUr == undefined);document.getElementById("myBiaoZhu").onmousedown = e => {e = e || window.event;// console.log(this.serialNumber);// console.log(this.serialNumber.length);// debugger;if (this.serialNumber.length == 0 && this.parseImgUrl.length > 0) {// console.log(this.banMa.length);this.$refs.selectEquipment.visible = true;this.$refs.selectEquipment.formConfig.isShowSubmitBtn = true;return false;}if (e.button !== 2 ) {//判断是否右击/*event.screenX是屏幕左上角到鼠标当前位置的x轴距离;event.clientX是浏览器左上角到鼠标当前位置的x轴距离;event.setoffX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离;*/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,positionLat: x,positionLng: y,});this.createMarker(x, y);}};},


methods: {//画点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 * 4.4 + "px";div.style.height = this.pointSize * 5.8 + "px";// div.style.backgroundColor = this.pointColor;div.style.background = "url(" + this.pointImg + ") no-repeat";div.style.position = "absolute";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)// );this.banMa = [];this.banMa.push({ regionId: this.regionId });this.unbunding(); // 解绑接口 用不到删除即可if (e && e.preventDefault) {//阻止默认浏览器动作(W3C)e.preventDefault();} else {//IE中阻止函数器默认动作的方式window.event.returnValue = false;}return false;};document.getElementById("myBiaoZhuDiv").appendChild(div);this.submitEqArr();  // 提交接口 用不到删除即可},},

参考链接：https://blog.csdn.net/m0_46627730/article/details/106583908?utm_term=vue%E5%9B%BE%E7%89%87%E7%82%B9%E5%87%BB%E4%BD%8D%E7%BD%AE&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-1-106583908&spm=3001.4430

vue 点击对图片进行标注并记录当前的坐标相关推荐

VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽 -----个人记录
VUE实现前台图片标注(添加矩形框).放大.缩小.拖拽需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可 ...
js 点击改变内容与vue 点击改变内容
js 的代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
vue限制点击次数_vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色只能点击一个修改资料--类别类别保存 {{item.msg}} 最多可选择三项 mui.init() var categroy = new Vue({ el:'#categr ...
html编辑点击取消复原,vue点击编辑按钮，内容变成input可以修改，也可以删除
一.效果图1 图2,点击报错之后,又变成图1的效果二.使用到了element UI中的以下组件: 三.使用的关键点是vue中的v-if指令四.关键代码如下 HTML部分添加街道编辑保存 @ ...
Vue导航点击路由跳转后样式不变
Vue导航点击路由跳转后样式不变 <template><ul><li :class="{active:isActive==1}" @click=&qu ...
vue点击ul中的li显示，点击其他地方隐藏
vue点击ul中的li显示弹框,点击其他地方隐藏弹框注意:ref="seatTipOperation" <ulref="seatTipOperation" ...
vue 点击文字input_vue input实现点击按钮文字增删功能示例
本文实例讲述了vue input实现点击按钮文字增删功能.分享给大家供大家参考,具体如下: content="width=device-width, user-scalable=no, in ...
vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能方式一:js实现全屏全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...

vue 点击对图片进行标注并记录当前的坐标

vue 点击对图片进行标注并记录当前的坐标相关推荐

最新文章

热门文章