Skip to content

D
DA-Platform

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

Commit 596a4e65 by 张欣玥
Options

image-改

parent 321bead0
Showing with 313 additions and 125 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
<template>
<div class="layout" :style="{ height : height_res+'px'}">
<!-- 工具栏-->
<!-- <div class="toolBar">-->
<!-- <el-button-group id="start">-->
<!-- <el-button class="tool-button" type="primary" >保存</el-button>-->
<!-- <el-button class="tool-button" type="primary" >退出</el-button>-->
<!-- </el-button-group>-->
<!-- <el-button-group id="tool">-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>&ndash;&gt;-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
<!-- <el-button class="tool-button" type="primary" >多边形标注</el-button>-->
<!-- <el-button class="tool-button" type="primary" >矩形标注</el-button>-->
<!-- <el-button class="tool-button" type="primary" @click="deleteAnnotation">删除标注</el-button>-->
<!-- </el-button-group>-->
<!-- </div>-->
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<!-- 侧边栏-->
<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="tool-button-left">
<el-button-group id="start">
<el-button class="tool-button" type="primary" @click="save">保存</el-button>
<el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group>
<div style="margin-top: 10px"></div>
<el-button-group id="tool">
<!-- <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>-->
<!-- <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>-->
<el-button class="tool-button" type="primary" >多边形标注</el-button>
<el-button class="tool-button" type="primary" >矩形标注</el-button>
<!--测试用 添加标注区域-->
<el-button class="tool-button" type="primary" @click="addLabel">添加标注区域</el-button>
<!-- <el-button class="tool-button" type="primary" @click="deleteAnnotation">删除</el-button>-->
</el-button-group>
<el-radio-group v-model="radio1">
<el-radio-button label="矩形标注"></el-radio-button>
<el-radio-button label="多边形标注"></el-radio-button>
</el-radio-group>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: 120px" :style="{ height : height_res*0.97-155+'px'}">
<el-aside class="sidebar" style="position: absolute;margin-top: 60px" :style="{ height : 185 +'px'}">
<div class="sidebar-box">
<div>
<div class="img-list-title">图片列表</div>
<div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">图片列表</div>
<div class="img-title-list-box">
<div v-for="(item, index) in data" :key="item.id" style="text-align: left" class="listLeft" @click="jumpToImage(index)">
{{index+1}}. &nbsp; {{item.label}}
</div>
</div>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: 260px" :style="{ height : height_res*0.97-300+'px'}">
<div class="sidebar-box">
<div>
<div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">标注列表</div>
<div class="img-title-list-box">
<div id="img-title-list" style="user-select:none">
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
@node-click="handleNodeClick">
</el-tree>
<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()">
{{index+1}}. &nbsp; {{item.label}}
</div>
<!-- <el-tree-->
<!-- :data="data"-->
<!-- :props="defaultProps"-->
<!-- node-key="id"-->
<!-- @node-click="handleNodeClick">-->
<!-- </el-tree>-->
</div>
</div>
</div>
......@@ -127,6 +122,7 @@ export default {
name: 'imageAnnotation',
data () {
return {
radio1: '矩形标注',
pictureId: 1,
scaleSize: 1,
height_res: 0,
......@@ -141,6 +137,7 @@ export default {
width: null,
height: null
},
// 所有标记历史记录
canvasAll: [],
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
......@@ -203,8 +200,10 @@ export default {
mounted () {
this.getLabelList()
console.log('input')
console.log(this.$store.state.imageData)
this.formExchange(this.$store.state.imageData)
console.log('output')
console.log(this.data)
// 加载第一张图片
......@@ -251,6 +250,7 @@ export default {
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
......@@ -258,6 +258,44 @@ export default {
_this.ctx.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
myParent.appendChild(_this.canvas)
// 还原数据库里的标注记录
let id = _this.pictureId;
console.log('id = '+id)
_this.data.forEach(function (element,index) {
var indexPic = index
element.children.forEach(function (element) {
// console.log('还原记录start')
// console.log(element)
var r1 = element.pointList[0].X
var r2 = element.pointList[0].Y
var rx = element.pointList[1].X - element.pointList[0].X
var ry = element.pointList[1].Y - element.pointList[0].Y
var num = [r1, r2, rx, ry]
_this.canvasAll[indexPic].push(num)
})
})
//
// _this.data[id].children.forEach(function (element) {
// // console.log('还原记录start')
// // console.log(element)
// var r1 = element.pointList[0].X
// var r2 = element.pointList[0].Y
// var rx = element.pointList[1].X - element.pointList[0].X
// var ry = element.pointList[1].Y - element.pointList[0].Y
// var num = [r1,r2,rx,ry]
// _this.canvasAll[id].push(num)
// })
// 还原标注
_this.ctx.beginPath();
_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]);
// console.log(element)
})
_this.ctx.stroke();
_this.brush_Listener()
}
......@@ -276,6 +314,19 @@ export default {
created () {
},
watch: {
radio1: function f () {
if (this.radio1 == '矩形标注'){
console.log('RR')
this.canvas.style.cursor = 'crosshair'
} else if (this.radio1 == '多边形标注') {
console.log('pp')
this.canvas.style.cursor = 'auto'
} else {
this.canvas.style.cursor = 'auto'
}
}
},
methods: {
goBigger () {
var scale = this.scaleSize
......@@ -298,12 +349,120 @@ export default {
} else {
this.scaleSize = 0.5
}
},
labelEnter(index){
// console.log('enter!')
var indexLabel = index
var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.beginPath()
let id = _this.pictureId;
_this.canvasAll[id].forEach(function (element, index1) {
if(index1 == indexLabel){
_this.ctx.fillStyle = 'rgba(255,0,0,0.35)';
} else {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
}
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(index)
})
_this.ctx.stroke();
},
labelLeave(){
var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.beginPath()
let id = _this.pictureId;
_this.canvasAll[id].forEach(function (element, index1) {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(index)
})
_this.ctx.stroke();
},
jumpToImage (index) {
this.scaleSize = 1
this.pictureId = index
var imgUrl = this.data[this.pictureId].imageUrl
var img = new Image()
img.src = imgUrl
var _this = this
img.onload = function () {
_this.imgNow.height = img.height
_this.imgNow.width = img.width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]);
}
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
// myImage.src = this.data[0].imageUrl
myImage.style.pointerEvents = 'none'
myImage.style.height = img.height + 'px'
myImage.style.width = img.width + 'px'
myImage.style.zIndex = '250'
myImage.style.flex = '0 0 ' + img.width + 'px'
myImage.id = 'pic_now'
// myImage.style.alignItems = 'center';
myParent.appendChild(myImage)
_this.canvas = document.createElement('canvas')
_this.canvas.width = img.width
_this.canvas.height = img.height
_this.canvas.style.width = img.width + 'px'
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
_this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
myParent.appendChild(_this.canvas)
// 还原标注
let id = _this.pictureId;
_this.ctx.beginPath();
_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]);
// console.log(element)
})
_this.ctx.stroke();
_this.brush_Listener()
}
},
deleteLabelInList (index) {
let id = this.pictureId;
var children = this.data[this.pictureId].children
// 从节点里删
children.splice(index, 1)
// 从历史记录里删
this.canvasAll[id].splice(index, 1)
// 重画标注
var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.beginPath()
_this.canvasAll[id].forEach(function (element, index1) {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(index)
})
_this.ctx.stroke();
},
handleNodeClick (data, node) {
console.log(node)
......@@ -396,6 +555,7 @@ export default {
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
......@@ -470,6 +630,7 @@ export default {
_this.canvas.style.height = img.height + 'px'
_this.canvas.style.postion = 'absolute'
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px';
......@@ -621,15 +782,30 @@ export default {
let _this = this;
this.canvas.onmousedown = function (e) {
console.log('onmousedown');
r1 = e.layerX;
r2 = e.layerY;
_this.createR(e, 'begin', r1, r2);
if (_this.radio1 == '矩形标注'){
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX;
r2 = e.layerY;
_this.createR(e, 'begin', r1, r2);
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto'
} else {
_this.canvas.style.cursor = 'auto'
}
}
this.canvas.onmouseup = function(e) {
console.log('onmouseup');
_this.createR(e, 'end', r1, r2);
r1 = null;
r2 = null;
if (_this.radio1 == '矩形标注'){
_this.canvas.style.cursor = 'crosshair'
_this.createR(e, 'end', r1, r2);
r1 = null;
r2 = null;
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto'
} else {
_this.canvas.style.cursor = 'auto'
}
}
},
// 画矩形
......@@ -802,6 +978,18 @@ export default {
#buttonBar::selection{
background-color: rgba(255, 255, 255, 0);
}
.listLeft{
background-color: white;
/*padding-top: 5px;*/
height: 24px;
padding-left: 5px;
font-size: 14px;
line-height: 24px;
vertical-align: middle;
}
.listLeft:hover{
background-color: #cbd8ea;
}
.sidebar {
height: 97%;
margin-left: 50px;
......
DAPlatform-front/src/mock/api.js
import Mock from 'mockjs'
// Mock.mock('http://localhost:9100/api/getTasks', {
// 'status': 0,
// 'data|10': [{
// 'id|1-9999': 1,
// 'name|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
// 'creator|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
// 'date': Mock.Random.date('yyyy/MM/dd')
// }]
// })
Mock.mock('http://localhost:9100/api/image', {
code: 1,
data: [{
relationId: 123,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 1.1,
Y: 2.2
}, {
pointId: '1-2',
X: 1.2,
Y: 2.3
}]
}, {
labelId: 1,
label: 'label2',
pointList: [{
pointId: '2-1',
X: 1.1,
Y: 2.2
}, {
pointId: '2-2',
X: 1.2,
Y: 2.3
}]
}]
}, {
relationId: 233,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 1.1,
Y: 2.2
}, {
pointId: '1-2',
X: 1.2,
Y: 2.3
}]
}]
}]
})
// Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, {
// 'status': 0,
// 'data|5-10': [{
// 'id|1-65535': 1,
// 'fileNum|10-50': 1,
// 'template|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板'],
// 'type|1': ['文本', '图片', '图层']
// }]
// })
Mock.mock(/\/api\/file\/getFiles\?pieceId=[0-9]+/, {
'status': 0,
'data|1-5': [{
'id|1-65535': 1,
'name': '标注文件.xxx',
'size|10-30': 1,
'state|0-1': 1
}]
})
import Mock from 'mockjs'
// Mock.mock('http://localhost:9100/api/getTasks', {
// 'status': 0,
// 'data|10': [{
// 'id|1-9999': 1,
// 'name|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
// 'creator|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
// 'date': Mock.Random.date('yyyy/MM/dd')
// }]
// })
Mock.mock('http://localhost:9100/api/image', {
code: 1,
data: [{
relationId: 123,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 500,
Y: 300
}, {
pointId: '1-2',
X: 600,
Y: 400
}]
}, {
labelId: 1,
label: 'label2',
pointList: [{
pointId: '2-1',
X: 100,
Y: 100
}, {
pointId: '2-2',
X: 200,
Y: 200
}]
}]
}, {
relationId: 233,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 100,
Y: 100
}, {
pointId: '1-2',
X: 300,
Y: 300
}]
}]
}]
})
// Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, {
// 'status': 0,
// 'data|5-10': [{
// 'id|1-65535': 1,
// 'fileNum|10-50': 1,
// 'template|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板'],
// 'type|1': ['文本', '图片', '图层']
// }]
// })
Mock.mock(/\/api\/file\/getFiles\?pieceId=[0-9]+/, {
'status': 0,
'data|1-5': [{
'id|1-65535': 1,
'name': '标注文件.xxx',
'size|10-30': 1,
'state|0-1': 1
}]
})
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