🚸 增加改变涂鸦粗细的快捷键

Author: Littlefean

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

@@ -566,14 +566,22 @@ export namespace Renderer {
         }
       }
       if (Stage.drawingControlMachine.isAdjusting) {
+        const circleCenter = transformWorld2View(Stage.drawingControlMachine.startAdjustWidthLocation);
         // 鼠标正在调整状态
         ShapeRenderer.renderCircle(
-          transformWorld2View(Stage.drawingControlMachine.startAdjustWidthLocation),
+          circleCenter,
           (Stage.drawingMachine.currentStrokeWidth / 2) * Camera.currentScale,
           currentStrokeColor.a === 0 ? StageStyleManager.currentStyle.StageObjectBorder : currentStrokeColor,
           Color.Transparent,
           0,
         );
+        // 当前粗细显示
+        TextRenderer.renderTextFromCenter(
+          `2R: ${Stage.drawingMachine.currentStrokeWidth}px`,
+          circleCenter.add(new Vector(0, (-(Stage.drawingMachine.currentStrokeWidth / 2) - 40) * Camera.currentScale)),
+          24,
+          currentStrokeColor.a === 0 ? StageStyleManager.currentStyle.StageObjectBorder : currentStrokeColor,
+        );
       } else {
         // 画跟随鼠标的笔头
         // 如果粗细大于一定程度，则渲染成空心的

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

@@ -48,6 +48,7 @@ class CuttingControllerClass extends ControllerClass {
     if (!(event.button == 2 || event.button == 0)) {
       return;
     }
+
     // 左键按下的
     if (event.button === 0 && Stage.leftMouseMode === LeftMouseModeEnum.connectAndCut) {
       this.mouseDownEvent(event);
@@ -85,6 +86,10 @@ class CuttingControllerClass extends ControllerClass {
     if (!this.isUsing) {
       return;
     }
+    if (Stage.drawingControlMachine.isAdjusting) {
+      this.isUsing = false;
+      return;
+    }
     // 正在切断线
     this.cuttingLine = new Line(this.cuttingStartLocation, this.lastMoveLocation);
 

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

@@ -14,6 +14,10 @@ export class ControllerPenStrokeControl extends ControllerClass {
    * Alt键右键按下时的位置
    */
   public startAdjustWidthLocation: Vector = Vector.getZero();
+  /**
+   * 在右键移动的过程中，记录上一次的位置
+   */
+  public lastAdjustWidthLocation: Vector = Vector.getZero();
 
   public mousedown: (event: MouseEvent) => void = (event) => {
     if (!(event.button === 2 && Stage.leftMouseMode === LeftMouseModeEnum.draw)) {
@@ -24,6 +28,7 @@ export class ControllerPenStrokeControl extends ControllerClass {
       // 右键按下时，开始调整笔刷粗细
       this.startAdjustWidthLocation = pressWorldLocation.clone();
       this.isAdjusting = true;
+      this.lastAdjustWidthLocation = pressWorldLocation.clone();
     }
   };
 
@@ -55,14 +60,50 @@ export class ControllerPenStrokeControl extends ControllerClass {
     }
   };
 
+  // public mousewheel: (event: WheelEvent) => void = (event) => {
+  //   if (Stage.leftMouseMode !== LeftMouseModeEnum.draw) {
+  //     return;
+  //   }
+  //   if (Controller.pressingKeySet.has("control")) {
+  //     // 控制放大缩小
+  //     if (isMac) {
+  //       // mac暂不支持滚轮缩放大小
+  //       return;
+  //     } else {
+  //       let newWidth;
+  //       if (event.deltaY > 0) {
+  //         newWidth = Stage.drawingMachine.currentStrokeWidth + 1;
+  //       } else {
+  //         newWidth = Stage.drawingMachine.currentStrokeWidth - 1;
+  //       }
+  //       Stage.drawingMachine.currentStrokeWidth = Math.max(1, Math.min(newWidth, 1000));
+  //     }
+  //   }
+  // };
+
   private onMouseMoveWhenAdjusting = (event: MouseEvent) => {
     // 更改宽度，检测鼠标上下移动的距离（模仿PS的笔刷粗细调整）
-    const worldLocation = Renderer.transformView2World(new Vector(event.clientX, event.clientY));
-    const delta = this.startAdjustWidthLocation.distance(worldLocation);
-    // Stage.effectMachine.addEffect(LineEffect.default(this.startAdjustWidthLocation, worldLocation.clone()));
-    if (delta > 1) {
-      Stage.drawingMachine.currentStrokeWidth = Math.min(Math.round(delta * 2), 1000);
+    const currentWorldLocation = Renderer.transformView2World(new Vector(event.clientX, event.clientY));
+
+    // const delta = this.startAdjustWidthLocation.distance(currentWorldLocation);
+    let change = 1;
+    if (currentWorldLocation.y > this.lastAdjustWidthLocation.y) {
+      change *= -1;
     }
+    // let delta = this.lastAdjustWidthLocation.distance(currentWorldLocation);
+    // // 如果鼠标在往下走，就减小
+    // if (currentWorldLocation.y > this.lastAdjustWidthLocation.y) {
+    //   delta = -delta;
+    // }
+    const lastWidth = Stage.drawingMachine.currentStrokeWidth;
+    // Stage.effectMachine.addEffect(LineEffect.default(this.startAdjustWidthLocation, worldLocation.clone()));
+    const newWidth = Math.round(lastWidth + change);
+
+    // 限制宽度范围
+    Stage.drawingMachine.currentStrokeWidth = Math.max(1, Math.min(newWidth, 1000));
+
+    // 记录上一次位置
+    this.lastAdjustWidthLocation = currentWorldLocation.clone();
   };
 }
 

app/src/locales/zh_CN.yml

@@ -809,4 +809,9 @@ keyBinds:
   checkoutLeftMouseToConnectAndCutting:
     title: 设置左键为“连线/斩断”模式
     description: |
-      也就是鼠标左键切换为连线/斩断 模式，在工具栏中有对应按钮
+      也就是鼠标左键切换为连线/斩断 模式，在工具栏中有对应按钮
+  penStrokeWidthIncrease:
+    title: 涂鸦笔画变粗
+    description: 按下后，笔画变粗
+  penStrokeWidthDecrease:
+    description: 按下后，笔画变细

app/src/main.tsx

@@ -33,7 +33,7 @@ import { LastLaunch } from "./core/service/LastLaunch";
 import { Settings } from "./core/service/Settings";
 import { Tourials } from "./core/service/Tourials";
 import { Camera } from "./core/stage/Camera";
-import { Stage } from "./core/stage/Stage";
+import { LeftMouseModeEnum, Stage } from "./core/stage/Stage";
 import { StageLoader } from "./core/stage/StageLoader";
 import { StageEntityMoveManager } from "./core/stage/stageManager/concreteMethods/StageEntityMoveManager";
 import { StageSectionPackManager } from "./core/stage/stageManager/concreteMethods/StageSectionPackManager";
@@ -660,6 +660,36 @@ async function registerKeyBinds() {
       Settings.set("windowBackgroundAlpha", Math.max(0, currentValue - 0.2));
     }
   });
+
+  (
+    await KeyBinds.create("penStrokeWidthIncrease", "=", {
+      control: false,
+      meta: false,
+      alt: false,
+      shift: false,
+    })
+  ).down(async () => {
+    if (Stage.leftMouseMode === LeftMouseModeEnum.draw) {
+      const newWidth = Stage.drawingMachine.currentStrokeWidth + 4;
+      Stage.drawingMachine.currentStrokeWidth = Math.max(1, Math.min(newWidth, 1000));
+      Stage.effectMachine.addEffect(TextRiseEffect.default(`${Stage.drawingMachine.currentStrokeWidth}px`));
+    }
+  });
+  (
+    await KeyBinds.create("penStrokeWidthDecrease", "-", {
+      control: false,
+      meta: false,
+      alt: false,
+      shift: false,
+    })
+  ).down(async () => {
+    if (Stage.leftMouseMode === LeftMouseModeEnum.draw) {
+      const newWidth = Stage.drawingMachine.currentStrokeWidth - 4;
+      Stage.drawingMachine.currentStrokeWidth = Math.max(1, Math.min(newWidth, 1000));
+      Stage.effectMachine.addEffect(TextRiseEffect.default(`${Stage.drawingMachine.currentStrokeWidth}px`));
+    }
+  });
+
   (
     await KeyBinds.create("copy", "c", {
       control: isMac ? false : true,