Skip to content

D
DA-Platform

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit 013993c0 by 张欣玥
Options

image-new

parent 5c668a0c
Showing with 333 additions and 160 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
<template> <template>
<div class="layout" :style="{ height : height_res+'px'}"> <div class="layout" :style="{ height : height_res+'px'}">
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}"> <el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<!-- 侧边栏--> <transition name="fade">
<div class = "alert1" v-show="isAlert1">
<div style="flex: 1;display: flex;align-items:center;font-size: 25px">标注</div>
<div style="flex: 1;display: flex;align-items:center;">
<div style="flex: 1;justify-content: left;display: flex;">标注名称</div>
<input disabled="true" readOnly="true" :placeholder="labelName" style="flex: 3;height: 20px;border: #d4d4d4 solid 1px">
</div>
<div style="flex: 2.5;display: flex;align-items: flex-start;">
<div style="flex: 1;justify-content: left;display: flex;">标注坐标</div>
<textarea disabled="true" readOnly="true" :placeholder="labelPosition" style="flex: 3;;height: 130px;border: #d4d4d4 solid 1px">
</textarea>
</div>
<div style="flex: 1;display: flex;justify-content: flex-end;align-items:center;">
<el-button @click="isAlert1 = false">取消</el-button>
<el-button @click="deleteLabelInList(labelNow)">删除</el-button>
</div>
</div>
</transition>
<transition name="fade">
<div v-show="isAlert1" style="z-index:4000;position: fixed;background-color: rgba(0,0,0,0.42);width: 100%;height: 100%;top: 0;left: 0"></div>
</transition>
<!-- 侧边栏-->
<el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px"> <el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<div class="sidebar-box"> <div class="sidebar-box">
<div class="tool-button-left"> <div class="tool-button-left">
...@@ -35,7 +57,7 @@ ...@@ -35,7 +57,7 @@
<div class="img-title-list-box"> <div class="img-title-list-box">
<div id="img-title-list" style="user-select:none"> <div id="img-title-list" style="user-select:none">
<div v-for="(item, index) in data[pictureId].children" :key="item.id" class="listLeft" style="text-align: left" @dblclick="deleteLabelInList(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()"> <div v-for="(item, index) in data[pictureId].children" :key="item.id" class="listLeft" style="text-align: left" @dblclick="labelInfo(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()">
{{index+1}}. &nbsp; {{item.label}} {{index+1}}. &nbsp; {{item.label}}
</div> </div>
<!-- <el-tree--> <!-- <el-tree-->
...@@ -122,6 +144,10 @@ export default { ...@@ -122,6 +144,10 @@ export default {
name: 'imageAnnotation', name: 'imageAnnotation',
data () { data () {
return { return {
labelNow: 0,
labelName: '111',
labelPosition: '',
isAlert1: false,
radio1: '矩形标注', radio1: '矩形标注',
pictureId: 1, pictureId: 1,
scaleSize: 1, scaleSize: 1,
...@@ -208,14 +234,13 @@ export default { ...@@ -208,14 +234,13 @@ export default {
// 加载第一张图片 // 加载第一张图片
var imgUrl = this.data[0].imageUrl var imgUrl = this.data[0].imageUrl
console.log(this.data.length+" 图片张数"); console.log(this.data.length + ' 图片张数')
var img = new Image() var img = new Image()
img.src = imgUrl img.src = imgUrl
var _this = this var _this = this
var i = 0
var i = 0; for (i = 0; i < this.data.length; i++) {
for (i = 0;i < this.data.length;i++) {
var labelAll = new Array() var labelAll = new Array()
_this.canvasAll.push(labelAll) _this.canvasAll.push(labelAll)
} }
...@@ -252,26 +277,35 @@ export default { ...@@ -252,26 +277,35 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原数据库里的标注记录 // 还原数据库里的标注记录
let id = _this.pictureId; let id = _this.pictureId
console.log('id = '+id) console.log('id = ' + id)
_this.data.forEach(function (element,index) { _this.data.forEach(function (element, index) {
var indexPic = index var indexPic = index
element.children.forEach(function (element) { element.children.forEach(function (element) {
// console.log('还原记录start') // console.log('还原记录start')
// console.log(element) // console.log(element)
var r1 = element.pointList[0].X var num = []
var r2 = element.pointList[0].Y element.pointList.forEach(function (element1) {
var rx = element.pointList[1].X - element.pointList[0].X console.log('pointlist')
var ry = element.pointList[1].Y - element.pointList[0].Y console.log(element1)
var num = [r1, r2, rx, ry] num.push(element1.X)
num.push(element1.Y)
})
// var r1 = element.pointList[0].X
// var r2 = element.pointList[0].Y
// var rx = element.pointList[1].X
// var ry = element.pointList[1].Y
// var num = [r1, r2, rx, ry]
console.log(num)
_this.canvasAll[indexPic].push(num) _this.canvasAll[indexPic].push(num)
}) })
}) })
...@@ -288,13 +322,24 @@ export default { ...@@ -288,13 +322,24 @@ export default {
// }) // })
// 还原标注 // 还原标注
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.restoreCanvas()
_this.canvasAll[id].forEach(function (element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.ctx.beginPath()
// console.log(element) // // _this.ctx.moveTo()
}) // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.stroke(); // _this.canvasAll[id].forEach(function (element) {
// let len = element.length / 2
// var i = 0
// for (i = 0; i < len; i++) {
// _this.ctx.lineTo(element[2 * i], element[2 * i + 1])
// }
// // _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// // console.log(element)
// })
// // _this.ctx.stroke()
// _this.ctx.beginPath()
// _this.ctx.fill()
_this.brush_Listener() _this.brush_Listener()
} }
...@@ -316,7 +361,7 @@ export default { ...@@ -316,7 +361,7 @@ export default {
}, },
watch: { watch: {
radio1: function f () { radio1: function f () {
if (this.radio1 == '矩形标注'){ if (this.radio1 == '矩形标注') {
console.log('RR') console.log('RR')
this.canvas.style.cursor = 'crosshair' this.canvas.style.cursor = 'crosshair'
} else if (this.radio1 == '多边形标注') { } else if (this.radio1 == '多边形标注') {
...@@ -328,6 +373,27 @@ export default { ...@@ -328,6 +373,27 @@ export default {
} }
}, },
methods: { methods: {
// 还原标注
restoreCanvas () {
var _this = this
let id = _this.pictureId
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element) {
_this.ctx.beginPath()
// console.log(element)
let len = element.length / 2
var i = 0
_this.ctx.moveTo(element[0], element[1])
for (i = 1; i < len; i++) {
_this.ctx.lineTo(element[2 * i], element[2 * i + 1])
}
// _this.ctx.stroke()
_this.ctx.closePath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fill()
})
},
goBigger () { goBigger () {
var scale = this.scaleSize var scale = this.scaleSize
if (scale < 2) { if (scale < 2) {
...@@ -350,35 +416,61 @@ export default { ...@@ -350,35 +416,61 @@ export default {
this.scaleSize = 0.5 this.scaleSize = 0.5
} }
}, },
labelEnter(index){ labelEnter (index) {
// console.log('enter!') // console.log('enter!')
var indexLabel = index
var _this = this var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); let id = _this.pictureId
_this.ctx.beginPath()
let id = _this.pictureId; _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element, index1) { _this.canvasAll[id].forEach(function (element, index1) {
if(index1 == indexLabel){ // console.log(element)
_this.ctx.fillStyle = 'rgba(255,0,0,0.35)'; _this.ctx.beginPath()
var len = element.length / 2
var i = 0
_this.ctx.moveTo(element[0], element[1])
for (i = 1; i < len; i++) {
_this.ctx.lineTo(element[2 * i], element[2 * i + 1])
}
// _this.ctx.stroke()
_this.ctx.closePath()
if (index === index1) {
// 改颜色
_this.ctx.fillStyle = 'rgba(255,0,0,0.54)'
} else { } else {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
} }
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); _this.ctx.fill()
// console.log(index) // if (index === index1) {
// // 文字坐标
// _this.ctx.fillStyle = 'rgb(0,0,0)'
// _this.ctx.font = '15px Georgia'
// for (i = 0; i < len; i++) {
// _this.ctx.fillText('(' + element[2 * i] + ',' + element[2 * i + 1] + ')', element[2 * i] - 20, element[2 * i + 1] - 5);
// }
// }
}) })
_this.ctx.stroke();
}, },
labelLeave(){ labelLeave () {
var _this = this var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); let id = _this.pictureId
_this.ctx.beginPath()
let id = _this.pictureId; _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element, index1) {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.canvasAll[id].forEach(function (element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); _this.ctx.beginPath()
// console.log(index) // console.log(element)
let len = element.length / 2
var i = 0
_this.ctx.moveTo(element[0], element[1])
for (i = 1; i < len; i++) {
_this.ctx.lineTo(element[2 * i], element[2 * i + 1])
}
// _this.ctx.stroke()
_this.ctx.closePath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fill()
}) })
_this.ctx.stroke();
}, },
jumpToImage (index) { jumpToImage (index) {
this.scaleSize = 1 this.scaleSize = 1
...@@ -398,7 +490,7 @@ export default { ...@@ -398,7 +490,7 @@ export default {
// myParent.removeChild(myParent.childNodes[1]) // myParent.removeChild(myParent.childNodes[1])
for (var i = myParent.childNodes.length - 1; i >= 0; i--) { for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]); myParent.removeChild(myParent.childNodes[i])
} }
var myImage = document.createElement('div') var myImage = document.createElement('div')
...@@ -425,28 +517,61 @@ export default { ...@@ -425,28 +517,61 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原标注 // 还原标注
let id = _this.pictureId; _this.restoreCanvas()
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // let id = _this.pictureId
_this.canvasAll[id].forEach(function (element) { // _this.ctx.beginPath()
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
// console.log(element) // _this.canvasAll[id].forEach(function (element) {
}) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
_this.ctx.stroke(); // // console.log(element)
// })
// _this.ctx.stroke()
_this.brush_Listener() _this.brush_Listener()
} }
}, },
labelInfo (index) {
this.labelNow = index
this.isAlert1 = true
let id = this.pictureId
var children = this.data[this.pictureId].children
var tmp = this.canvasAll[id]
this.labelName = children[index].label
this.labelPosition = ''
var lenTmp = tmp[index].length / 2;
var i = 0;
for (i = 0; i < lenTmp; i++) {
this.labelPosition += '坐标' + (i + 1) + '： （'
this.labelPosition += tmp[index][2*i]
this.labelPosition += ','
this.labelPosition += tmp[index][2*i+1]
this.labelPosition += '）\n'
}
// 从节点里删
// children.splice(index, 1)
// 从历史记录里删
// this.canvasAll[id].splice(index, 1)
// 重画标注
this.restoreCanvas()
},
deleteLabelInList (index) { deleteLabelInList (index) {
let id = this.pictureId; // this.isAlert1 = true
this.isAlert1 = false
let id = this.pictureId
var children = this.data[this.pictureId].children var children = this.data[this.pictureId].children
// 从节点里删 // 从节点里删
children.splice(index, 1) children.splice(index, 1)
...@@ -454,31 +579,33 @@ export default { ...@@ -454,31 +579,33 @@ export default {
this.canvasAll[id].splice(index, 1) this.canvasAll[id].splice(index, 1)
// 重画标注 // 重画标注
var _this = this this.restoreCanvas()
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); //
_this.ctx.beginPath() // var _this = this
_this.canvasAll[id].forEach(function (element, index1) { // _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // _this.ctx.beginPath()
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.canvasAll[id].forEach(function (element, index1) {
// console.log(index) // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
}) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
_this.ctx.stroke(); // // console.log(index)
// })
// _this.ctx.stroke()
}, },
handleNodeClick (data, node) { handleNodeClick (data, node) {
console.log(node) console.log(node)
console.log(data) console.log(data)
// console.log('data.id = ' + node.id) // console.log('data.id = ' + node.id)
const parent = node.parent; const parent = node.parent
const children = parent.data.children || parent.data; const children = parent.data.children || parent.data
const index = children.findIndex(d =>{ const index = children.findIndex(d => {
return d.$treeNodeId == node.id; return d.$treeNodeId == node.id
} }
) )
console.log('index = ' + index) console.log('index = ' + index)
children.splice(index, 1); children.splice(index, 1)
}, },
// 动态高度 // 动态高度
get_height () { get_height () {
...@@ -512,7 +639,7 @@ export default { ...@@ -512,7 +639,7 @@ export default {
// alert(len); // alert(len);
// alert(count); // alert(count);
if (count < len - 1) { if (count < len - 1) {
console.log('right'); console.log('right')
this.pictureId++ this.pictureId++
this.scaleSize = 1 this.scaleSize = 1
...@@ -528,7 +655,7 @@ export default { ...@@ -528,7 +655,7 @@ export default {
var myParent = document.getElementById('center_pic') var myParent = document.getElementById('center_pic')
for (var i = myParent.childNodes.length - 1; i >= 0; i--) { for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]); myParent.removeChild(myParent.childNodes[i])
} }
// myParent.removeChild(myParent.childNodes[0]) // myParent.removeChild(myParent.childNodes[0])
...@@ -557,22 +684,23 @@ export default { ...@@ -557,22 +684,23 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原标注 // 还原标注
let id = _this.pictureId; _this.restoreCanvas()
_this.ctx.beginPath(); // let id = _this.pictureId
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // _this.ctx.beginPath()
_this.canvasAll[id].forEach(function(element) { // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.canvasAll[id].forEach(function (element) {
// console.log(element) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
}) // // console.log(element)
_this.ctx.stroke(); // })
// _this.ctx.stroke()
_this.brush_Listener() _this.brush_Listener()
} }
...@@ -586,7 +714,7 @@ export default { ...@@ -586,7 +714,7 @@ export default {
// alert(count); // alert(count);
if (count > 0) { if (count > 0) {
console.log("left"); console.log('left')
this.pictureId-- this.pictureId--
this.scaleSize = 1 this.scaleSize = 1
...@@ -605,7 +733,7 @@ export default { ...@@ -605,7 +733,7 @@ export default {
// myParent.removeChild(myParent.childNodes[1]) // myParent.removeChild(myParent.childNodes[1])
for (var i = myParent.childNodes.length - 1; i >= 0; i--) { for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]); myParent.removeChild(myParent.childNodes[i])
} }
var myImage = document.createElement('div') var myImage = document.createElement('div')
...@@ -632,22 +760,23 @@ export default { ...@@ -632,22 +760,23 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原标注 // 还原标注
let id = _this.pictureId; _this.restoreCanvas()
_this.ctx.beginPath(); // let id = _this.pictureId
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // _this.ctx.beginPath()
_this.canvasAll[id].forEach(function(element) { // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.canvasAll[id].forEach(function (element) {
// console.log(element) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
}) // // console.log(element)
_this.ctx.stroke(); // })
// _this.ctx.stroke()
_this.brush_Listener() _this.brush_Listener()
} }
...@@ -701,7 +830,7 @@ export default { ...@@ -701,7 +830,7 @@ export default {
data: { data: {
relationId: 123 relationId: 123
} }
}).then(res =>{ }).then(res => {
if (res.code === 1) { if (res.code === 1) {
self.$store.commit('setImageData', res.data) self.$store.commit('setImageData', res.data)
console.log(this.$store.state.imageData) console.log(this.$store.state.imageData)
...@@ -726,21 +855,21 @@ export default { ...@@ -726,21 +855,21 @@ export default {
// 添加标签前弹窗输入标签名字 // 添加标签前弹窗输入标签名字
addLabel () { addLabel () {
var labelName; var labelName
this.$prompt('请输入标注名称', '提示', { this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消'
}).then(({ value }) => { }).then(({ value }) => {
labelName = value; labelName = value
let currentImageId = this.pictureId let currentImageId = this.pictureId
const newLabel = {label: labelName} const newLabel = {label: labelName}
this.data[currentImageId].children.push(newLabel) this.data[currentImageId].children.push(newLabel)
}).catch(() => { }).catch(() => {
labelName = 'iss'; labelName = 'iss'
let currentImageId = this.pictureId let currentImageId = this.pictureId
const newLabel = {label: labelName} const newLabel = {label: labelName}
this.data[currentImageId].children.push(newLabel) this.data[currentImageId].children.push(newLabel)
}); })
}, },
deleteLabel () { deleteLabel () {
let currentLabelId = 0 let currentLabelId = 0
...@@ -778,29 +907,28 @@ export default { ...@@ -778,29 +907,28 @@ export default {
// 监听鼠标事件 // 监听鼠标事件
brush_Listener () { brush_Listener () {
let r1, r2; let r1, r2
let _this = this; let _this = this
this.canvas.onmousedown = function (e) { this.canvas.onmousedown = function (e) {
console.log('onmousedown'); console.log('onmousedown')
if (_this.radio1 == '矩形标注'){ if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
r1 = e.layerX; r1 = e.layerX
r2 = e.layerY; r2 = e.layerY
_this.createR(e, 'begin', r1, r2); _this.createR(e, 'begin', r1, r2)
} else if (_this.radio1 == '多边形标注') { } else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} else { } else {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} }
} }
this.canvas.onmouseup = function(e) { this.canvas.onmouseup = function (e) {
console.log('onmouseup'); console.log('onmouseup')
if (_this.radio1 == '矩形标注'){ if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.createR(e, 'end', r1, r2); _this.createR(e, 'end', r1, r2)
r1 = null; r1 = null
r2 = null; r2 = null
} else if (_this.radio1 == '多边形标注') { } else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} else { } else {
...@@ -809,75 +937,71 @@ export default { ...@@ -809,75 +937,71 @@ export default {
} }
}, },
// 画矩形 // 画矩形
createR(e, status, r1, r2) { createR (e, status, r1, r2) {
let _this = this; let _this = this
let r; let r
if (status == 'begin') { if (status == 'begin') {
console.log('onmousemove'); console.log('onmousemove')
_this.canvas.onmousemove = function(e) { _this.canvas.onmousemove = function (e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1; let rx = e.layerX - r1
let ry = e.layerY - r2; let ry = e.layerY - r2
_this.ctx.beginPath();
_this.ctx.rect(r1,r2,rx,ry);
// console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry) // console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry)
// 把每个标注画出来 // 把每个标注画出来
let id = _this.pictureId; _this.restoreCanvas()
_this.canvasAll[id].forEach(function (element, index) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); _this.ctx.beginPath()
// console.log(index) _this.ctx.rect(r1, r2, rx, ry)
}) _this.ctx.closePath()
_this.ctx.strokeStyle = 'black'
_this.ctx.stroke()
// let id = _this.pictureId
// _this.canvasAll[id].forEach(function (element, index) {
// _this.ctx.fillRect(element[0], element[1], element[2], element[3])
// // console.log(index)
// })
// _this.ctx.globalAlpha = 0.5; // _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height); // _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
} }
} else if (status == "end") { } else if (status == 'end') {
_this.canvas.onmousemove = function(e) { _this.canvas.onmousemove = function (e) {
} }
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
let rx = e.layerX - r1; let rx = e.layerX - r1
let ry = e.layerY - r2; let ry = e.layerY - r2
// 排除点击就添加标签的可能 // 排除点击就添加标签的可能
if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) { if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) {
_this.ctx.beginPath(); _this.ctx.beginPath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(r1,r2,rx,ry); _this.ctx.fillRect(r1, r2, rx, ry)
// _this.ctx.stroke()
// 把每个标注画出来 // 把每个标注画出来
let id = _this.pictureId;
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
let id = _this.pictureId
// 存到记录里 // 存到记录里
var num = [r1,r2,rx,ry] var num = [r1, r2, r1 + rx, r2, r1 + rx, r2 + ry, r1, r2 + ry]
_this.canvasAll[id].push(num) _this.canvasAll[id].push(num)
_this.addLabel() _this.addLabel()
_this.restoreCanvas()
// console.log('id = ',id) // console.log('id = ',id)
// console.log(_this.canvasAll) // console.log(_this.canvasAll)
// _this.ctx.globalAlpha = 0.5; // _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke(); } else {
} _this.restoreCanvas()
else{
let id = _this.pictureId;
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
} }
} }
}, },
save() { save () {
//先把格式转换回去 // 先把格式转换回去
var outputData = [] var outputData = []
this.data.forEach(element => { this.data.forEach(element => {
let newData = { let newData = {
...@@ -908,6 +1032,27 @@ export default { ...@@ -908,6 +1032,27 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.alert1{
width: 400px;
height: 350px;
background-color: white;
position: fixed;
left: calc(50% - 200px);
top: calc(50% - 175px);
z-index: 5000;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
border-radius: 5px;
display: flex;
flex-direction: column;
padding: 10px 30px;
}
#button-left,#button-minus,#button-rank,#button-right,#button-plus{ #button-left,#button-minus,#button-rank,#button-right,#button-plus{
color: #409EFF; color: #409EFF;
......
DAPlatform-front/src/mock/api.js
...@@ -24,7 +24,19 @@ Mock.mock('http://localhost:9100/api/image', { ...@@ -24,7 +24,19 @@ Mock.mock('http://localhost:9100/api/image', {
}, { }, {
pointId: '1-2', pointId: '1-2',
X: 600, X: 600,
Y: 300
}, {
pointId: '1-3',
X: 700,
Y: 350
}, {
pointId: '1-4',
X: 600,
Y: 400 Y: 400
}, {
pointId: '1-5',
X: 450,
Y: 350
}] }]
}, { }, {
labelId: 1, labelId: 1,
...@@ -36,6 +48,14 @@ Mock.mock('http://localhost:9100/api/image', { ...@@ -36,6 +48,14 @@ Mock.mock('http://localhost:9100/api/image', {
}, { }, {
pointId: '2-2', pointId: '2-2',
X: 200, X: 200,
Y: 100
}, {
pointId: '2-2',
X: 200,
Y: 200
}, {
pointId: '2-2',
X: 100,
Y: 200 Y: 200
}] }]
}] }]
...@@ -52,6 +72,14 @@ Mock.mock('http://localhost:9100/api/image', { ...@@ -52,6 +72,14 @@ Mock.mock('http://localhost:9100/api/image', {
}, { }, {
pointId: '1-2', pointId: '1-2',
X: 300, X: 300,
Y: 100
}, {
pointId: '1-2',
X: 300,
Y: 300
}, {
pointId: '1-2',
X: 100,
Y: 300 Y: 300
}] }]
}] }]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment