✨ 涂鸦增加直线绘制方式

Author: Littlefean

app/src/core/render/canvas2d/renderer.tsx

@@ -494,7 +494,28 @@ export namespace Renderer {
     const currentStrokeColor = Stage.drawingMachine.getCurrentStrokeColor();
 
     if (Stage.leftMouseMode === LeftMouseModeEnum.draw) {
+      // 画鼠标绘制过程，还未抬起鼠标左键的 笔迹
+      if (Stage.drawingMachine.currentStroke.length > 0) {
+        if (Controller.pressingKeySet.has("shift")) {
+          CurveRenderer.renderSolidLine(
+            transformWorld2View(Stage.drawingMachine.currentStroke[0].startLocation),
+            MouseLocation.vector(),
+            currentStrokeColor.a === 0 ? StageStyleManager.currentStyle.StageObjectBorder : currentStrokeColor,
+            Stage.drawingMachine.currentStrokeWidth * Camera.currentScale,
+          );
+        } else {
+          for (const segment of Stage.drawingMachine.currentStroke) {
+            CurveRenderer.renderSolidLine(
+              transformWorld2View(segment.startLocation),
+              transformWorld2View(segment.endLocation),
+              currentStrokeColor.a === 0 ? StageStyleManager.currentStyle.StageObjectBorder : currentStrokeColor,
+              Stage.drawingMachine.currentStrokeWidth * Camera.currentScale,
+            );
+          }
+        }
+      }
       if (Stage.drawingControlMachine.isAdjusting) {
+        // 鼠标正在调整状态
         ShapeRenderer.renderCircle(
           transformWorld2View(Stage.drawingControlMachine.startAdjustWidthLocation),
           (Stage.drawingMachine.currentStrokeWidth / 2) * Camera.currentScale,
@@ -522,16 +543,28 @@ export namespace Renderer {
             0,
           );
         }
-      }
-
-      // 画笔
-      if (Stage.drawingMachine.currentStroke.length > 0) {
-        for (const segment of Stage.drawingMachine.currentStroke) {
+        // 如果按下shift键，说明正在画直线
+        if (Controller.pressingKeySet.has("shift")) {
+          // 画一个跟随鼠标的十字准星
+          const crossSize = 100;
+          const crossCenter = MouseLocation.vector();
+          const crossLine1Start = crossCenter.add(new Vector(-crossSize, 0));
+          const crossLine1End = crossCenter.add(new Vector(crossSize, 0));
+          const crossLine2Start = crossCenter.add(new Vector(0, -crossSize));
+          const crossLine2End = crossCenter.add(new Vector(0, crossSize));
+          CurveRenderer.renderSolidLine(crossLine1Start, crossLine1End, StageStyleManager.currentStyle.Background, 2);
+          CurveRenderer.renderSolidLine(crossLine2Start, crossLine2End, StageStyleManager.currentStyle.Background, 2);
           CurveRenderer.renderSolidLine(
-            transformWorld2View(segment.startLocation),
-            transformWorld2View(segment.endLocation),
-            currentStrokeColor.a === 0 ? StageStyleManager.currentStyle.StageObjectBorder : currentStrokeColor,
-            Stage.drawingMachine.currentStrokeWidth * Camera.currentScale,
+            crossLine1Start,
+            crossLine1End,
+            StageStyleManager.currentStyle.effects.successShadow,
+            0.5,
+          );
+          CurveRenderer.renderSolidLine(
+            crossLine2Start,
+            crossLine2End,
+            StageStyleManager.currentStyle.effects.successShadow,
+            0.5,
           );
         }
       }

app/src/core/service/controlService/controller/concrete/ControllerPenStrokeDrawing.tsx

@@ -13,14 +13,21 @@ import { LeftMouseModeEnum, Stage } from "../../../../stage/Stage";
  * 涂鸦功能
  */
 class ControllerDrawingClass extends ControllerClass {
-  // 一开始是禁用状态
   private _isUsing: boolean = false;
 
+  /** 在移动的过程中，记录这一笔画的笔迹 */
   public currentStroke: PenStrokeSegment[] = [];
 
   private autoFillPenStrokeColorEnable = false;
   private autoFillPenStrokeColor: Color = Color.Transparent;
 
+  /**
+   * 初始按下的起始点的位置
+   */
+  public pressStartWordLocation = Vector.getZero();
+  /** 当前是否是在绘制直线 */
+  public isDrawingLine = false;
+
   /**
    * 当前画笔的粗度
    */
@@ -52,7 +59,12 @@ class ControllerDrawingClass extends ControllerClass {
       return;
     }
     this._isUsing = true;
+
     const pressWorldLocation = Renderer.transformView2World(new Vector(event.clientX, event.clientY));
+    if (Controller.pressingKeySet.has("shift")) {
+      this.isDrawingLine = true;
+    }
+    this.pressStartWordLocation = pressWorldLocation.clone();
     this.recordLocation.push(pressWorldLocation.clone());
 
     this.lastMoveLocation = pressWorldLocation.clone();
@@ -86,27 +98,52 @@ class ControllerDrawingClass extends ControllerClass {
     this.recordLocation.push(releaseWorldLocation.clone());
 
     // 生成笔触
-    const strokeStringList: string[] = [];
-    for (const location of this.recordLocation) {
-      strokeStringList.push(`${Math.round(location.x)},${Math.round(location.y)},${this.currentStrokeWidth}`);
+    if (Controller.pressingKeySet.has("shift")) {
+      // 直线
+      const startLocation = this.pressStartWordLocation;
+      const endLocation = releaseWorldLocation;
+      const strokeStringList: string[] = [
+        `${Math.round(startLocation.x)},${Math.round(startLocation.y)},${this.currentStrokeWidth}`,
+        `${Math.round(endLocation.x)},${Math.round(endLocation.y)},${this.currentStrokeWidth}`,
+      ];
+      const contentString = strokeStringList.join("~");
+      const stroke = new PenStroke({
+        type: "core:pen_stroke",
+        content: contentString,
+        color: this.getCurrentStrokeColor().toArray(),
+        uuid: v4(),
+        location: [0, 0],
+        details: "",
+      });
+      stroke.setColor(this.getCurrentStrokeColor());
+      StageManager.addPenStroke(stroke);
+    } else {
+      // 普通笔迹
+      const strokeStringList: string[] = [];
+      for (const location of this.recordLocation) {
+        strokeStringList.push(`${Math.round(location.x)},${Math.round(location.y)},${this.currentStrokeWidth}`);
+      }
+      const contentString = strokeStringList.join("~");
+
+      const stroke = new PenStroke({
+        type: "core:pen_stroke",
+        content: contentString,
+        color: this.getCurrentStrokeColor().toArray(),
+        uuid: v4(),
+        location: [0, 0],
+        details: "",
+      });
+      stroke.setColor(this.getCurrentStrokeColor());
+      StageManager.addPenStroke(stroke);
     }
-    const contentString = strokeStringList.join("~");
-
-    const stroke = new PenStroke({
-      type: "core:pen_stroke",
-      content: contentString,
-      color: this.getCurrentStrokeColor().toArray(),
-      uuid: v4(),
-      location: [0, 0],
-      details: "",
-    });
-    stroke.setColor(this.getCurrentStrokeColor());
-    StageManager.addPenStroke(stroke);
+
+    // 清理
     this.recordLocation = [];
     this.currentStroke = [];
 
     Controller.setCursorNameHook(CursorNameEnum.Crosshair);
     this._isUsing = false;
+    this.isDrawingLine = false;
   };
 
   public getCurrentStrokeColor() {