共享 CanvasWorld 统一超采样

默认以 2 倍内容分辨率渲染并保持 viewport.scale 的最终视觉比例

用反向 stroke-width 抵消资源卡 SVG 图标的超采样线宽

补充共享 CanvasWorld 超采样契约测试

apps/ai-game-creator-shell/src/styles.css

@@ -5904,14 +5904,17 @@ iframe.preview-frame {
   transform-origin: top right;
 }
 
-.game-resource-card-media-control,
+.game-resource-card-media-control {
-.game-resource-card-placeholder > svg,
-.game-resource-card-version-visual > svg,
-.game-resource-card-audio-visual > svg {
   transform: scale(var(--genarrative-image-canvas-inverse-scale, 1));
   transform-origin: center;
 }
 
+.game-resource-card-placeholder > svg *,
+.game-resource-card-version-visual > svg *,
+.game-resource-card-audio-visual > svg * {
+  stroke-width: calc(2px * var(--genarrative-image-canvas-inverse-scale, 1));
+}
+
 .game-resource-card-open {
   position: absolute;
   z-index: 1;

packages/image-canvas-react/src/CanvasWorld.tsx

@@ -4,6 +4,8 @@ import {
 } from '@genarrative/image-canvas-core';
 import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 
+const CANVAS_RENDER_SUPERSAMPLE = 2;
+
 export function CanvasWorld({
   children,
   className = '',
@@ -28,12 +30,22 @@ export function CanvasWorld({
           ...style,
           width: worldSize,
           height: worldSize,
-          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewportScale})`,
+          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewportScale / CANVAS_RENDER_SUPERSAMPLE})`,
           '--genarrative-image-canvas-inverse-scale': String(1 / viewportScale),
         } as CSSProperties
       }
     >
-      {children}
+      <div
+        className="genarrative-image-canvas__world-content"
+        style={{
+          position: 'relative',
+          width: worldSize,
+          height: worldSize,
+          zoom: CANVAS_RENDER_SUPERSAMPLE,
+        }}
+      >
+        {children}
+      </div>
     </div>
   );
 }

packages/image-canvas-react/src/sharedCanvasReact.test.tsx

@@ -1,10 +1,11 @@
 /* @vitest-environment jsdom */
 
 import type { CanvasLayer } from '@genarrative/image-canvas-core';
-import { act, renderHook } from '@testing-library/react';
+import { act, render, renderHook, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { CanvasWorld } from './CanvasWorld';
 import { useImageCanvasViewportControls } from './useImageCanvasViewportControls';
 
 function layer(id: string, x: number): CanvasLayer {
@@ -52,6 +53,24 @@ afterEach(() => {
 });
 
 describe('shared canvas React lifecycle', () => {
+  it('renders a supersampled world while preserving the public viewport scale', () => {
+    render(
+      <CanvasWorld viewport={{ x: 12, y: 24, scale: 2 }}>
+        <span>content</span>
+      </CanvasWorld>,
+    );
+
+    const world = screen.getByText('content').parentElement?.parentElement;
+    const content = screen.getByText('content').parentElement;
+    expect(world?.style.width).toBe('12000px');
+    expect(world?.style.height).toBe('12000px');
+    expect(world?.style.transform).toBe('translate(12px, 24px) scale(1)');
+    expect(
+      world?.style.getPropertyValue('--genarrative-image-canvas-inverse-scale'),
+    ).toBe('0.5');
+    expect(content?.style.zoom).toBe('2');
+  });
+
   it('removes every native listener across repeated mounts', () => {
     const viewport = createViewport();
     const addListener = vi.spyOn(viewport, 'addEventListener');