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 158 additions and 125 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
...@@ -166,6 +166,8 @@ export default { ...@@ -166,6 +166,8 @@ export default {
}, },
// 所有标记历史记录 // 所有标记历史记录
canvasAll: [], canvasAll: [],
// 画多边形的临时数据
createPTmp: [],
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的 // 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
// testData: [{ // testData: [{
...@@ -240,7 +242,7 @@ export default { ...@@ -240,7 +242,7 @@ export default {
console.log(this.data) 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 + ' 图片张数') console.log(this.data.length + ' 图片张数')
var img = new Image() var img = new Image()
img.src = imgUrl img.src = imgUrl
...@@ -258,7 +260,6 @@ export default { ...@@ -258,7 +260,6 @@ export default {
// 打印 // 打印
// alert('width:' + img.width + ',height:' + img.height) // alert('width:' + img.width + ',height:' + img.height)
var myParent = document.getElementById('center_pic') var myParent = document.getElementById('center_pic')
var myImage = document.createElement('div') var myImage = document.createElement('div')
myImage.style.backgroundImage = 'url(' + imgUrl + ')' myImage.style.backgroundImage = 'url(' + imgUrl + ')'
myImage.style.backgroundSize = '100% 100%' myImage.style.backgroundSize = '100% 100%'
...@@ -316,41 +317,11 @@ export default { ...@@ -316,41 +317,11 @@ export default {
_this.canvasAll[indexPic].push(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.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.brush_Listener()
} }
this.pictureId = 0 this.pictureId = 0
// 动态调整窗口高度 // 动态调整窗口高度
...@@ -373,7 +344,7 @@ export default { ...@@ -373,7 +344,7 @@ export default {
this.canvas.style.cursor = 'crosshair' this.canvas.style.cursor = 'crosshair'
} else if (this.radio1 == '多边形标注') { } else if (this.radio1 == '多边形标注') {
console.log('pp') console.log('pp')
this.canvas.style.cursor = 'auto' this.canvas.style.cursor = 'crosshair'
} else { } else {
this.canvas.style.cursor = 'auto' this.canvas.style.cursor = 'auto'
} }
...@@ -930,6 +901,7 @@ export default { ...@@ -930,6 +901,7 @@ export default {
brush_Listener () { brush_Listener () {
let r1, r2 let r1, r2
let _this = this let _this = this
_this.createPTmp = []
this.canvas.onmousedown = function (e) { this.canvas.onmousedown = function (e) {
console.log('onmousedown') console.log('onmousedown')
if (_this.radio1 == '矩形标注') { if (_this.radio1 == '矩形标注') {
...@@ -938,7 +910,12 @@ export default { ...@@ -938,7 +910,12 @@ export default {
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 = 'crosshair'
r1 = e.layerX
r2 = e.layerY
_this.createPTmp.push(r1)
_this.createPTmp.push(r2)
_this.createP(e, 'begin', r1, r2)
} else { } else {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} }
...@@ -951,7 +928,25 @@ export default { ...@@ -951,7 +928,25 @@ export default {
r1 = null r1 = null
r2 = null r2 = null
} else if (_this.radio1 == '多边形标注') { } else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX
r2 = e.layerY
} else {
_this.canvas.style.cursor = 'auto' _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 { } else {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} }
...@@ -1021,6 +1016,42 @@ export default { ...@@ -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 () { save () {
// 先把格式转换回去 // 先把格式转换回去
var outputData = [] var outputData = []
...@@ -1045,10 +1076,36 @@ export default { ...@@ -1045,10 +1076,36 @@ export default {
}).then(res => { }).then(res => {
console.log(res) console.log(res)
if (res.code === 1) { if (res.code === 1) {
this.$alert('保存成功', '保存成功', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
} else { } 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' import Mock from 'mockjs'
// Mock.mock('http://localhost:9100/api/getTasks', { Mock.mock('http://localhost:9100/api/getTasks', {
// 'status': 0, 'status': 0,
// 'data|10': [{ 'data|10': [{
// 'id|1-9999': 1, 'id|1-9999': 1,
// 'name|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'], 'name|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
// 'creator|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'], 'creator|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
// 'date': Mock.Random.date('yyyy/MM/dd') 'date': Mock.Random.date('yyyy/MM/dd')
// }] }]
// }) })
// Mock.mock('http://localhost:9100/api/image/getImage', { Mock.mock('http://localhost:9100/api/image/getImage', {
// code: 1, code: 1,
// data: { data: {
// "imageList": [{ "imageList": [{
// "relationId": 123, "relationId": 123,
// "imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png", "imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png",
// "labelList": [{ "labelList": []
// "labelId": 0, },{
// "labelName": "label1", "relationId": 11,
// "pointList": [{ "imageUrl": "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg",
// "pointId": 0, "labelList": [{
// "X": 500, "labelId": 0,
// "Y": 300 "labelName": "label1",
// }, { "pointList": [{
// "pointId": 1, "pointId": 0,
// "X": 600, "X": 500,
// "Y": 300 "Y": 300
// }, { }, {
// "pointId": 2, "pointId": 1,
// "X": 700, "X": 600,
// "Y": 350 "Y": 300
// }, { }, {
// "pointId": 3, "pointId": 2,
// "X": 600, "X": 700,
// "Y": 400 "Y": 350
// }, { }, {
// "pointId": 4, "pointId": 3,
// "X": 450, "X": 600,
// "Y": 350 "Y": 400
// }] }, {
// }] "pointId": 4,
// },{ "X": 450,
// "relationId": 11, "Y": 350
// "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]+/, { Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, {
// 'status': 0, 'status': 0,
// 'data|5-10': [{ 'data|5-10': [{
// 'id|1-65535': 1, 'id|1-65535': 1,
// 'fileNum|10-50': 1, 'fileNum|10-50': 1,
// 'template|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板'], 'template|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板'],
// 'type|1': ['文本', '图片', '图层'] 'type|1': ['文本', '图片', '图层']
// }] }]
// }) })
// Mock.mock(/\/api\/file\/getFiles\?pieceId=[0-9]+/, { Mock.mock(/\/api\/file\/getFiles\?pieceId=[0-9]+/, {
// 'status': 0, 'status': 0,
// 'data|1-5': [{ 'data|1-5': [{
// 'id|1-65535': 1, 'id|1-65535': 1,
// 'name': '标注文件.xxx', 'name': '标注文件.xxx',
// 'size|10-30': 1, 'size|10-30': 1,
// 'state|0-1': 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