Skip to content

D
DA-Platform

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

Commit 99363af1 by 张欣玥
Options

image+多边形

parent 42813969
Showing with 177 additions and 144 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
......@@ -166,6 +166,8 @@ export default {
},
// 所有标记历史记录
canvasAll: [],
// 画多边形的临时数据
createPTmp: [],
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
// testData: [{
......@@ -240,7 +242,7 @@ export default {
console.log(this.data)
// 加载第一张图片
var imgUrl = this.data[0].imageUrl
var imgUrl = this.data.length ? this.data[0].imageUrl : 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200627155321.png'
console.log(this.data.length + ' 图片张数')
var img = new Image()
img.src = imgUrl
......@@ -258,7 +260,6 @@ export default {
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic')
var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%'
......@@ -295,62 +296,32 @@ export default {
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 num = []
element.pointList.forEach(function (element1) {
console.log('pointlist')
console.log(element1)
num.push(element1.X)
num.push(element1.Y)
var indexPic = index
element.children.forEach(function (element) {
// console.log('还原记录start')
// console.log(element)
var num = []
element.pointList.forEach(function (element1) {
console.log('pointlist')
console.log(element1)
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)
})
// 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.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.restoreCanvas()
// _this.ctx.beginPath()
// // _this.ctx.moveTo()
// _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
// _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.pictureId = 0
// 动态调整窗口高度
......@@ -373,7 +344,7 @@ export default {
this.canvas.style.cursor = 'crosshair'
} else if (this.radio1 == '多边形标注') {
console.log('pp')
this.canvas.style.cursor = 'auto'
this.canvas.style.cursor = 'crosshair'
} else {
this.canvas.style.cursor = 'auto'
}
......@@ -930,6 +901,7 @@ export default {
brush_Listener () {
let r1, r2
let _this = this
_this.createPTmp = []
this.canvas.onmousedown = function (e) {
console.log('onmousedown')
if (_this.radio1 == '矩形标注') {
......@@ -938,7 +910,12 @@ export default {
r2 = e.layerY
_this.createR(e, 'begin', r1, r2)
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto'
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX
r2 = e.layerY
_this.createPTmp.push(r1)
_this.createPTmp.push(r2)
_this.createP(e, 'begin', r1, r2)
} else {
_this.canvas.style.cursor = 'auto'
}
......@@ -951,7 +928,25 @@ export default {
r1 = null
r2 = null
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX
r2 = e.layerY
} else {
_this.canvas.style.cursor = 'auto'
}
}
this.canvas.ondblclick = function (e) {
console.log('dblclick')
if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair'
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'help'
let id = _this.pictureId
_this.createP(e, 'end', r1, r2)
_this.canvasAll[id].push(_this.createPTmp)
_this.addLabel()
_this.restoreCanvas()
_this.createPTmp = []
} else {
_this.canvas.style.cursor = 'auto'
}
......@@ -1021,6 +1016,42 @@ export default {
}
}
},
createP (e, status, r1, r2) {
let _this = this
// 第一条线
if (status == 'begin') {
_this.canvas.onmousemove = function (e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
// 把每个标注画出来
_this.restoreCanvas()
if(_this.createPTmp.length == 2){
_this.ctx.beginPath()
_this.ctx.moveTo(r1, r2)
_this.ctx.lineTo(e.layerX, e.layerY)
_this.ctx.closePath()
_this.ctx.strokeStyle = 'black'
_this.ctx.stroke()
} else if (_this.createPTmp.length > 2) {
let i = 0
_this.ctx.beginPath()
_this.ctx.moveTo(_this.createPTmp[0], _this.createPTmp[1])
for (i = 1; i < _this.createPTmp.length / 2; i++) {
_this.ctx.lineTo(_this.createPTmp[2 * i], _this.createPTmp[2 * i + 1])
}
_this.ctx.lineTo(e.layerX, e.layerY)
_this.ctx.closePath()
_this.ctx.strokeStyle = 'black'
_this.ctx.stroke()
}
}
} else if (status == 'end') {
_this.canvas.onmousemove = function (e) {
}
}
},
save () {
// 先把格式转换回去
var outputData = []
......@@ -1045,10 +1076,36 @@ export default {
}).then(res => {
console.log(res)
if (res.code === 1) {
this.$alert('保存成功', '保存成功', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
} else {
this.$alert('保存失败', '保存失败', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}).catch(err => {
this.$alert('保存失败', '保存失败', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
})
}
}
......
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/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/getImage', {
// code: 1,
// data: {
// "imageList": [{
// "relationId": 123,
// "imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png",
// "labelList": [{
// "labelId": 0,
// "labelName": "label1",
// "pointList": [{
// "pointId": 0,
// "X": 500,
// "Y": 300
// }, {
// "pointId": 1,
// "X": 600,
// "Y": 300
// }, {
// "pointId": 2,
// "X": 700,
// "Y": 350
// }, {
// "pointId": 3,
// "X": 600,
// "Y": 400
// }, {
// "pointId": 4,
// "X": 450,
// "Y": 350
// }]
// }]
// },{
// "relationId": 11,
// "imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg",
// "labelList": [{
// "labelId": 0,
// "labelName": "label1",
// "pointList": [{
// "pointId": 0,
// "X": 500,
// "Y": 300
// }, {
// "pointId": 1,
// "X": 600,
// "Y": 300
// }, {
// "pointId": 2,
// "X": 700,
// "Y": 350
// }, {
// "pointId": 3,
// "X": 600,
// "Y": 400
// }, {
// "pointId": 4,
// "X": 450,
// "Y": 350
// }]
// }]
// }]
// }
// })
Mock.mock('http://localhost:9100/api/image/getImage', {
code: 1,
data: {
"imageList": [{
"relationId": 123,
"imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png",
"labelList": []
},{
"relationId": 11,
"imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg",
"labelList": [{
"labelId": 0,
"labelName": "label1",
"pointList": [{
"pointId": 0,
"X": 500,
"Y": 300
}, {
"pointId": 1,
"X": 600,
"Y": 300
}, {
"pointId": 2,
"X": 700,
"Y": 350
}, {
"pointId": 3,
"X": 600,
"Y": 400
}, {
"pointId": 4,
"X": 450,
"Y": 350
}]
}]
}]
}
})
// 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(/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
// }]
// })
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