diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts index a2633dc..f932570 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -47,6 +47,7 @@ export class ImageLabel2Component implements OnInit { info.dimensionedPoints? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; that.camerasData = info; that.markType = info.type; + console.log(that.camerasData,"摄像头数据") const httpOptions = { responseType: 'blob' as 'json', params: {cameraId: parmas.id} @@ -68,9 +69,9 @@ export class ImageLabel2Component implements OnInit { save() { if (!this.camerasData.dimensionedPoints) { this.camerasData.dimensionedPoints = { - polygon: null, - arrow : null, - rectangle: null, + polygon: [], + arrow : [], + rectangle: [], } } if (this.markType === 0) { @@ -127,11 +128,31 @@ export class ImageLabel2Component implements OnInit { window.setTimeout(()=>{ // 加载图片 ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) - that.initCanvasEvent(canvas) + that.initCanvasEvent(canvas) //监听canvas事件 + that.initMark(canvas,ctx) //初始化标绘图形 }, 0) } } + //初始化标绘图形 + 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); //绘制多边形 + }); + } else if (this.markType === 2) { + this.arrowPoints = this.camerasData.dimensionedPoints.arrow + this.oblongPoints = this.camerasData.dimensionedPoints.rectangle + this.drawLine(this.arrowPoints,context) + } else if (this.markType === 3) { + this.arrowPoints = this.camerasData.dimensionedPoints.arrow + this.drawLine(this.arrowPoints,context) + } + } + markType: number = 0; //0=进出口,2=卸油区,3=便利店,