💄 优化alt+左键跳入时鼠标提示线的样子

Author: Littlefean

app/src/core/render/canvas2d/basicRenderer/curveRenderer.tsx

@@ -158,4 +158,32 @@ export namespace CurveRenderer {
     Canvas.ctx.strokeStyle = gradient;
     Canvas.ctx.stroke();
   }
+  /**
+   * 绘制一条颜色渐变的贝塞尔曲线
+   * @param curve
+   */
+  export function renderGradientBezierCurve(
+    curve: CubicBezierCurve,
+    startColor: Color,
+    endColor: Color,
+    width: number,
+  ): void {
+    const gradient = Canvas.ctx.createLinearGradient(curve.start.x, curve.start.y, curve.end.x, curve.end.y);
+    // 添加颜色
+    gradient.addColorStop(0, startColor.toString()); // 起始颜色
+    gradient.addColorStop(1, endColor.toString()); // 结束颜色
+    Canvas.ctx.beginPath();
+    Canvas.ctx.moveTo(curve.start.x, curve.start.y);
+    Canvas.ctx.bezierCurveTo(
+      curve.ctrlPt1.x,
+      curve.ctrlPt1.y,
+      curve.ctrlPt2.x,
+      curve.ctrlPt2.y,
+      curve.end.x,
+      curve.end.y,
+    );
+    Canvas.ctx.lineWidth = width;
+    Canvas.ctx.strokeStyle = gradient;
+    Canvas.ctx.stroke();
+  }
 }

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

@@ -2,6 +2,7 @@ import { getTextSize } from "../../../utils/font";
 import { appScale } from "../../../utils/platform";
 import { Color, mixColors } from "../../dataStruct/Color";
 import { Vector } from "../../dataStruct/Vector";
+import { CubicBezierCurve } from "../../dataStruct/shape/Curve";
 import { Rectangle } from "../../dataStruct/shape/Rectangle";
 import { Settings } from "../../service/Settings";
 import { MouseLocation } from "../../service/controlService/MouseLocation";
@@ -348,19 +349,55 @@ export namespace Renderer {
     for (const selectedEntity of selectedEntities) {
       const startLocation = selectedEntity.collisionBox.getRectangle().center;
       const endLocation = Controller.mouseLocation;
+      const distance = startLocation.distance(endLocation);
+      const height = distance / 2;
+      // 影子
       CurveRenderer.renderGradientLine(
         transformWorld2View(startLocation),
         transformWorld2View(endLocation),
         Color.Transparent,
-        Color.Green,
-        4 * Camera.currentScale,
+        new Color(0, 0, 0, 0.2),
+        8 * Camera.currentScale,
+      );
+      CurveRenderer.renderGradientBezierCurve(
+        new CubicBezierCurve(
+          transformWorld2View(startLocation),
+          transformWorld2View(startLocation.add(new Vector(0, -height))),
+          transformWorld2View(endLocation.add(new Vector(0, -height))),
+          transformWorld2View(endLocation),
+        ),
+        StageStyleManager.currentStyle.CollideBoxPreSelectedColor.toTransparent(),
+        StageStyleManager.currentStyle.CollideBoxPreSelectedColor.toSolid(),
+        8 * Camera.currentScale,
+      );
+      // 画箭头
+      const arrowLen = 10 + distance * 0.01;
+      CurveRenderer.renderBezierCurve(
+        new CubicBezierCurve(
+          transformWorld2View(endLocation),
+          transformWorld2View(endLocation),
+          transformWorld2View(endLocation),
+          transformWorld2View(endLocation.add(new Vector(-arrowLen, -arrowLen * 2))),
+        ),
+        StageStyleManager.currentStyle.CollideBoxPreSelectedColor.toSolid(),
+        8 * Camera.currentScale,
+      );
+      CurveRenderer.renderBezierCurve(
+        new CubicBezierCurve(
+          transformWorld2View(endLocation),
+          transformWorld2View(endLocation),
+          transformWorld2View(endLocation),
+          transformWorld2View(endLocation.add(new Vector(arrowLen, -arrowLen * 2))),
+        ),
+        StageStyleManager.currentStyle.CollideBoxPreSelectedColor.toSolid(),
+        8 * Camera.currentScale,
       );
     }
     TextRenderer.renderTextFromCenter(
       "Jump To",
-      transformWorld2View(Controller.mouseLocation).subtract(new Vector(0, 30)),
+      transformWorld2View(Controller.mouseLocation).subtract(new Vector(0, -30)),
       16,
-      Color.Green,
+      StageStyleManager.currentStyle.CollideBoxPreSelectedColor.toSolid(),
     );
   }