9 changed files with 701 additions and 12 deletions
@ -0,0 +1,50 @@ |
|||||||
|
<div class="canvasBox"> |
||||||
|
<div class="btnbox"> |
||||||
|
<label class="leftTitle" style="color: red;">安信盒子标记</label> |
||||||
|
|
||||||
|
<label class="leftTitle" *ngIf="markType === 0">进出口</label> |
||||||
|
<label class="leftTitle" *ngIf="markType === 1">加油区</label> |
||||||
|
<label class="leftTitle" *ngIf="markType === 2">卸油区</label> |
||||||
|
<label class="leftTitle" *ngIf="markType === 3">便利店</label> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<button nz-button [ngClass]="{selectBtn: selectedBtn === '进出口'}" (click)="selectedBtn = '进出口'">进出口 |
||||||
|
<span class="colorBlock" style="background-color: red;"></span> |
||||||
|
<span class="deleteItem" (click)="clearCanvasItem($event,'进出口')">删除</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}" (click)="selectedBtn = '收银区'">收银区 |
||||||
|
<span class="colorBlock" style="background-color: yellow;"></span> |
||||||
|
<span class="deleteItem" (click)="clearCanvasItem($event,'收银区')">删除</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button nz-button [ngClass]="{selectBtn: selectedBtn === '加油区'}" (click)="selectedBtn = '加油区'">加油区 |
||||||
|
<span class="colorBlock" style="background-color: green;"></span> |
||||||
|
<span class="deleteItem" (click)="clearCanvasItem($event,'加油区')">删除</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button nz-button [ngClass]="{selectBtn: selectedBtn === '卸油区'}" (click)="selectedBtn = '卸油区'">卸油区 |
||||||
|
<span class="colorBlock" style="background-color: black;"></span> |
||||||
|
<span class="deleteItem" (click)="clearCanvasItem($event,'卸油区')">删除</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
|
||||||
|
<button nz-button nzType="primary" (click)="anewgetImg()">重新捕获摄像头图片</button> |
||||||
|
<button nz-button nzType="primary" (click)="save()">保存</button> |
||||||
|
<button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="您确定要清空吗?" |
||||||
|
(nzOnConfirm)="clearCanvas()">清空</button> |
||||||
|
<label *ngIf="camerasData" class="rightTitle">原始分辨率： {{camerasData.originalWeight}} × |
||||||
|
{{camerasData.originalHeight}} |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="imgbox"> |
||||||
|
<div class="content"> |
||||||
|
<div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" |
||||||
|
[height]="canvasHeight"></canvas> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
.canvasBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #fff; |
||||||
|
font-size: 15px; |
||||||
|
color: black; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.imgbox { |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
canvas { |
||||||
|
overflow: hidden; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.content, |
||||||
|
.center { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btnbox { |
||||||
|
display: flex; |
||||||
|
position: fixed; |
||||||
|
left: 1%; |
||||||
|
top: 1%; |
||||||
|
z-index: 10; |
||||||
|
|
||||||
|
button { |
||||||
|
margin-right: 6px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.colorBlock{ |
||||||
|
display: inline-block; |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
margin-left: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.deleteItem { |
||||||
|
display: none; |
||||||
|
color: red; |
||||||
|
cursor: pointer; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
button:hover { |
||||||
|
.deleteItem { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.leftTitle { |
||||||
|
line-height: 32px; |
||||||
|
margin-right: 10px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.rightTitle { |
||||||
|
line-height: 32px; |
||||||
|
margin-left: 10px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.imgbox, |
||||||
|
.btnbox { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.selectBtn { |
||||||
|
background-color: #1890ff; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { ImageLabelAnxinComponent } from './image-label-anxin.component'; |
||||||
|
|
||||||
|
describe('ImageLabelAnxinComponent', () => { |
||||||
|
let component: ImageLabelAnxinComponent; |
||||||
|
let fixture: ComponentFixture<ImageLabelAnxinComponent>; |
||||||
|
|
||||||
|
beforeEach(async () => { |
||||||
|
await TestBed.configureTestingModule({ |
||||||
|
declarations: [ ImageLabelAnxinComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
}); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(ImageLabelAnxinComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,487 @@ |
|||||||
|
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { Component, Input, OnInit } from '@angular/core'; |
||||||
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||||
|
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-image-label-anxin', |
||||||
|
templateUrl: './image-label-anxin.component.html', |
||||||
|
styleUrls: ['./image-label-anxin.component.scss'], |
||||||
|
}) |
||||||
|
export class ImageLabelAnxinComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
private http: HttpClient, |
||||||
|
private message: NzMessageService, |
||||||
|
private modal: NzModalService |
||||||
|
) {} |
||||||
|
|
||||||
|
@Input() cameraId: any; //传递id
|
||||||
|
camerasData: any; //摄像头Data
|
||||||
|
imgItem: any; //图片 URL
|
||||||
|
canvasWidth: number = 0; |
||||||
|
canvasHeight: number = 0; |
||||||
|
copyCanvas: any; //拷贝 canvas底图
|
||||||
|
|
||||||
|
selectedBtn: string; //按钮选中
|
||||||
|
//返回上一步路由
|
||||||
|
goback() { |
||||||
|
history.go(-1); |
||||||
|
} |
||||||
|
|
||||||
|
ngOnInit(): void {} |
||||||
|
|
||||||
|
//获取 摄像头图片/标注点位
|
||||||
|
getImgMarkData() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
this.http.get(`/api/Cameras/${this.cameraId}`).subscribe((data: any) => { |
||||||
|
this.camerasData = data; |
||||||
|
this.markType = data.type; |
||||||
|
const httpOptions = { |
||||||
|
responseType: 'blob' as 'json', |
||||||
|
params: { cameraId: this.cameraId }, |
||||||
|
}; |
||||||
|
this.http.get(`/api/Cameras/Images`, httpOptions).subscribe({ |
||||||
|
next: (data) => { |
||||||
|
resolve(data); |
||||||
|
}, |
||||||
|
error: (err) => { |
||||||
|
reject('error'); |
||||||
|
}, |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
anewgetImg() { |
||||||
|
let params = { |
||||||
|
cameraId: this.cameraId, |
||||||
|
provider: 1, |
||||||
|
}; |
||||||
|
this.http |
||||||
|
.put('/api/Cameras/Commands/CaptureImages', '', { params: params }) |
||||||
|
.subscribe({ |
||||||
|
next: (value: Object) => { |
||||||
|
this.message.create( |
||||||
|
'success', |
||||||
|
'向边缘设备发送请求成功，请过一段时间手动刷新页面!' |
||||||
|
); |
||||||
|
}, |
||||||
|
error: (error: HttpErrorResponse) => {}, |
||||||
|
complete: () => {}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
ngAfterContentInit(): void { |
||||||
|
this.getImgMarkData() |
||||||
|
.then((res: any) => { |
||||||
|
this.imgItem = window.URL.createObjectURL(res); |
||||||
|
window.setTimeout(() => { |
||||||
|
this.initBackgroundImg(); |
||||||
|
}, 0); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
this.message.create('error', '获取图片失败!'); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//初始化背景图
|
||||||
|
canvas; |
||||||
|
ctx; |
||||||
|
|
||||||
|
initBackgroundImg() { |
||||||
|
this.canvas = document.getElementById('canvas') as any; |
||||||
|
//取消鼠标右键事件
|
||||||
|
this.canvas.oncontextmenu = () => { |
||||||
|
return false; |
||||||
|
}; |
||||||
|
// 检测canvas支持性
|
||||||
|
if (this.canvas.getContext) { |
||||||
|
this.ctx = this.canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性
|
||||||
|
} else { |
||||||
|
document.write('你的浏览器不支持canvas,请升级你的浏览器!'); |
||||||
|
return; |
||||||
|
} |
||||||
|
// 图片加载完后，将其显示在canvas中
|
||||||
|
var img = new Image(); |
||||||
|
img.src = this.imgItem ? this.imgItem : '../../../assets/images/bgImg.png'; |
||||||
|
img.onload = () => { |
||||||
|
this.canvasWidth = img.width; |
||||||
|
this.canvasHeight = img.height; |
||||||
|
window.setTimeout(() => { |
||||||
|
// 加载图片
|
||||||
|
this.ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight); |
||||||
|
this.copyCanvas = this.ctx.getImageData( |
||||||
|
0, |
||||||
|
0, |
||||||
|
this.canvasWidth, |
||||||
|
this.canvasHeight |
||||||
|
); |
||||||
|
//初始化标绘图形
|
||||||
|
this.initMark(this.canvas, this.ctx); |
||||||
|
//监听canvas事件
|
||||||
|
this.initCanvasEvent(this.canvas); |
||||||
|
}, 0); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
//初始化标绘图形
|
||||||
|
|
||||||
|
DrawPolygoning = ''; |
||||||
|
initMark(canvas, context) { |
||||||
|
if (!this.camerasData.dimensionedPointsAnxin) { |
||||||
|
return; |
||||||
|
} else { |
||||||
|
this.camerasData.dimensionedPointsAnxin = JSON.parse( |
||||||
|
this.camerasData.dimensionedPointsAnxin |
||||||
|
); |
||||||
|
} |
||||||
|
console.log('原始标点数据', this.camerasData.dimensionedPointsAnxin); |
||||||
|
for (const key in this.camerasData.dimensionedPointsAnxin) { |
||||||
|
const element = this.camerasData.dimensionedPointsAnxin[key]; |
||||||
|
console.log(key, element); |
||||||
|
if (element.length !== 0) { |
||||||
|
for (let index = 0; index < element.length; index++) { |
||||||
|
const item = element[index]; |
||||||
|
let obj = this.PolygonData[key]; |
||||||
|
this.DrawPolygoning = key; |
||||||
|
this.DrawPolygon( |
||||||
|
item.x, |
||||||
|
item.y, |
||||||
|
canvas, |
||||||
|
context, |
||||||
|
obj.Points, |
||||||
|
obj.Circles, |
||||||
|
obj.Allpoints, |
||||||
|
obj.IsDragging, |
||||||
|
obj.IsInOut, |
||||||
|
obj.Color |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
this.DrawPolygoning = ''; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
markType: number = 0; //0=进出口,1=加油区,2=卸油区,3=便利店,
|
||||||
|
|
||||||
|
//记录鼠标点击位置
|
||||||
|
downx = 0; |
||||||
|
downy = 0; |
||||||
|
|
||||||
|
//初始化 canvas画布 监听事件
|
||||||
|
context; |
||||||
|
initCanvasEvent(canvas) { |
||||||
|
var context = canvas.getContext('2d'); |
||||||
|
this.context = context; |
||||||
|
canvas.onmousedown = (e) => { |
||||||
|
if (!this.selectedBtn) { |
||||||
|
this.message.create('warning', '请先选择要绘制的区域!'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//鼠标按下事件
|
||||||
|
var clickX = e.pageX - canvas.offsetLeft; |
||||||
|
var clickY = e.pageY - canvas.offsetTop; |
||||||
|
this.downx = clickX; |
||||||
|
this.downy = clickY; |
||||||
|
let obj; |
||||||
|
obj = this.PolygonData[this.selectedBtn]; |
||||||
|
this.DrawPolygon( |
||||||
|
clickX, |
||||||
|
clickY, |
||||||
|
canvas, |
||||||
|
context, |
||||||
|
obj.Points, |
||||||
|
obj.Circles, |
||||||
|
obj.Allpoints, |
||||||
|
obj.IsDragging, |
||||||
|
obj.IsInOut, |
||||||
|
obj.Color |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
canvas.onmouseup = (e) => { |
||||||
|
//鼠标松开事件
|
||||||
|
canvas.onmousemove = (ev) => { |
||||||
|
//鼠标移动事件
|
||||||
|
return false; |
||||||
|
}; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
PolygonData = { |
||||||
|
进出口: { |
||||||
|
//进出口多边形
|
||||||
|
Points: [], //线段的点的集合
|
||||||
|
Circles: [], //可拖动圆圈的点的集合
|
||||||
|
Allpoints: [], //整体移动点位
|
||||||
|
IsDragging: false, //是否可拖拽
|
||||||
|
IsInOut: false, //是否在绘制区域内
|
||||||
|
Color: 'red', |
||||||
|
}, |
||||||
|
收银区: { |
||||||
|
//收银区多边形
|
||||||
|
Points: [], //线段的点的集合
|
||||||
|
Circles: [], //可拖动圆圈的点的集合
|
||||||
|
Allpoints: [], //整体移动点位
|
||||||
|
IsDragging: false, //是否可拖拽
|
||||||
|
IsInOut: false, //是否在绘制区域内
|
||||||
|
Color: 'yellow', |
||||||
|
}, |
||||||
|
加油区: { |
||||||
|
//加油区多边形
|
||||||
|
Points: [], //线段的点的集合
|
||||||
|
Circles: [], //可拖动圆圈的点的集合
|
||||||
|
Allpoints: [], //整体移动点位
|
||||||
|
IsDragging: false, //是否可拖拽
|
||||||
|
IsInOut: false, //是否在绘制区域内
|
||||||
|
Color: 'green', |
||||||
|
}, |
||||||
|
卸油区: { |
||||||
|
Points: [], //线段的点的集合
|
||||||
|
Circles: [], //可拖动圆圈的点的集合
|
||||||
|
Allpoints: [], //整体移动点位
|
||||||
|
IsDragging: false, //是否可拖拽
|
||||||
|
IsInOut: false, //是否在绘制区域内
|
||||||
|
Color: 'black', |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
//绘制多边形的方法
|
||||||
|
DrawPolygon( |
||||||
|
clickX, |
||||||
|
clickY, |
||||||
|
canvas, |
||||||
|
context, |
||||||
|
Points, |
||||||
|
Circles, |
||||||
|
Allpoints, |
||||||
|
IsDragging, |
||||||
|
IsInOut, |
||||||
|
Color |
||||||
|
) { |
||||||
|
if (this.isInt(clickX, clickY, Points)) { |
||||||
|
IsInOut = true; |
||||||
|
return; |
||||||
|
} else { |
||||||
|
IsInOut = false; |
||||||
|
} |
||||||
|
let index; |
||||||
|
//判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
|
||||||
|
for (var i = 0; i < Circles.length; i++) { |
||||||
|
let circle = Circles[i]; |
||||||
|
//使用勾股定理计算这个点与圆心之间的距离
|
||||||
|
var distanceFromCenter = Math.sqrt( |
||||||
|
Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2) |
||||||
|
); |
||||||
|
// 如果是其他的点，则设置可以拖动
|
||||||
|
if (distanceFromCenter <= circle.radius) { |
||||||
|
// 清除之前选择的圆圈
|
||||||
|
index = i; |
||||||
|
IsDragging = true; |
||||||
|
//停止搜索
|
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
//如果点击新的位置，则进入下面的代码，绘制点
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height); |
||||||
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
||||||
|
|
||||||
|
//重绘除了自己的其他区域
|
||||||
|
for (const key in this.PolygonData) { |
||||||
|
const item = this.PolygonData[key]; |
||||||
|
if (key !== this.selectedBtn && key !== this.DrawPolygoning) { |
||||||
|
this.redrawPolygon( |
||||||
|
item.Points, |
||||||
|
item.Allpoints, |
||||||
|
item.Circles, |
||||||
|
context, |
||||||
|
item.Color |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//遍历数组画圆
|
||||||
|
var circle = { |
||||||
|
x: clickX, |
||||||
|
y: clickY, |
||||||
|
radius: 5, |
||||||
|
color: Color, |
||||||
|
isSelected: false, //拖拽点的标记
|
||||||
|
}; |
||||||
|
Circles.push(circle); |
||||||
|
Allpoints = JSON.parse(JSON.stringify(Circles)); |
||||||
|
Circles[0].color = Color; |
||||||
|
for (var i = 0; i < Circles.length; i++) { |
||||||
|
let circle = Circles[i]; |
||||||
|
// 绘制圆圈
|
||||||
|
context.globalAlpha = 0.85; |
||||||
|
context.beginPath(); |
||||||
|
context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); |
||||||
|
context.fillStyle = circle.color; |
||||||
|
context.strokeStyle = Color; |
||||||
|
context.fill(); |
||||||
|
context.stroke(); |
||||||
|
} |
||||||
|
// 画线
|
||||||
|
var point = { |
||||||
|
x: clickX, |
||||||
|
y: clickY, |
||||||
|
}; |
||||||
|
Points.push(point); |
||||||
|
context.beginPath(); |
||||||
|
context.lineWidth = 3; |
||||||
|
//从起始点开始绘制
|
||||||
|
context.moveTo(Points[0].x, Points[0].y); |
||||||
|
for (var i = 0; i < Points.length; i++) { |
||||||
|
context.lineTo(Points[i].x, Points[i].y); |
||||||
|
} |
||||||
|
context.closePath(); |
||||||
|
context.strokeStyle = Color; |
||||||
|
context.stroke(); |
||||||
|
} |
||||||
|
|
||||||
|
//判断点位是否在图形区域内
|
||||||
|
isInt(x, y, points) { |
||||||
|
if (!points[2]) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var pt = { |
||||||
|
x: x, |
||||||
|
y: y, |
||||||
|
}; |
||||||
|
return this.PointInPoly(pt, points); |
||||||
|
} |
||||||
|
//射线法判断点位
|
||||||
|
PointInPoly(pt, poly) { |
||||||
|
for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) |
||||||
|
((poly[i].y <= pt.y && pt.y < poly[j].y) || |
||||||
|
(poly[j].y <= pt.y && pt.y < poly[i].y)) && |
||||||
|
pt.x < |
||||||
|
((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) / |
||||||
|
(poly[j].y - poly[i].y) + |
||||||
|
poly[i].x && |
||||||
|
(c = !c); |
||||||
|
return c; |
||||||
|
} |
||||||
|
|
||||||
|
//根据已有数据重绘多边形
|
||||||
|
redrawPolygon(data, points, circles, context, color) { |
||||||
|
data.forEach((element) => { |
||||||
|
//遍历数组画圆
|
||||||
|
points = JSON.parse(JSON.stringify(circles)); |
||||||
|
circles[0].color = color; |
||||||
|
for (var i = 0; i < circles.length; i++) { |
||||||
|
let circle = circles[i]; |
||||||
|
// 绘制圆圈
|
||||||
|
context.globalAlpha = 0.85; |
||||||
|
context.beginPath(); |
||||||
|
context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); |
||||||
|
context.fillStyle = circle.color; |
||||||
|
context.strokeStyle = color; |
||||||
|
context.fill(); |
||||||
|
context.stroke(); |
||||||
|
} |
||||||
|
// 画线
|
||||||
|
context.beginPath(); |
||||||
|
context.lineWidth = 3; |
||||||
|
//从起始点开始绘制
|
||||||
|
context.moveTo(data[0].x, data[0].y); |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
context.lineTo(data[i].x, data[i].y); |
||||||
|
} |
||||||
|
context.closePath(); |
||||||
|
context.strokeStyle = color; |
||||||
|
context.stroke(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//清空画布
|
||||||
|
clearCanvas() { |
||||||
|
let canvas = document.getElementById('canvas') as any; |
||||||
|
let context = canvas.getContext('2d'); |
||||||
|
for (const key in this.PolygonData) { |
||||||
|
const element = this.PolygonData[key]; |
||||||
|
element.Points = []; |
||||||
|
element.Circles = []; |
||||||
|
element.Allpoints = []; |
||||||
|
element.IsDragging = false; |
||||||
|
element.IsInOut = false; |
||||||
|
} |
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height); |
||||||
|
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; |
||||||
|
// console.log(this.PolygonData)
|
||||||
|
} |
||||||
|
|
||||||
|
//清除某个标绘
|
||||||
|
clearCanvasItem(e, type) { |
||||||
|
e.stopPropagation(); |
||||||
|
this.modal.confirm({ |
||||||
|
nzTitle: '确认要清除此标绘吗?', |
||||||
|
nzOkText: '确定', |
||||||
|
nzOkType: 'primary', |
||||||
|
nzOkDanger: true, |
||||||
|
nzOnOk: () => { |
||||||
|
this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); |
||||||
|
this.copyCanvas |
||||||
|
? this.context.putImageData(this.copyCanvas, 0, 0) |
||||||
|
: null; |
||||||
|
this.PolygonData[type].Points = []; |
||||||
|
this.PolygonData[type].Circles = []; |
||||||
|
this.PolygonData[type].Allpoints = []; |
||||||
|
this.redrawAll(); |
||||||
|
}, |
||||||
|
nzCancelText: '取消', |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
redrawAll() { |
||||||
|
//重绘除了自己的其他区域
|
||||||
|
for (const key in this.PolygonData) { |
||||||
|
const item = this.PolygonData[key]; |
||||||
|
this.redrawPolygon( |
||||||
|
item.Points, |
||||||
|
item.Allpoints, |
||||||
|
item.Circles, |
||||||
|
this.context, |
||||||
|
item.Color |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//保存
|
||||||
|
save() { |
||||||
|
console.log(this.camerasData.dimensionedPointsAnxin); |
||||||
|
if (!this.camerasData.dimensionedPointsAnxin) { |
||||||
|
this.camerasData.dimensionedPointsAnxin = { |
||||||
|
进出口: [], |
||||||
|
收银区: [], |
||||||
|
加油区: [], |
||||||
|
卸油区: [], |
||||||
|
}; |
||||||
|
} |
||||||
|
console.log('标点数据', this.PolygonData); |
||||||
|
for (const key in this.PolygonData) { |
||||||
|
const item = this.PolygonData[key]; |
||||||
|
this.camerasData.dimensionedPointsAnxin[key] = item.Points; |
||||||
|
} |
||||||
|
let body = { |
||||||
|
dimensionedPointsAnxin: JSON.stringify( |
||||||
|
this.camerasData.dimensionedPointsAnxin |
||||||
|
), |
||||||
|
}; |
||||||
|
|
||||||
|
console.log('标点结果', this.camerasData.dimensionedPointsAnxin); |
||||||
|
this.http |
||||||
|
.put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, body) |
||||||
|
.subscribe((data) => { |
||||||
|
this.message.create('success', '保存成功!'); |
||||||
|
const isFullScreen = document.fullscreenElement; |
||||||
|
if (document.exitFullscreen && isFullScreen) { |
||||||
|
//关闭全屏
|
||||||
|
document.exitFullscreen(); |
||||||
|
} |
||||||
|
this.modal.closeAll(); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue