Edge-host-maintenance/src/app/system-management/image-label/image-label.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image-label',
  templateUrl: './image-label.component.html',
  styleUrls: ['./image-label.component.scss']
})
export class ImageLabelComponent implements OnInit {

  constructor() { }

  imgItem: any;
  canvasWidth: number = 0;
  canvasHeight: number = 0;
  copyCanvas: any;
  markType: boolean = true; //标注type

  ngOnInit(): void {

  }

  ngAfterContentInit(): void {
    this.initBackgroundImg()
  }

  //初始化背景图
  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).getBoundingClientRect();

    // 图片加载完后，将其显示在canvas中
    var img = new Image();
    img.src = that.imgItem.url? that.imgItem.url : "../../../assets/images/bgImg.png";
    img.onload = () => {
      // 等比例缩放图片
      var scale = 1;
      if (img.width > center.width || img.height > center.height) {
        if (img.width > img.height) {
          scale = center.width / img.width;
        }else {
          scale = center.height / 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 - ((html.clientWidth - boxDiv.clientWidth) / 2);
      var clickY = e.pageY - canvas.offsetTop - ((html.clientHeight - boxDiv.clientHeight) / 2);
      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();
    }
  }

  //判断点位是否在图形区域内
  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;
  }

  //cneter height
  heightCount() {
    let style: any = {}
    let height = document.documentElement.clientHeight
    style.height = (height - 180) + 'px';
    return style
  }

}