vue在图片标注矩形框

<template><div id="test" style="user-select: none;"><button @click="fangda">放大</button><button @click="suoxiao">缩小</button><button v-show="isTrue" @click="gai">添加</button><button v-show="!isTrue" @click="gai">移动</button><div class="content"><div:style="{transform: 'scale(' + num + ')',position: 'relative',width: '100%',height: '100%',}"@mousedown="moveMouse"@click="getOffect"><divv-for="(item, index) in boxArry":key="index":ref="'biaozhu' + index":class="'biaozhu' + index == 'biaozhu' + b_i ? 'biaozhu b_border' : 'biaozhu'":style="{width: item.width + 'px',height: item.height + 'px',position: 'absolute',left: item.left + 'px',top: item.top + 'px',background: 'rgba(43,100,206,0.3)',border: 'none',}"@mousedown.stop="move"@click="handelClick(index)"><div v-if="b_i == index" class="r_b" @mousedown="mouseMove11"></div></div><div:style="{height: biaozhuHeight + 'px',width: biaozhuWidth + 'px',top: biaozhuTop + 'px',left: biaozhuLeft + 'px',position: 'absolute',background: 'rgba(43,100,206,0.3)',}"></div><imgstyle="width: 100%; height: 100%; pointer-events: none;"src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3479844176,2436830052&fm=26&gp=0.jpg"alt=""@mousedown="isTrue ? null : move"/></div></div></div>
</template>
<script>export default {directives: {drag: function(el) {let dragBox = el //获取当前元素dragBox.onmousedown = (e) => {//算出鼠标相对元素的位置let disX = e.clientX - dragBox.offsetLeftlet disY = e.clientY - dragBox.offsetTopconsole.log(disX, disY)document.onmousemove = (e) => {//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY//移动当前元素dragBox.style.left = left + 'px'dragBox.style.top = top + 'px'console.log(left, top, '111111111')}document.onmouseup = (e) => {//鼠标弹起来的时候不再移动document.onmousemove = null//预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）document.onmouseup = null}}},},data() {return {num: 1,boxArry: [],isTrue: false,width: '',height: '',left: '',top: '',b_i: '',biaozhuHeight: 0,biaozhuWidth: 0,biaozhuTop: 0,biaozhuLeft: 0,}},methods: {getVuex() {console.log(this.$store.state.treeData)},commitVuex() {this.$store.commit('changeTreeData', { a: 1, b: 2 })},mouseOver2(e) {document.onmousedown = (e) => {let odiv = e.target //获取目标元素//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetToplet left = e.clientX - disXlet top = e.clientY - disY//绑定元素位置到positionX和positionY上面this.positionX = topthis.positionY = leftconsole.log(this.boxArry, this.dragsIndex)//移动当前元素this.boxArry[this.b_i].width = leftthis.boxArry[this.b_i].height = top}},drags(e) {console.log(e)},mouseMove11(e) {// console.log(e,index)let odiv = e.target //获取目标元素//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTop// debugger;e.target.onmousemove = (e) => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置// console.log('aaaaaaaaaaaaa',e)let left = e.clientX - disXlet top = e.clientY - disY//绑定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left// console.log(this.boxArry,this.dragsIndex)//移动当前元素this.boxArry[this.b_i].width = leftthis.boxArry[this.b_i].height = tope.target.onmouseup = (e) => {e.target.onmousemove = null// document.onmouseup = null;}}},gai() {this.isTrue = !this.isTrue},getOffect(e) {console.log(e)document.onmouseup = null// this.left=e.offsetX//     this.top=e.offsetY},moveMouse(e) {let odiv = e.target //获取目标元素//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopconsole.log(disX, disY)if (this.isTrue) {// 拖动document.onmousemove = (e) => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY//绑定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left//移动当前元素odiv.style.left = left + 'px'odiv.style.top = top + 'px'}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}} else {// 添加divconsole.log(e)document.onmousemove = (e) => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = disX - odiv.getBoundingClientRect().xlet top = disY - odiv.getBoundingClientRect().yconsole.log(e.target.offsetLeft)this.width = (e.clientX - disX) / this.numthis.height = (e.clientY - disY) / this.numthis.biaozhuWidth = this.widththis.biaozhuHeight = this.heightthis.biaozhuLeft = leftthis.biaozhuTop = topdocument.onmouseup = (e) => {let left = disX - odiv.getBoundingClientRect().xlet top = disY - odiv.getBoundingClientRect().ythis.width = (e.clientX - disX) / this.numthis.height = (e.clientY - disY) / this.numconsole.log(e.target.getBoundingClientRect(), disX, disY)if (this.width > 5 && this.height > 5) {this.boxArry.push({width: this.width,height: this.height,left: left,top: top,})}this.biaozhuWidth = 0this.biaozhuHeight = 0this.biaozhuLeft = 0this.biaozhuTop = 0document.onmousemove = nulldocument.onmouseup = null}}}},move(e) {let odiv = e.target //获取目标元素//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopdocument.onmousemove = (e) => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY//绑定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left//移动当前元素odiv.style.left = left + 'px'odiv.style.top = top + 'px'}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}},fangda() {this.num += 0.1},suoxiao() {this.num -= 0.1},tianjia() {this.boxArry.push({width: 100,height: 100,left: 20,top: 20,})},handelClick(i) {this.b_i = iconsole.log(i)},dragstart(event, data) {// console.log('drag')// event.dataTransfer.setData('item', data)},dragend(event) {// event.dataTransfer.clearData()},},}
</script>
<style lang="less">#test {/deep/.el-dialog__body {padding: 10px 20px !important;}.content {width: 800px;height: 500px;background: rgb(0, 255, 64);margin: 0 auto;overflow: hidden;position: relative;.drag_box {width: 150px;height: 90px;border: 1px solid #666;background-color: #ccc;/* 使用定位，脱离文档流 */position: relative;top: 100px;left: 100px;/* 鼠标移入变成拖拽手势 */cursor: move;z-index: 3000;}.b_border {border: 1px solid red !important;}.biaozhu {z-index: 9999999;}.r_b {position: absolute;right: 0;bottom: 0;width: 20px;height: 20px;background: red;}.r_b:hover {cursor: se-resize;}}}
</style>

vue在图片标注矩形框相关推荐

用labelme标注矩形框和关键点得到的json文件转txt格式用于yolov5-face训练
目录我用labelme标注完的json文件长这样:标注了两种:矩形框和点我要转换的txt格式长这样: json格式转txt如下: 从txt查看标注结果参考的这位博主并在此基础上做了改动.(484 ...
学习之路（二）：按照图片内矩形框进行裁剪
OpenCV的使用前言一.OpenCV.图片二值化.图片的腐蚀膨胀学习二.使用 1.引入库 2.读取图片 3.对图片进行腐蚀 4.获取矩形框 5.对图片进行裁剪完整代码三.最终效果前言最 ...
Python tkinter 打开本地图片进行矩形框标注
经常会遇到json报文中有图片URL,以及ROI的坐标x.y.w.h,然后需要验证下这个框在图片的什么位置,一般时候只能根据坐标值定性目测下.最近用tkinter写了个打开本地图片并且将rect的坐标 ...
Android 实现一个可以拖动大小，移动区域的矩形框
这个标题好难取啊,真的不太好用文字表达这个意思.还是来张图吧. 就像这样的一个矩形框,是可以通过拖动边角来改变大小的,同时,拖动非边角的区域,还可以移动这个矩形框. 嗯,想实现的就是这样的一个矩形框. ...
VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽 -----个人记录
VUE实现前台图片标注(添加矩形框).放大.缩小.拖拽需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可 ...
VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放
VUE3 实现前台图片标注功能包括: 鼠标左键拖动添加矩形框标记区域,鼠标点击已绘制的矩形: 选中矩形,并绘制不同选中效果: 鼠标在已绘制的矩形中按住左键拖动,选中并移动矩形:选中矩形后鼠标在选中矩 ...
opencv之获取图片的width和height以及矩形框标注
获取图片的width和height imread函数读取一张图片时,其返回值为一个矩阵,矩阵的行数代表height,矩阵的列数代表width,不要搞混,也就是shape[0]代表height,shap ...
canvas实现矩形框，用来进行图片框选
canvas实现图片框选-js版由于项目中需要进行图片部分区域框选,用来做图片标注工作,之前也找过多种方案,比如徒手用div来实现,后来绕了一圈之后,还是发现canvas非常便捷,于是乎将项目中的核 ...
vue下利用canvas实现在线图片标注
web端实现在线图片标注在此做下记录,功能类似微信截图时的标注,包含画线.框.箭头和文字输入,思路是利用canvas画布,先把要标注的图片使用drawImage方法画在画布上,然后定义画线.框.箭头和 ...

vue在图片标注矩形框

vue在图片标注矩形框相关推荐

最新文章

热门文章