tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): 画布背景 - 降低点阵密度与亮度并优化缩放显示

Browse Source
This commit is contained in:
ddCat
2026-08-22 18:11:03 +08:00
parent 6b3e22f4e9
commit 5d9986f6c7
3 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/canvas/infinite-canvas.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
import { applyCanvasLiveViewport, canvasDotPx, subscribeCanvasViewportPreview } from "@/lib/canvas/canvas-live-viewport";
import { applyCanvasLiveViewport, canvasDotGridPx, canvasDotPx, subscribeCanvasViewportPreview } from "@/lib/canvas/canvas-live-viewport";
import { useThemeStore } from "@/stores/use-theme-store";
import type { ViewportTransform } from "@/types/canvas";
@@ -382,6 +382,9 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
"--canvas-grid-size": `${48 * viewport.k}px`,
"--canvas-grid-x": `${viewport.x % (48 * viewport.k)}px`,
"--canvas-grid-y": `${viewport.y % (48 * viewport.k)}px`,
"--canvas-dot-grid-size": `${canvasDotGridPx(viewport.k)}px`,
"--canvas-dot-grid-x": `${viewport.x % canvasDotGridPx(viewport.k)}px`,
"--canvas-dot-grid-y": `${viewport.y % canvasDotGridPx(viewport.k)}px`,
"--canvas-dot-size": canvasDotPx(viewport.k),
} as React.CSSProperties}
onPointerDown={handlePointerDown}
@@ -422,11 +425,11 @@ function CanvasGrid({ mode }: { mode: CanvasBackgroundMode }) {
data-canvas-grid-layer
className="pointer-events-none absolute"
style={{
inset: "calc(-1 * var(--canvas-grid-size))",
inset: mode === "dots" ? "calc(-1 * var(--canvas-dot-grid-size))" : "calc(-1 * var(--canvas-grid-size))",
backgroundImage,
backgroundSize: "var(--canvas-grid-size) var(--canvas-grid-size)",
transform: "translate3d(var(--canvas-grid-x), var(--canvas-grid-y), 0)",
opacity: 0.46,
backgroundSize: mode === "dots" ? "var(--canvas-dot-grid-size) var(--canvas-dot-grid-size)" : "var(--canvas-grid-size) var(--canvas-grid-size)",
transform: mode === "dots" ? "translate3d(var(--canvas-dot-grid-x), var(--canvas-dot-grid-y), 0)" : "translate3d(var(--canvas-grid-x), var(--canvas-grid-y), 0)",
opacity: mode === "dots" ? 0.34 : 0.46,
willChange: "transform",
}}
/>