修正正确缩放图片BUG；封装标注事件

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

@@ -54,10 +54,14 @@ export class ImageLabel2Component implements OnInit {
       // 等比例缩放图片
       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;
+        let scaleOne = center.clientWidth / img.width;
+        let scaleTwo = center.clientHeight / img.height;
+        if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) {
+          scale = scaleOne;
+        } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) {
+          scale = scaleTwo;
+        } else {
+          scale = 0.3;
         }
       }
       that.canvasWidth = img.width * scale;
@@ -109,89 +113,89 @@ export class ImageLabel2Component implements OnInit {
     // 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
-      }
+      this.canvasClickEvent(e,canvas,context);
+    }
+  }
 
-      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();
+  //canvas 点击事件 标注
+  canvasClickEvent(e, canvas, context) {
+    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;
       }
-      // 画线
-      var point = {
-        x: clickX,
-        y: clickY,
-      };
-      this.markType? this.points.push(point) : this.points2.push(point)
+    }
+    //如果点击新的位置，则进入下面的代码，绘制点
+    //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.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.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+      context.fillStyle = circle.color;
+      context.strokeStyle = "black";
       context.fill();
-      context.strokeStyle = "#9d4dca";
       context.stroke();
     }
-  }
-
-  //canvas 点击事件 标注
-  canvasClickEvent(e) {
-
+    // 画线
+    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();
   }
 
   //判断点位是否在图形区域内