标绘矩形功能完善

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

@@ -75,15 +75,24 @@ export class ImageLabel2Component implements OnInit {
 
 
 
+  isDrawArrow: boolean = true; //绘制 箭头/矩形
   //记录鼠标点击位置
-  downx = 0
+  downx = 0;
-  downy = 0
+  downy = 0;
 
   //清空画布
   clearCanvas() {
+    // 清空标绘箭头
+    this.arrowPoints = [];
+    // 清空标绘箭头
+    // 清空标绘矩形
+    this.oblongPoints = [];
+    // 清空标绘矩形
+    // 清空标绘多边形
     this.points = [];
     this.circles = [];
     this.allpoints = [];
+    // 清空标绘多边形
     let canvas = document.getElementById('canvas') as any;
     let context = canvas.getContext('2d');
 
@@ -94,14 +103,73 @@ export class ImageLabel2Component implements OnInit {
   //初始化 canvas画布 点击事件
   initCanvasEvent(canvas) {
     let context = canvas.getContext('2d');
-    canvas.onmousedown = (e)=>{ //点击事件
+    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);
+      //this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形
+
+      //开始绘制
+      context.beginPath();
+      context.moveTo(clickX,clickY);
+      context.strokeStyle = "green";
+      context.lineWidth = 3;
+      canvas.onmousemove = (ev)=>{ //鼠标移动事件
+        var moveX = ev.pageX - canvas.offsetLeft;
+        var moveY = ev.pageY - canvas.offsetTop;
+        if (this.isDrawArrow) { //绘制 箭头
+          context.lineTo(moveX,moveY);
+          context.stroke();
+        } else { //绘制 矩形
+          this.drawOblong(this.oblongPoints,context)
+          let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY)
+          context.strokeRect(element.x,element.y,element.width,element.height);
+        }
+      }
     }
+    canvas.onmouseup = (e)=>{ //鼠标松开事件
+      canvas.onmousemove = (ev)=>{ //鼠标移动事件
+        return false;
+      }
+      var upX = e.pageX - canvas.offsetLeft;
+      var upY = e.pageY - canvas.offsetTop;
+      if (this.isDrawArrow) { //绘制 箭头
+        let point = {
+          startX: this.downx,
+          startY: this.downy,
+          endX: upX,
+          endY: upY,
+        }
+        this.arrowPoints.push(point);
+        this.drawLine(this.arrowPoints,context)
+      } else { //绘制 矩形
+        let point = this.getOblongInfo(this.downx,this.downy,upX,upY)
+        this.oblongPoints.push(point)
+        this.drawOblong(this.oblongPoints,context)
+      }
+    };
+
+  }
+
+  arrowPoints = []; //箭头的点的集合
+
+  //canvas 绘制直线
+  drawLine(pointsList, context) {
+    context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null;
+    pointsList.forEach((item,index)=>{
+      if ((index+1)%2 === 0) {
+        this.drawArrow(item.startX,item.startY,item.endX,item.endY,30,10,3,'green',context)
+      } else {
+        context.beginPath();
+        context.moveTo(item.startX,item.startY);
+        context.strokeStyle = "green";
+        context.lineWidth = 3;
+        context.lineTo(item.endX,item.endY);
+        context.stroke();
+      }
+    })
   }
 
   //canvas 绘制箭头
@@ -148,20 +216,49 @@ export class ImageLabel2Component implements OnInit {
     ctx.restore();
   }
 
-  //canvas 绘制长方形
+  oblongPoints = []; //矩形的点的集合
-  drawOblong() {
 
+  //获取 矩形左上角点位/宽高
+  getOblongInfo(startX,startY,endX,endY) {
+    let point = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    }
+    if (startX > endX) {
+      point.x = endX
+      point.width = startX - endX
+    } else {
+      point.x = startX
+      point.width = endX - startX
+    }
+    if (startY > endY) {
+      point.y = endY
+      point.height = startY - endY
+    } else {
+      point.y = startY
+      point.height = endY - startY
+    }
+    return point
+  }
+
+  //canvas 绘制矩形
+  drawOblong(oblongList, context) {
+    context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null;
+    oblongList.forEach(element => {
+      context.strokeStyle = "green";
+      context.lineWidth = 3;
+      context.strokeRect(element.x,element.y,element.width,element.height);
+    });
   }
 
-  //线段的点的集合
+  points = []; //线段的点的集合
-  points = [];
+  circles = []; //可拖动圆圈的点的集合
-  //可拖动圆圈的点的集合
+  allpoints = []; //整体移动点位
-  circles = [];
+  isDragging = false; //是否可拖拽
-  //整体移动点位
+  isInOut = false; //是否在绘制区域内
-  allpoints = [];
-  isDragging = false;
-  //是否在绘制区域内
-  isInOut = false;
 
   //canvas 绘制多边形
   drawPolygon(clickX, clickY, canvas, context) {
@@ -196,12 +293,12 @@ export class ImageLabel2Component implements OnInit {
       x: clickX,
       y: clickY,
       radius: 5,
-      color: "blue",
+      color: "white",
       isSelected: false, //拖拽点的标记
     };
     this.circles.push(circle);
     this.allpoints = JSON.parse(JSON.stringify(this.circles))
-    this.circles[0].color = "green";
+    this.circles[0].color = "white";
     for (var i = 0; i < this.circles.length; i++) {
       let circle = this.circles[i];
       // 绘制圆圈
@@ -209,7 +306,7 @@ export class ImageLabel2Component implements OnInit {
       context.beginPath();
       context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
       context.fillStyle = circle.color;
-      context.strokeStyle = "black";
+      context.strokeStyle = "red";
       context.fill();
       context.stroke();
     }
@@ -229,7 +326,7 @@ export class ImageLabel2Component implements OnInit {
     context.closePath()
     //ontext.fillStyle = "rgb(2,100,30)";
     //context.fill();
-    context.strokeStyle = "#9d4dca";
+    context.strokeStyle = "green";
     context.stroke();
   }