fix(canvas): 图片节点 - 尺寸跟随图片真实比例,竖图不再两侧留黑

上传接口返回的 width/height 是可选字段(services/api/resources.ts),拿不到时节点落到
默认的横向比例,竖图被放进一个宽盒子、两侧留大片空白。改为在图片解码后于客户端量真实
尺寸并按比例校正节点 —— 这样不依赖服务端是否返回尺寸。

判据是「用户有没有手动定过尺寸」,**不是**「有没有量过尺寸」。第一版按后者写,结果所有
已经存过 naturalWidth 的既有节点永远得不到修正,改完等于没改。现在由 handleNodeResize
在手动拉伸时打 metadata.manualSize 标记,自动适配只避让它和 freeResize(自由比例是用户
显式要求脱离原始比例,自动校正会跟他打架)。

顺带收益:naturalWidth / naturalHeight 补齐后,canvas-node.tsx 的锁比例拉伸也会按真实
比例走 —— 它本来就在读这两个字段,之前多数节点拿不到。

已知影响:既有节点因为没有 manualSize 标记,首次重新加载时会自动校正一次尺寸。
对被 letterbox 的图是修复,但确实会让画布上现有图片节点的尺寸变动一次。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
dlh
2026-08-22 11:11:03 +08:00
parent e07574ee14
commit e46f2ec027
5 changed files with 37 additions and 4 deletions

View File

@@ -11,6 +11,8 @@ export type CanvasNodeActionContextValue = {
deleteNode?: (node: CanvasNodeData) => void;
/** 合并式更新节点 metadata;扩展节点(如调色)在自己的面板里改参数时用。 */
updateMetadata?: (nodeId: string, patch: CanvasNodeMetadata) => void;
/** 改节点宽高;图片首次量到真实尺寸后按比例校正节点用。 */
resizeNode?: (nodeId: string, size: { width: number; height: number }) => void;
};
export const CanvasNodeActionContext = createContext<CanvasNodeActionContextValue>({});