|
|
|
|
@ -85,6 +85,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
|
|
|
|
|
//保存
|
|
|
|
|
save() { |
|
|
|
|
console.log(this.camerasData.dimensionedPoints) |
|
|
|
|
if (!this.camerasData.dimensionedPoints) { |
|
|
|
|
this.camerasData.dimensionedPoints = { |
|
|
|
|
polygon: [], |
|
|
|
|
@ -137,53 +138,85 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//初始化背景图
|
|
|
|
|
canvas |
|
|
|
|
ctx |
|
|
|
|
initBackgroundImg() { |
|
|
|
|
let canvas = document.getElementById('canvas') as any; |
|
|
|
|
canvas.oncontextmenu = () => { return false; }; |
|
|
|
|
this.canvas = document.getElementById('canvas') as any; |
|
|
|
|
this.canvas.oncontextmenu = () => { return false; }; |
|
|
|
|
let that = this |
|
|
|
|
let ctx |
|
|
|
|
// 检测canvas支持性
|
|
|
|
|
if (canvas.getContext) { |
|
|
|
|
ctx = canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性
|
|
|
|
|
if (this.canvas.getContext) { |
|
|
|
|
this.ctx = this.canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性
|
|
|
|
|
} else { |
|
|
|
|
document.write("你的浏览器不支持canvas,请升级你的浏览器!"); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 读取可视区域 宽高
|
|
|
|
|
let center = document.getElementById('canvasCenter') as any; |
|
|
|
|
|
|
|
|
|
// 图片加载完后，将其显示在canvas中
|
|
|
|
|
var img = new Image(); |
|
|
|
|
img.src = that.imgItem ? that.imgItem : "../../../assets/images/bgImg.png"; |
|
|
|
|
img.onload = () => { |
|
|
|
|
// 等比例缩放图片
|
|
|
|
|
// var scale = 1;
|
|
|
|
|
// if (img.width > center.clientWidth || img.height > center.clientHeight) {
|
|
|
|
|
// let scaleOne = center.clientWidth / img.width;
|
|
|
|
|
// let scaleTwo = center.clientHeight / img.height;
|
|
|
|
|
// if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) {
|
|
|
|
|
// scale = scaleOne;
|
|
|
|
|
// } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) {
|
|
|
|
|
// scale = scaleTwo;
|
|
|
|
|
// } else {
|
|
|
|
|
// scale = 0.3;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// that.canvasWidth = img.width * scale;
|
|
|
|
|
// that.canvasHeight = img.height * scale; // 计算等比缩小后图片
|
|
|
|
|
that.canvasWidth = img.width; |
|
|
|
|
that.canvasHeight = img.height; |
|
|
|
|
console.log(img.width + "*" + img.height) |
|
|
|
|
window.setTimeout(() => { // 加载图片
|
|
|
|
|
ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); |
|
|
|
|
this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) |
|
|
|
|
that.initCanvasEvent(canvas) //监听canvas事件
|
|
|
|
|
that.initMark(canvas, ctx) //初始化标绘图形
|
|
|
|
|
this.ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); |
|
|
|
|
this.copyCanvas = this.ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) |
|
|
|
|
that.initCanvasEvent(this.canvas) //监听canvas事件
|
|
|
|
|
that.initMark(this.canvas, this.ctx) //初始化标绘图形
|
|
|
|
|
}, 0) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
clearCanvasItem(e, type) { |
|
|
|
|
e.stopPropagation() |
|
|
|
|
this.modal.confirm({ |
|
|
|
|
nzTitle: '确认要清除此标绘吗?', |
|
|
|
|
nzOkText: '确定', |
|
|
|
|
nzOkType: 'primary', |
|
|
|
|
nzOkDanger: true, |
|
|
|
|
nzOnOk: () => { |
|
|
|
|
// this.clearCanvas()
|
|
|
|
|
if (type == 'arrow') { |
|
|
|
|
this.arrowPoints = [] |
|
|
|
|
} |
|
|
|
|
if (type == 'arrowOfWest') { |
|
|
|
|
this.arrowPointsOfWest = [] |
|
|
|
|
} |
|
|
|
|
if (type == 'oilUnloadingAreaTrue') { |
|
|
|
|
for (let index = 0; index < this.oblongPoints.length; index++) { |
|
|
|
|
const element = this.oblongPoints[index]; |
|
|
|
|
if (element.oilUnloadingArea) { |
|
|
|
|
this.oblongPoints.splice(index, 1); |
|
|
|
|
index--; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (type == 'oilUnloadingAreaFalse') { |
|
|
|
|
for (let index = 0; index < this.oblongPoints.length; index++) { |
|
|
|
|
const element = this.oblongPoints[index]; |
|
|
|
|
if (!element.oilUnloadingArea) { |
|
|
|
|
this.oblongPoints.splice(index, 1); |
|
|
|
|
index--; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log(this.camerasData.dimensionedPoints) |
|
|
|
|
this.initMark2(this.canvas, this.ctx) //初始化标绘图形
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
nzCancelText: '取消', |
|
|
|
|
nzOnCancel: () => console.log('Cancel') |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//初始化标绘图形
|
|
|
|
|
initMark(canvas, context) { |
|
|
|
|
if (!this.camerasData.dimensionedPoints) { |
|
|
|
|
@ -221,6 +254,17 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//初始化标绘图形
|
|
|
|
|
initMark2(canvas, context) { |
|
|
|
|
if (this.markType === 2) { |
|
|
|
|
let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] |
|
|
|
|
this.drawLine(arr, context) |
|
|
|
|
} else if (this.markType === 3) { |
|
|
|
|
let arr = [this.arrowPoints, this.arrowPointsOfSouth] |
|
|
|
|
this.drawLine(arr, context) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
markType: number = 0; //0=进出口,2=卸油区,3=便利店,
|
|
|
|
|
isDrawArrow: boolean = true; //绘制type 箭头/矩形
|
|
|
|
|
@ -410,6 +454,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
this.oblongPoints.push(point) |
|
|
|
|
this.drawOblong(this.oblongPoints, context) |
|
|
|
|
} |
|
|
|
|
console.log(this.camerasData.dimensionedPoints) |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
@ -452,10 +497,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//canvas 绘制箭头
|
|
|
|
|
@ -532,7 +574,6 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
|
|
|
|
|
//canvas 绘制矩形
|
|
|
|
|
drawOblong(oblongList, context) { |
|
|
|
|
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxi') |
|
|
|
|
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); |
|
|
|
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
if (this.markType === 2) { //同时绘制 直线箭头
|
|
|
|
|
|
