From b4595d312533748d24b88f0be779c89139de8815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Wed, 9 Sep 2026 11:23:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=94=BB=E5=B8=83=E8=A7=86?=
 =?UTF-8?q?=E5=8F=A3=E7=BC=A9=E6=94=BE=E5=85=9C=E5=BA=95=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

提取 getSafeViewportScale 供 world transform 与逆缩放变量复用

导出共享缩放辅助函数并保持现有渲染行为
---
 packages/image-canvas-react/src/CanvasWorld.tsx        |  4 ++--
 .../image-canvas-react/src/canvasWorldRendering.ts     | 10 ++++++++--
 packages/image-canvas-react/src/index.ts               |  5 ++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/image-canvas-react/src/CanvasWorld.tsx b/packages/image-canvas-react/src/CanvasWorld.tsx
index 7698a9d23..bc089d1ce 100644
--- a/packages/image-canvas-react/src/CanvasWorld.tsx
+++ b/packages/image-canvas-react/src/CanvasWorld.tsx
@@ -7,6 +7,7 @@ import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import {
   CANVAS_RENDER_SUPERSAMPLE,
   canvasViewportToWorldTransform,
+  getSafeViewportScale,
 } from './canvasWorldRendering';
 
 export function CanvasWorld({
@@ -21,8 +22,7 @@ export function CanvasWorld({
   viewport: CanvasViewport;
   worldSize?: number;
 }) {
-  const viewportScale =
-    Number.isFinite(viewport.scale) && viewport.scale > 0 ? viewport.scale : 1;
+  const viewportScale = getSafeViewportScale(viewport);
 
   return (
     <div
diff --git a/packages/image-canvas-react/src/canvasWorldRendering.ts b/packages/image-canvas-react/src/canvasWorldRendering.ts
index 83b1a120a..c298c716c 100644
--- a/packages/image-canvas-react/src/canvasWorldRendering.ts
+++ b/packages/image-canvas-react/src/canvasWorldRendering.ts
@@ -2,9 +2,15 @@ import type { CanvasViewport } from '@genarrative/image-canvas-core';
 
 export const CANVAS_RENDER_SUPERSAMPLE = 2;
 
+/** 将 viewport scale 规范化为可用于渲染和反向缩放的正有限值。 */
+export function getSafeViewportScale(viewport: CanvasViewport) {
+  return Number.isFinite(viewport.scale) && viewport.scale > 0
+    ? viewport.scale
+    : 1;
+}
+
 /** 将逻辑 viewport 转换为 world 的渲染 transform。 */
 export function canvasViewportToWorldTransform(viewport: CanvasViewport) {
-  const scale =
-    Number.isFinite(viewport.scale) && viewport.scale > 0 ? viewport.scale : 1;
+  const scale = getSafeViewportScale(viewport);
   return `translate(${viewport.x}px, ${viewport.y}px) scale(${scale / CANVAS_RENDER_SUPERSAMPLE})`;
 }
diff --git a/packages/image-canvas-react/src/index.ts b/packages/image-canvas-react/src/index.ts
index ea4d68259..a1ea0ab9d 100644
--- a/packages/image-canvas-react/src/index.ts
+++ b/packages/image-canvas-react/src/index.ts
@@ -2,7 +2,10 @@ export * from './CanvasChrome';
 export * from './CanvasPortal';
 export * from './CanvasViewport';
 export * from './CanvasWorld';
-export { canvasViewportToWorldTransform } from './canvasWorldRendering';
+export {
+  canvasViewportToWorldTransform,
+  getSafeViewportScale,
+} from './canvasWorldRendering';
 export * from './LayerRenderer';
 export * from './Minimap';
 export * from './SelectionOverlay';