绘制多边形完善

src/app/system-management/image-label2/image-label2.component.html

@@ -2,8 +2,6 @@
   <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header>
   <div class="btnbox">
     <button nz-button nzType="primary">获取标注底图/更新摄像头图片</button>
-    <button nz-button [ngClass]="{selectBtn: markType}" (click)="markType = true;">标注监控区域</button>
-    <button nz-button [ngClass]="{selectBtn: !markType}" (click)="markType = false;">标注禁止区域</button>
     <button nz-button nzType="primary">保存</button>
     <button nz-button nzType="primary" nzDanger (click)="clearCanvas()">清空</button>
   </div>

src/app/system-management/image-label2/image-label2.component.ts

@@ -12,8 +12,7 @@ export class ImageLabel2Component implements OnInit {
   imgItem: any;
   canvasWidth: number = 0;
   canvasHeight: number = 0;
-  copyCanvas: any;
-  markType: boolean = true; //标注type
+  copyCanvas: any; //拷贝 canvas底图
 
   //返回上一步路由
   goback() {
@@ -76,18 +75,6 @@ export class ImageLabel2Component implements OnInit {
 
 
 
-  //线段的点的集合
-  points = [];
-  points2 = [];
-  //可拖动圆圈的点的集合
-  circles = [];
-  circles2 = [];
-  //整体移动点位
-  allpoints = [];
-  allpoints2 = [];
-  isDragging = false
-  //是否在绘制区域内
-  isInOut = false
   //记录鼠标点击位置
   downx = 0
   downy = 0
@@ -95,34 +82,89 @@ export class ImageLabel2Component implements OnInit {
   //清空画布
   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);
 
+    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');
-    // let html =  document.documentElement
-    // let boxDiv = document.getElementsByClassName("canvasDialog")[0]
-    canvas.onmousedown = (e)=>{
-      this.canvasClickEvent(e,canvas,context);
+    canvas.onmousedown = (e)=>{ //点击事件
+      var clickX = e.pageX - canvas.offsetLeft;
+      var clickY = e.pageY - canvas.offsetTop;
+      console.log(clickX,clickY)
+      this.downx = clickX
+      this.downy = clickY
+      this.drawPolygon(clickX,clickY,canvas,context);
     }
   }
 
-  //canvas 点击事件 标注
-  canvasClickEvent(e, canvas, context) {
-    var clickX = e.pageX - canvas.offsetLeft;
-    var clickY = e.pageY - canvas.offsetTop;
-    this.downx = clickX
-    this.downy = clickY
+  //canvas 绘制箭头
+  drawArrow(fromX, fromY, toX, toY, theta, headlen, width, color, ctx) {
+    // fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
+    // toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
+    // theta：三角斜边一直线夹角
+    // headlen：三角斜边长度
+    // 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';
+
+    // 计算各角度和对应的P2,P3坐标
+    var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
+      angle1 = (angle + theta) * Math.PI / 180,
+      angle2 = (angle - theta) * Math.PI / 180,
+      topX = headlen * Math.cos(angle1),
+      topY = headlen * Math.sin(angle1),
+      botX = headlen * Math.cos(angle2),
+      botY = headlen * Math.sin(angle2);
+    ctx.save();
+    ctx.beginPath();
+
+    var arrowX = fromX - topX,
+        arrowY = fromY - topY;
+
+    ctx.moveTo(arrowX, arrowY);
+    ctx.moveTo(fromX, fromY);
+    ctx.lineTo(toX, toY);
+    arrowX = toX + topX;
+    arrowY = toY + topY;
+    ctx.moveTo(arrowX, arrowY);
+    ctx.lineTo(toX, toY);
+    arrowX = toX + botX;
+    arrowY = toY + botY;
+    ctx.lineTo(arrowX, arrowY);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  //canvas 绘制长方形
+  drawOblong() {
+
+  }
+
+  //线段的点的集合
+  points = [];
+  //可拖动圆圈的点的集合
+  circles = [];
+  //整体移动点位
+  allpoints = [];
+  isDragging = false;
+  //是否在绘制区域内
+  isInOut = false;
+
+  //canvas 绘制多边形
+  drawPolygon(clickX, clickY, canvas, context) {
     if (this.isInt(clickX, clickY)) {
       this.isInOut = true
       return
@@ -131,10 +173,9 @@ export class ImageLabel2Component implements OnInit {
     }
 
     let index
-    let beforeCircles = this.markType? this.circles: this.circles2
     //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
-    for (var i = 0; i < beforeCircles.length; i++) {
-      let circle = beforeCircles[i];
+    for (var i = 0; i < this.circles.length; i++) {
+      let circle = this.circles[i];
       //使用勾股定理计算这个点与圆心之间的距离
       var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2));
 
@@ -148,26 +189,21 @@ export class ImageLabel2Component implements OnInit {
       }
     }
     //如果点击新的位置，则进入下面的代码，绘制点
-    //context.clearRect(0, 0, canvas.width, canvas.height);
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null;
     //遍历数组画圆
     var circle = {
       x: clickX,
       y: clickY,
-      radius: 10,
+      radius: 5,
       color: "blue",
       isSelected: false, //拖拽点的标记
     };
-    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];
+    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];
       // 绘制圆圈
       context.globalAlpha = 0.85;
       context.beginPath();
@@ -182,36 +218,31 @@ export class ImageLabel2Component implements OnInit {
       x: clickX,
       y: clickY,
     };
-    this.markType? this.points.push(point) : this.points2.push(point)
+    this.points.push(point)
     context.beginPath();
     context.lineWidth = 3;
     //从起始点开始绘制
-    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.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);
     }
     context.closePath()
-    context.fillStyle = "rgb(2,100,30)";
-    context.fill();
+    //ontext.fillStyle = "rgb(2,100,30)";
+    //context.fill();
     context.strokeStyle = "#9d4dca";
     context.stroke();
   }
 
   //判断点位是否在图形区域内
   isInt(x, y) {
-    if (this.markType && !this.points[2]) {
-      return
-    }
-    if (!this.markType && !this.points2[2]) {
+    if (!this.points[2]) {
       return
     }
     var pt = {
       x: x,
       y: y
     }
-    var poly = this.markType? this.points : this.points2;
-    return this.PointInPoly(pt, poly)
+    return this.PointInPoly(pt, this.points)
   }
 
   //射线法判断点位