From f191a5c9afda4ecdb19fe0c272fb8f9bdc5d8b36 Mon Sep 17 00:00:00 2001 From: cpfcls <1105965053@qq.com> Date: Fri, 18 Mar 2022 17:51:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E4=BC=9A=E5=8A=9F=E8=83=BD=E5=9F=BA?= =?UTF-8?q?=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../image-label/image-label.component.html | 5 +- .../image-label/image-label.component.scss | 5 +- .../image-label/image-label.component.ts | 60 ++++++++++++++----- 3 files changed, 52 insertions(+), 18 deletions(-) diff --git a/src/app/system-management/image-label/image-label.component.html b/src/app/system-management/image-label/image-label.component.html index 8bfe138..9b2c16e 100644 --- a/src/app/system-management/image-label/image-label.component.html +++ b/src/app/system-management/image-label/image-label.component.html @@ -1,7 +1,8 @@
- - + + +
diff --git a/src/app/system-management/image-label/image-label.component.scss b/src/app/system-management/image-label/image-label.component.scss index f69cdda..0f24a83 100644 --- a/src/app/system-management/image-label/image-label.component.scss +++ b/src/app/system-management/image-label/image-label.component.scss @@ -6,11 +6,12 @@ } .btnbox { - margin-bottom: 6px; + margin-bottom: 5px; button { - margin-right: 12px; + margin-right: 15px; } } +.selectBtn { background-color: #1890ff; color: #fff; } .imgbox { width: 100%; diff --git a/src/app/system-management/image-label/image-label.component.ts b/src/app/system-management/image-label/image-label.component.ts index 4328bc0..43cf808 100644 --- a/src/app/system-management/image-label/image-label.component.ts +++ b/src/app/system-management/image-label/image-label.component.ts @@ -12,6 +12,8 @@ export class ImageLabelComponent implements OnInit { imgItem: any; canvasWidth: number = 0; canvasHeight: number = 0; + copyCanvas: any; + markType: boolean = true; //标注type ngOnInit(): void { @@ -55,6 +57,7 @@ export class ImageLabelComponent implements OnInit { that.canvasHeight = img.height * scale; // 计算等比缩小后图片 window.setTimeout(()=>{ // 加载图片 ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); + this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) that.initCanvasEvent(canvas) }, 0) } @@ -62,10 +65,13 @@ export class ImageLabelComponent implements OnInit { //线段的点的集合 points = []; + points2 = []; //可拖动圆圈的点的集合 circles = []; + circles2 = []; //整体移动点位 - allpoints = [] + allpoints = []; + allpoints2 = []; isDragging = false //是否在绘制区域内 isInOut = false @@ -73,6 +79,21 @@ export class ImageLabelComponent implements OnInit { downx = 0 downy = 0 + //清空画布 + clearCanvas() { + this.points = []; + this.points2 = []; + this.circles = []; + this.circles2 = []; + this.allpoints = []; + this.allpoints2 = []; + let canvas = document.getElementById('canvas') as any; + let context = canvas.getContext('2d'); + context.clearRect(0, 0, canvas.width, canvas.height); + + this.copyCanvas?context.putImageData(this.copyCanvas, 0, 0) : null; + } + //初始化 canvas画布 点击事件 initCanvasEvent(canvas) { let context = canvas.getContext('2d'); @@ -91,9 +112,10 @@ export class ImageLabelComponent implements OnInit { } let index + let beforeCircles = this.markType? this.circles: this.circles2 //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码 - for (var i = 0; i < this.circles.length; i++) { - let circle = this.circles[i]; + for (var i = 0; i < beforeCircles.length; i++) { + let circle = beforeCircles[i]; //使用勾股定理计算这个点与圆心之间的距离 var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)); @@ -116,11 +138,17 @@ export class ImageLabelComponent implements OnInit { color: "blue", isSelected: false, //拖拽点的标记 }; - this.circles.push(circle); - this.allpoints = JSON.parse(JSON.stringify(this.circles)) - this.circles[0].color = "green"; - for (var i = 0; i < this.circles.length; i++) { - let circle = this.circles[i]; + if (this.markType) { + this.circles.push(circle); + this.allpoints = JSON.parse(JSON.stringify(this.circles)) + this.circles[0].color = "green"; + } else { + this.circles2.push(circle); + this.allpoints2 = JSON.parse(JSON.stringify(this.circles2)) + this.circles2[0].color = "red"; + } + for (var i = 0; i < beforeCircles.length; i++) { + let circle = beforeCircles[i]; // 绘制圆圈 context.globalAlpha = 0.85; context.beginPath(); @@ -135,13 +163,14 @@ export class ImageLabelComponent implements OnInit { x: clickX, y: clickY, }; - this.points.push(point); + this.markType? this.points.push(point) : this.points2.push(point) context.beginPath(); context.lineWidth = 3; //从起始点开始绘制 - context.moveTo(this.points[0].x, this.points[0].y); - for (var i = 0; i < this.points.length; i++) { - context.lineTo(this.points[i].x, this.points[i].y); + let beforePoint = this.markType? this.points: this.points2 + context.moveTo(beforePoint[0].x, beforePoint[0].y); + for (var i = 0; i < beforePoint.length; i++) { + context.lineTo(beforePoint[i].x, beforePoint[i].y); } context.closePath() context.fillStyle = "rgb(2,100,30)"; @@ -153,14 +182,17 @@ export class ImageLabelComponent implements OnInit { //判断点位是否在图形区域内 isInt(x, y) { - if (!this.points[2]) { + if (this.markType && !this.points[2]) { + return + } + if (!this.markType && !this.points2[2]) { return } var pt = { x: x, y: y } - var poly = this.points + var poly = this.markType? this.points : this.points2; return this.PointInPoly(pt, poly) }