1.3.0 新增 多点连线、多边形等按住shift绘制垂直线段

src/app/working-area/working-area.component.ts

@@ -90,7 +90,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public selection: AxSelection = new AxSelection();
   /**
-   * 当前鼠标的点
+   * 当前鼠标点击的点
    */
   public currentClickPoint: PIXI.Graphics = new PIXI.Graphics();
   /**
@@ -151,6 +151,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public animationTime;
   // 是否按下Ctrl键
   isCtrlKeyClicked = false;
+  // 是否开启多点连线垂直绘制
+  isDrawVerticalLine = false;
   /**
    * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
    * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@@ -162,7 +164,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 重大调整-主版本号增加
    * 日期变更-日期版本号增加
    */
-  public VERSION = '1.2.2.20210220_beta';
+  // todo  shift绘制垂直线段
+  public VERSION = '1.3.0.20210220_beta';
   /**
    * 数据初始化
    */
@@ -171,12 +174,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
-
+      // if (event.keyCode === 16) {
+      //   this.isDrawVerticalLine = true;
+      // }
+      switch (event.keyCode) {
+        case 16:
+          this.isDrawVerticalLine = true;
+          break;
+        default:
+          break;
+      }
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
-      // 按Del键删除选中的图标
+      // // 按Del键删除选中的图标
-      if (event.keyCode === 46) {
+      // if (event.keyCode === 46) {
-        this.deleteSelectedShape();
+      //   this.deleteSelectedShape();
+      // }
+      switch (event.keyCode) {
+        case 16: // shift
+          this.isDrawVerticalLine = false;
+          break;
+        case 46: // delete
+          this.deleteSelectedShape();
+          break;
+        default:
+          break;
       }
     });
   }
@@ -774,8 +796,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               break;
             case PaintMode.lineIcon:
               this.previewLineSegment.visible = true;
-              this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+
-              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
+                this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              }
+              // 添加数据
+              this.paintPoints.push(point);
 
               if (this.paintPoints.length >= 2) {
                 this.enterPaintEndButton.position = this.circleShadow.position;
@@ -832,8 +873,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               break;
             case PaintMode.polygonIcon:
               this.previewLineSegment.visible = true;
-              this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
+                this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              }
+              // 添加数据
+              this.paintPoints.push(point);
               if (this.paintPoints.length === 1) {
                 this.enterPaintEndButton.position = this.circleShadow.position;
               } else if (this.paintPoints.length >= 3) {
@@ -868,8 +929,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               this.enterPaintEndButton.position = this.circleShadow.position;
               this.enterPaintEndButton.visible = true;
               this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
-              this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
+                this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              }
+              // 添加数据
+              this.paintPoints.push(point);
               if (this.paintPoints.length < 2) {
                 return;
               }
@@ -1207,10 +1288,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param pointB 点B
    */
   private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
+    const ps: PIXI.Point = pointA;
+    let pe: PIXI.Point = pointB;
+    if (this.isDrawVerticalLine) {
+      // 起点距离终点水平距离
+      const dh = Math.abs(pointB.x - pointA.x);
+      // 起点距离终点垂直距离
+      const dv = Math.abs(pointB.y - pointA.y);
+      if (dh >= dv) {
+        // 绘制水平线
+        pe = new PIXI.Point(pointB.x, pointA.y);
+
+      } else {
+        // 绘制垂直线
+        pe = new PIXI.Point(pointA.x, pointB.y);
+      }
+    }
+
     this.previewLineSegment.clear();
     this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
-    this.previewLineSegment.moveTo(pointA.x, pointA.y);
+    // this.previewLineSegment.moveTo(pointA.y, pointA.y);
-    this.previewLineSegment.lineTo(pointB.x, pointB.y);
+    // this.previewLineSegment.lineTo(pointB.x, pointB.y);
+    this.previewLineSegment.moveTo(ps.x, ps.y);
+    this.previewLineSegment.lineTo(pe.x, pe.y);
   }
   /**
    * 创建半径图标影子