Skip to content

D
DA-Platform

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

Commit 4aaf22f8 by 张欣玥
Options

image解决了放大缩小的一些bug

parent 196f3b59
Showing with 67 additions and 51 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
......@@ -127,7 +127,7 @@
user-select: none;
display: flex;
justify-content:flex-start;
overflow: auto"
overflow: auto;"
id = "center_pic">
<!-- <div style="zoom: 2;text-align：center;user-select: none" id = "center_pic">-->
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png" style="pointer-events: none">-->
......@@ -178,7 +178,7 @@ export default {
}
},
async mounted () {
//获取图片列表并转换格式
// 获取图片列表并转换格式
let imageList = await this.getLabelList()
console.log(imageList)
this.imageList = imageList.imageList
......@@ -319,11 +319,23 @@ export default {
_this.ctx.fill()
})
},
mathAdd (a, b) {
return this.$math.add(this.$math.bignumber(a), this.$math.bignumber(b))
},
mathSub (a, b) {
return this.$math.subtract(this.$math.bignumber(a), this.$math.bignumber(b))
},
mathMul (a, b) {
return this.$math.multiply(this.$math.bignumber(a), this.$math.bignumber(b))
},
mathDiv (a, b) {
return this.$math.divide(this.$math.bignumber(a), this.$math.bignumber(b))
},
goBigger () {
var scale = this.scaleSize
if (scale < 2) {
// this.scaleSize = scale + 0.1
this.scaleSize = this.$math.add(this.$math.bignumber(scale), this.$math.bignumber(0.1))
this.scaleSize = this.mathAdd(scale, 0.1)
} else {
this.scaleSize = 2
}
......@@ -337,7 +349,7 @@ export default {
goSmaller () {
var scale = this.scaleSize
if (scale > 0.5) {
this.scaleSize = this.$math.subtract(this.$math.bignumber(scale), this.$math.bignumber(0.1))
this.scaleSize = this.mathSub(scale, 0.1)
} else {
this.scaleSize = 0.5
}
......@@ -474,15 +486,14 @@ export default {
this.labelName = children[index].labelName
this.labelPosition = ''
var lenTmp = tmp[index].length / 2;
var i = 0;
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 += tmp[index][2 * i]
this.labelPosition += ','
this.labelPosition += tmp[index][2*i+1]
this.labelPosition += tmp[index][2 * i + 1]
this.labelPosition += '）\n'
}
......@@ -701,15 +712,13 @@ export default {
}
},
async getLabelList () {
/**
* 这是一个大致的格式转换
// */
try {
this.data = []
let params = {
"relationList" : [
'relationList': [
123,
11
]
......@@ -727,12 +736,10 @@ export default {
// self.$store.commit('setImageData', imageList.imageList)
console.log(imageList)
return imageList
}
else {
} else {
// self.$store.commit('clearImageData')
alert('请求出错！')
}
} catch (err) {
// self.$store.commit('clearImageData')
console.log(err)
......@@ -762,8 +769,7 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
if (value == null)
value = 'iss'
if (value == null) { value = 'iss' }
labelName = value
this.makeLabel(labelName)
}).catch(() => {
......@@ -771,23 +777,23 @@ export default {
this.makeLabel(labelName)
})
},
//创建储存用的标签数据
makeLabel(labelName) {
// 创建储存用的标签数据
makeLabel (labelName) {
let currentImageId = this.pictureId
let currentLabelId = this.data[currentImageId].children.length
//以下部分创建PointList
// 以下部分创建PointList
var tmpPointList = this.canvasAll[currentImageId]
var lenTmp = tmpPointList[currentLabelId].length / 2
let pointList = []
for (var i = 0; i < lenTmp; i ++) {
for (var i = 0; i < lenTmp; i++) {
let tmp = {
pointId : i,
X : tmpPointList[currentLabelId][2*i],
Y : tmpPointList[currentLabelId][2*i + 1]
pointId: i,
X: tmpPointList[currentLabelId][2 * i],
Y: tmpPointList[currentLabelId][2 * i + 1]
}
pointList.push(tmp)
}
//pointList完成
// pointList完成
const newLabel = {
labelId: currentLabelId,
labelName: labelName,
......@@ -839,13 +845,13 @@ export default {
console.log('onmousedown')
if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX
r2 = e.layerY
r1 = _this.mathDiv(e.layerX, _this.scaleSize)
r2 = _this.mathDiv(e.layerY, _this.scaleSize)
_this.createR(e, 'begin', r1, r2)
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX
r2 = e.layerY
r1 = _this.mathDiv(e.layerX, _this.scaleSize)
r2 = _this.mathDiv(e.layerY, _this.scaleSize)
_this.createPTmp.push(r1)
_this.createPTmp.push(r2)
_this.createP(e, 'begin', r1, r2)
......@@ -862,8 +868,8 @@ export default {
r2 = null
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX
r2 = e.layerY
r1 = _this.mathDiv(e.layerX, _this.scaleSize)
r2 = _this.mathDiv(e.layerY, _this.scaleSize)
} else {
_this.canvas.style.cursor = 'auto'
}
......@@ -894,9 +900,8 @@ export default {
_this.canvas.onmousemove = function (e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
let rx = e.layerX - r1
let ry = e.layerY - r2
// console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry)
let rx = _this.mathDiv(e.layerX, _this.scaleSize) - r1
let ry = _this.mathDiv(e.layerY, _this.scaleSize) - r2
// 把每个标注画出来
_this.restoreCanvas()
......@@ -921,21 +926,28 @@ export default {
}
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
let rx = e.layerX - r1
let ry = e.layerY - r2
console.log('X:' + e.layerX + 'Y:' + e.layerY)
console.log('r1:' + r1 + 'r2:' + r2)
let layerX = _this.mathDiv(e.layerX, _this.scaleSize)
let layerY = _this.mathDiv(e.layerY, _this.scaleSize)
let rx = layerX - r1
let ry = layerY - r2
// 排除点击就添加标签的可能
if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) {
_this.ctx.beginPath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(r1, r2, rx, ry)
console.log(r1+' '+r2+' '+rx+' '+ry)
// _this.ctx.stroke()
// 把每个标注画出来
let id = _this.pictureId
// 存到记录里
var num = [r1, r2, r1 + rx, r2, r1 + rx, r2 + ry, r1, r2 + ry]
var num = [r1, r2, _this.mathAdd(r1, rx), r2, _this.mathAdd(r1, rx), _this.mathAdd(r2, ry), r1, _this.mathAdd(r2, ry)]
console.log('num')
console.log(num)
_this.canvasAll[id].push(num)
_this.addLabel()
......@@ -958,11 +970,13 @@ export default {
// 把每个标注画出来
_this.restoreCanvas()
if(_this.createPTmp.length == 2){
// 第一条线
if (_this.createPTmp.length == 2) {
_this.ctx.beginPath()
_this.ctx.moveTo(r1, r2)
_this.ctx.lineTo(e.layerX, e.layerY)
r1 = _this.mathDiv(e.layerX, _this.scaleSize)
r2 = _this.mathDiv(e.layerY, _this.scaleSize)
_this.ctx.lineTo(r1, r2)
_this.ctx.closePath()
_this.ctx.strokeStyle = 'black'
_this.ctx.stroke()
......@@ -973,7 +987,9 @@ export default {
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)
r1 = _this.mathDiv(e.layerX, _this.scaleSize)
r2 = _this.mathDiv(e.layerY, _this.scaleSize)
_this.ctx.lineTo(r1, r2)
_this.ctx.closePath()
_this.ctx.strokeStyle = 'black'
_this.ctx.stroke()
......@@ -997,7 +1013,7 @@ export default {
outputData.push(newData)
})
console.log("outputdata")
console.log('outputdata')
console.log(outputData)
this.imageNum = this.data.len
this.axios({
......@@ -1014,20 +1030,20 @@ export default {
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
message: `action: ${action}`
})
}
});
})
} else {
this.$alert('保存失败', '保存失败', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
message: `action: ${action}`
})
}
});
})
}
}).catch(err => {
this.$alert('保存失败', '保存失败', {
......@@ -1035,10 +1051,10 @@ export default {
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
message: `action: ${action}`
})
}
});
})
})
}
}
......
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