|
|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import { HttpClient } from '@angular/common/http'; |
|
|
|
|
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; |
|
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
|
import { ActivatedRoute } from '@angular/router'; |
|
|
|
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
|
|
|
|
@ -28,9 +28,9 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngAfterContentInit(): void { |
|
|
|
|
this.getImgMarkData().then((res: any)=>{ |
|
|
|
|
this.getImgMarkData().then((res: any) => { |
|
|
|
|
this.imgItem = window.URL.createObjectURL(res) |
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
window.setTimeout(() => { |
|
|
|
|
this.initBackgroundImg() |
|
|
|
|
}, 0) |
|
|
|
|
}).catch(err => { |
|
|
|
|
@ -38,21 +38,47 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
anewgetImg() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.route.queryParams.subscribe(parmas => { |
|
|
|
|
let params = { |
|
|
|
|
cameraId: parmas.id |
|
|
|
|
} |
|
|
|
|
this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe( |
|
|
|
|
{ |
|
|
|
|
next: (value: Object) => { |
|
|
|
|
// console.log(111, value)
|
|
|
|
|
this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!'); |
|
|
|
|
}, |
|
|
|
|
error: (error: HttpErrorResponse) => { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
complete: () => { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取 摄像头图片/标注点位
|
|
|
|
|
getImgMarkData() { |
|
|
|
|
let that = this |
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
that.route.queryParams.subscribe(parmas => { |
|
|
|
|
that.http.get(`/api/Cameras/${parmas.id}`).subscribe((info: any)=>{ |
|
|
|
|
info.dimensionedPoints? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; |
|
|
|
|
that.http.get(`/api/Cameras/${parmas.id}`).subscribe((info: any) => { |
|
|
|
|
info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; |
|
|
|
|
that.camerasData = info; |
|
|
|
|
that.markType = info.type; |
|
|
|
|
console.log(that.camerasData,"摄像头数据") |
|
|
|
|
console.log(that.camerasData, "摄像头数据") |
|
|
|
|
const httpOptions = { |
|
|
|
|
responseType: 'blob' as 'json', |
|
|
|
|
params: {cameraId: parmas.id} |
|
|
|
|
params: { cameraId: parmas.id } |
|
|
|
|
}; |
|
|
|
|
that.http.get(`/api/Cameras/Images`,httpOptions).subscribe({ |
|
|
|
|
that.http.get(`/api/Cameras/Images`, httpOptions).subscribe({ |
|
|
|
|
next: (data) => { |
|
|
|
|
resolve(data) |
|
|
|
|
}, |
|
|
|
|
@ -70,7 +96,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
if (!this.camerasData.dimensionedPoints) { |
|
|
|
|
this.camerasData.dimensionedPoints = { |
|
|
|
|
polygon: [], |
|
|
|
|
arrow : [], |
|
|
|
|
arrow: [], |
|
|
|
|
rectangle: [], |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -81,7 +107,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
this.camerasData.dimensionedPoints.polygon = this.points |
|
|
|
|
} else if (this.markType === 2) { |
|
|
|
|
if (this.arrowPoints.length != 2 || this.oblongPoints.length != 2 || !this.oblongPoints.find(item=>{ return item.oilUnloadingArea }) || !this.oblongPoints.find(item=>{ return !item.oilUnloadingArea })) { |
|
|
|
|
if (this.arrowPoints.length != 2 || this.oblongPoints.length != 2 || !this.oblongPoints.find(item => { return item.oilUnloadingArea }) || !this.oblongPoints.find(item => { return !item.oilUnloadingArea })) { |
|
|
|
|
this.message.create('warning', '绘制完整后可保存!'); |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
@ -96,7 +122,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
let paramsData = JSON.parse(JSON.stringify(this.camerasData)) |
|
|
|
|
paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints) |
|
|
|
|
this.http.put(`/api/Cameras/${this.camerasData.id}`,paramsData).subscribe(data=>{ |
|
|
|
|
this.http.put(`/api/Cameras/${this.camerasData.id}`, paramsData).subscribe(data => { |
|
|
|
|
this.message.create('success', '保存成功!'); |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
@ -104,7 +130,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
//初始化背景图
|
|
|
|
|
initBackgroundImg() { |
|
|
|
|
let canvas = document.getElementById('canvas') as any; |
|
|
|
|
canvas.oncontextmenu = () =>{ return false; }; |
|
|
|
|
canvas.oncontextmenu = () => { return false; }; |
|
|
|
|
let that = this |
|
|
|
|
let ctx |
|
|
|
|
// 检测canvas支持性
|
|
|
|
|
@ -120,7 +146,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
|
|
|
|
|
// 图片加载完后，将其显示在canvas中
|
|
|
|
|
var img = new Image(); |
|
|
|
|
img.src = that.imgItem? that.imgItem : "../../../assets/images/bgImg.png"; |
|
|
|
|
img.src = that.imgItem ? that.imgItem : "../../../assets/images/bgImg.png"; |
|
|
|
|
img.onload = () => { |
|
|
|
|
// 等比例缩放图片
|
|
|
|
|
var scale = 1; |
|
|
|
|
@ -137,31 +163,31 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
that.canvasWidth = img.width * scale; |
|
|
|
|
that.canvasHeight = img.height * scale; // 计算等比缩小后图片
|
|
|
|
|
window.setTimeout(()=>{ // 加载图片
|
|
|
|
|
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) //初始化标绘图形
|
|
|
|
|
that.initMark(canvas, ctx) //初始化标绘图形
|
|
|
|
|
}, 0) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//初始化标绘图形
|
|
|
|
|
initMark(canvas,context) { |
|
|
|
|
initMark(canvas, context) { |
|
|
|
|
if (!this.camerasData.dimensionedPoints) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (this.markType === 0) { |
|
|
|
|
this.camerasData.dimensionedPoints.polygon.forEach(element => { |
|
|
|
|
this.drawPolygon(element.x,element.y,canvas,context); //绘制多边形
|
|
|
|
|
this.drawPolygon(element.x, element.y, canvas, context); //绘制多边形
|
|
|
|
|
}); |
|
|
|
|
} else if (this.markType === 2) { |
|
|
|
|
this.arrowPoints = this.camerasData.dimensionedPoints.arrow |
|
|
|
|
this.oblongPoints = this.camerasData.dimensionedPoints.rectangle |
|
|
|
|
this.drawLine(this.arrowPoints,context) |
|
|
|
|
this.drawLine(this.arrowPoints, context) |
|
|
|
|
} else if (this.markType === 3) { |
|
|
|
|
this.arrowPoints = this.camerasData.dimensionedPoints.arrow |
|
|
|
|
this.drawLine(this.arrowPoints,context) |
|
|
|
|
this.drawLine(this.arrowPoints, context) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -195,50 +221,50 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
let context = canvas.getContext('2d'); |
|
|
|
|
|
|
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//初始化 canvas画布 监听事件
|
|
|
|
|
initCanvasEvent(canvas) { |
|
|
|
|
let context = canvas.getContext('2d'); |
|
|
|
|
canvas.onmousedown = (e)=>{ //鼠标按下事件
|
|
|
|
|
canvas.onmousedown = (e) => { //鼠标按下事件
|
|
|
|
|
var clickX = e.pageX - canvas.offsetLeft; |
|
|
|
|
var clickY = e.pageY - canvas.offsetTop; |
|
|
|
|
this.downx = clickX |
|
|
|
|
this.downy = clickY |
|
|
|
|
|
|
|
|
|
if (this.markType === 0) { //进出口
|
|
|
|
|
this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形
|
|
|
|
|
this.drawPolygon(clickX, clickY, canvas, context); //绘制多边形
|
|
|
|
|
} else if (this.markType === 2 || this.markType === 3) { //卸油区/便利店
|
|
|
|
|
//开始绘制
|
|
|
|
|
context.beginPath(); |
|
|
|
|
context.moveTo(clickX,clickY); |
|
|
|
|
context.moveTo(clickX, clickY); |
|
|
|
|
context.strokeStyle = "green"; |
|
|
|
|
context.lineWidth = 3; |
|
|
|
|
canvas.onmousemove = (ev)=>{ //鼠标移动事件
|
|
|
|
|
canvas.onmousemove = (ev) => { //鼠标移动事件
|
|
|
|
|
var moveX = ev.pageX - canvas.offsetLeft; |
|
|
|
|
var moveY = ev.pageY - canvas.offsetTop; |
|
|
|
|
if (this.isDrawArrow) { //绘制 箭头
|
|
|
|
|
if (this.arrowPoints.length === 2) { //限制数量
|
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
context.lineTo(moveX,moveY); |
|
|
|
|
context.lineTo(moveX, moveY); |
|
|
|
|
context.stroke(); |
|
|
|
|
} else { //绘制 矩形
|
|
|
|
|
if (this.oblongPoints.length === 2) { //限制数量
|
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
this.drawOblong(this.oblongPoints,context) |
|
|
|
|
context.strokeStyle = this.oilUnloadingArea? "green" : "red"; |
|
|
|
|
let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY) |
|
|
|
|
context.strokeRect(element.x,element.y,element.width,element.height); |
|
|
|
|
this.drawOblong(this.oblongPoints, context) |
|
|
|
|
context.strokeStyle = this.oilUnloadingArea ? "green" : "red"; |
|
|
|
|
let element = this.getOblongInfo(this.downx, this.downy, moveX, moveY) |
|
|
|
|
context.strokeRect(element.x, element.y, element.width, element.height); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
canvas.onmouseup = (e)=>{ //鼠标松开事件
|
|
|
|
|
canvas.onmousemove = (ev)=>{ //鼠标移动事件
|
|
|
|
|
canvas.onmouseup = (e) => { //鼠标松开事件
|
|
|
|
|
canvas.onmousemove = (ev) => { //鼠标移动事件
|
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
if (this.markType != 2 && this.markType != 3) { |
|
|
|
|
@ -258,15 +284,15 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
endY: upY, |
|
|
|
|
} |
|
|
|
|
this.arrowPoints.push(point); |
|
|
|
|
this.drawLine(this.arrowPoints,context) |
|
|
|
|
this.drawLine(this.arrowPoints, context) |
|
|
|
|
} else { //绘制 矩形
|
|
|
|
|
if (this.oblongPoints.length === 2) { //限制数量
|
|
|
|
|
this.message.create('warning', '绘制数量已达上限!'); |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
let point = this.getOblongInfo(this.downx,this.downy,upX,upY) |
|
|
|
|
let point = this.getOblongInfo(this.downx, this.downy, upX, upY) |
|
|
|
|
this.oblongPoints.push(point) |
|
|
|
|
this.drawOblong(this.oblongPoints,context) |
|
|
|
|
this.drawOblong(this.oblongPoints, context) |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -277,23 +303,23 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
//canvas 绘制直线
|
|
|
|
|
drawLine(pointsList, context, isRepeat: boolean = false) { |
|
|
|
|
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); |
|
|
|
|
this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
if (this.markType === 2 && !isRepeat) { //同时绘制 矩形
|
|
|
|
|
this.oblongPoints.forEach(element => { |
|
|
|
|
context.strokeStyle = element.oilUnloadingArea? "green" : "red"; |
|
|
|
|
context.strokeStyle = element.oilUnloadingArea ? "green" : "red"; |
|
|
|
|
context.lineWidth = 3; |
|
|
|
|
context.strokeRect(element.x,element.y,element.width,element.height); |
|
|
|
|
context.strokeRect(element.x, element.y, element.width, element.height); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
pointsList.forEach((item,index)=>{ |
|
|
|
|
if ((index+1)%2 === 0) { |
|
|
|
|
this.drawArrow(item.startX,item.startY,item.endX,item.endY,30,10,3,'green',context) |
|
|
|
|
pointsList.forEach((item, index) => { |
|
|
|
|
if ((index + 1) % 2 === 0) { |
|
|
|
|
this.drawArrow(item.startX, item.startY, item.endX, item.endY, 30, 10, 3, 'green', context) |
|
|
|
|
} else { |
|
|
|
|
context.beginPath(); |
|
|
|
|
context.moveTo(item.startX,item.startY); |
|
|
|
|
context.moveTo(item.startX, item.startY); |
|
|
|
|
context.strokeStyle = "green"; |
|
|
|
|
context.lineWidth = 3; |
|
|
|
|
context.lineTo(item.endX,item.endY); |
|
|
|
|
context.lineTo(item.endX, item.endY); |
|
|
|
|
context.stroke(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
@ -308,10 +334,10 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
// width：箭头线宽度
|
|
|
|
|
// color：箭头颜色
|
|
|
|
|
|
|
|
|
|
theta = typeof(theta) != 'undefined' ? theta : 30; |
|
|
|
|
headlen = typeof(theta) != 'undefined' ? headlen : 10; |
|
|
|
|
width = typeof(width) != 'undefined' ? width : 1; |
|
|
|
|
color = typeof(color) != 'undefined' ? color : '#000'; |
|
|
|
|
theta = typeof (theta) != 'undefined' ? theta : 30; |
|
|
|
|
headlen = typeof (theta) != 'undefined' ? headlen : 10; |
|
|
|
|
width = typeof (width) != 'undefined' ? width : 1; |
|
|
|
|
color = typeof (color) != 'undefined' ? color : '#000'; |
|
|
|
|
|
|
|
|
|
// 计算各角度和对应的P2,P3坐标
|
|
|
|
|
var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI, |
|
|
|
|
@ -325,7 +351,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
|
|
|
|
var arrowX = fromX - topX, |
|
|
|
|
arrowY = fromY - topY; |
|
|
|
|
arrowY = fromY - topY; |
|
|
|
|
|
|
|
|
|
ctx.moveTo(arrowX, arrowY); |
|
|
|
|
ctx.moveTo(fromX, fromY); |
|
|
|
|
@ -346,7 +372,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
oblongPoints = []; //矩形的点的集合
|
|
|
|
|
|
|
|
|
|
//获取 矩形左上角点位/宽高
|
|
|
|
|
getOblongInfo(startX,startY,endX,endY) { |
|
|
|
|
getOblongInfo(startX, startY, endX, endY) { |
|
|
|
|
let point = { |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
@ -374,14 +400,14 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
//canvas 绘制矩形
|
|
|
|
|
drawOblong(oblongList, context) { |
|
|
|
|
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); |
|
|
|
|
this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
if (this.markType === 2) { //同时绘制 直线箭头
|
|
|
|
|
this.drawLine(this.arrowPoints,context,true) |
|
|
|
|
this.drawLine(this.arrowPoints, context, true) |
|
|
|
|
} |
|
|
|
|
oblongList.forEach(element => { |
|
|
|
|
context.strokeStyle = element.oilUnloadingArea? "green" : "red"; |
|
|
|
|
context.strokeStyle = element.oilUnloadingArea ? "green" : "red"; |
|
|
|
|
context.lineWidth = 3; |
|
|
|
|
context.strokeRect(element.x,element.y,element.width,element.height); |
|
|
|
|
context.strokeRect(element.x, element.y, element.width, element.height); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -418,7 +444,7 @@ export class ImageLabel2Component implements OnInit {
|
|
|
|
|
} |
|
|
|
|
//如果点击新的位置，则进入下面的代码，绘制点
|
|
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
|
|
|
|
//遍历数组画圆
|
|
|
|
|
var circle = { |
|
|
|
|
x: clickX, |
|
|
|
|
|
