标注功能迁移完善

src/app/system-management/image-label/image-label.component.scss

@@ -18,7 +18,7 @@
   height:500px;
   overflow: hidden;
   canvas{ overflow: hidden; }
-  .content,center{
+  .content,.center{
     width: 100%;
     height: 100%;
     overflow: hidden;

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

@@ -2,12 +2,14 @@
   <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 nzType="primary">标注监控区域</button>
+    <button nz-button [ngClass]="{selectBtn: markType}" (click)="markType = true;">标注监控区域</button>
-    <button nz-button nzType="primary" nzDanger>标注禁止区域</button>
+    <button nz-button [ngClass]="{selectBtn: !markType}" (click)="markType = false;">标注禁止区域</button>
     <button nz-button nzType="primary">保存</button>
-    <button nz-button nzType="primary">完成</button>
+    <button nz-button nzType="primary" nzDanger (click)="clearCanvas()">清空</button>
   </div>
   <div class="imgbox">
-    <img src="../../../assets/images/test/dog.jpg" alt="">
+    <div class="content">
+      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas></div>
+    </div>
   </div>
 </div>

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

@@ -7,7 +7,14 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  overflow: hidden;
+  .imgbox{ flex: 1; overflow: hidden; }
+  canvas{ overflow: hidden; }
+  .content,.center{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
 }
 .btnbox{
   display: flex;
@@ -16,3 +23,5 @@
     margin-right: 6px;
   }
 }
+
+.selectBtn { background-color: #1890ff; color: #fff; }

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

@@ -9,9 +9,214 @@ export class ImageLabel2Component implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+  imgItem: any;
-  }
+  canvasWidth: number = 0;
+  canvasHeight: number = 0;
+  copyCanvas: any;
+  markType: boolean = true; //标注type
+
+  //返回上一步路由
   goback() {
     history.go(-1)
   }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterContentInit(): void {
+    window.setTimeout(()=>{
+      this.initBackgroundImg()
+    }, 0)
+  }
+
+  //初始化背景图
+  initBackgroundImg() {
+    let canvas = document.getElementById('canvas') as any;
+    canvas.oncontextmenu = () =>{ return false; };
+    let that = this
+    let ctx
+    // 检测canvas支持性
+    if (canvas.getContext) {
+      ctx = canvas.getContext('2d');	// 返回一个对象，该对象提供了用在画布上绘图的方法和属性
+    } else {
+      document.write("你的浏览器不支持canvas,请升级你的浏览器!");
+      return;
+    }
+
+    // 读取可视区域 宽高
+    let center = document.getElementById('canvasCenter') as any;
+
+    // 图片加载完后，将其显示在canvas中
+    var img = new Image();
+    img.src = that.imgItem? that.imgItem : "../../../assets/images/bgImg.png";
+    img.onload = () => {
+      // 等比例缩放图片
+      var scale = 1;
+      if (img.width > center.clientWidth || img.height > center.clientHeight) {
+        if (img.width > img.height) {
+          scale = center.clientWidth / img.width;
+        }else {
+          scale = center.clientHeight / img.height;
+        }
+      }
+      that.canvasWidth = img.width * scale;
+      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)
+    }
+  }
+
+
+
+  //线段的点的集合
+  points = [];
+  points2 = [];
+  //可拖动圆圈的点的集合
+  circles = [];
+  circles2 = [];
+  //整体移动点位
+  allpoints = [];
+  allpoints2 = [];
+  isDragging = false
+  //是否在绘制区域内
+  isInOut = false
+  //记录鼠标点击位置
+  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');
+    // let html =  document.documentElement
+    // let boxDiv = document.getElementsByClassName("canvasDialog")[0]
+    canvas.onmousedown = (e)=>{
+      var clickX = e.pageX - canvas.offsetLeft;
+      var clickY = e.pageY - canvas.offsetTop;
+      this.downx = clickX
+      this.downy = clickY
+      if (this.isInt(clickX, clickY)) {
+        this.isInOut = true
+        return
+      } else {
+        this.isInOut = false
+      }
+
+      let index
+      let beforeCircles = this.markType? this.circles: this.circles2
+      //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
+      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));
+  
+        // 如果是其他的点，则设置可以拖动
+        if (distanceFromCenter <= circle.radius) {
+          // 清除之前选择的圆圈
+          index = i;
+          this.isDragging = true;
+          //停止搜索
+          return;
+        }
+      }
+      //如果点击新的位置，则进入下面的代码，绘制点
+      //context.clearRect(0, 0, canvas.width, canvas.height);
+      //遍历数组画圆
+      var circle = {
+        x: clickX,
+        y: clickY,
+        radius: 10,
+        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];
+        // 绘制圆圈
+        context.globalAlpha = 0.85;
+        context.beginPath();
+        context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+        context.fillStyle = circle.color;
+        context.strokeStyle = "black";
+        context.fill();
+        context.stroke();
+      }
+      // 画线
+      var point = {
+        x: clickX,
+        y: clickY,
+      };
+      this.markType? this.points.push(point) : this.points2.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.closePath()
+      context.fillStyle = "rgb(2,100,30)";
+      context.fill();
+      context.strokeStyle = "#9d4dca";
+      context.stroke();
+    }
+  }
+
+  //canvas 点击事件 标注
+  canvasClickEvent(e) {
+
+  }
+
+  //判断点位是否在图形区域内
+  isInt(x, y) {
+    if (this.markType && !this.points[2]) {
+      return
+    }
+    if (!this.markType && !this.points2[2]) {
+      return
+    }
+    var pt = {
+      x: x,
+      y: y
+    }
+    var poly = this.markType? this.points : this.points2;
+    return this.PointInPoly(pt, poly)
+  }
+
+  //射线法判断点位
+  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;
+  }
+
 }