加一层阴影提升质感

src/area-picker.tsx

@@ -39,7 +39,7 @@ export function AreaPicker() {
     return null;
   }
 
-  const iconClassName = "w-8 h-8 md:w-10 md:h-10 text-white";
+  const iconClassName = "w-8 h-8 text-white";
   return (
     <>
       <div

src/genshin-map/index.tsx

@@ -6,6 +6,7 @@ import { ActiveMarkerLayer } from "./active-marker-layer";
 import { AreaItemLayer } from "./area-item-layer";
 import { AreaNamesLayer } from "./area-names-layer";
 import { Settings } from "./settings";
+import { ShadowLayer } from "./shadow-layer";
 import { onTilemapClick, onTilemapMove, onTilemapReady } from "./state";
 import { TeleportLayer } from "./teleport-layer";
 import { UndergroundLayer } from "./underground-layer";
@@ -46,6 +47,7 @@ export function GenshinMap() {
       <UndergroundLayer />
       <TeleportLayer />
       <AreaNamesLayer />
+      <ShadowLayer />
     </CanvaskitMap>
   );
 }

src/genshin-map/shadow-layer.tsx

@@ -0,0 +1,37 @@
+import { Layer } from "@canvaskit-map/core";
+import { CustomLayer } from "@canvaskit-map/react";
+import { Canvas, Paint } from "canvaskit-wasm";
+import { zIndex } from ".";
+
+class _ShadowLayer extends Layer {
+  _paint?: Paint;
+
+  constructor() {
+    super({ zIndex: zIndex.underground });
+  }
+
+  async init() {
+    this._paint = new this.canvaskit!.Paint();
+    this._paint!.setShader(
+      this.canvaskit!.Shader.MakeRadialGradient(
+        [this.map!.size[0] / 2, this.map!.size[1] / 2],
+        Math.max(...this.map!.size),
+        [this.canvaskit!.TRANSPARENT, this.canvaskit!.BLACK],
+        [0.1, 1],
+        this.canvaskit!.TileMode.Clamp
+      )
+    );
+  }
+
+  draw(canvas: Canvas) {
+    canvas.save();
+    canvas.concat(this.canvaskit!.Matrix.invert(canvas.getTotalMatrix())!);
+    canvas.scale(devicePixelRatio, devicePixelRatio);
+    canvas.drawPaint(this._paint!);
+    canvas.restore();
+  }
+}
+
+export function ShadowLayer() {
+  return <CustomLayer createLayer={() => new _ShadowLayer()} />;
+}