feat(canvas): enhance image editing interactions and fix flickering in high-resolution previews

2026-07-30 04:44:28 +08:00 · 2026-07-27 16:30:43 +08:00
parent f8191d13b2
commit 6c61081698
6 changed files with 71 additions and 46 deletions
@@ -2,6 +2,8 @@

 ## Unreleased

+ [优化] 图片遮罩、切图与裁剪编辑支持常用快捷操作并修复高分辨率图片预览闪烁。
+
 ## v0.10.0 - 2026-07-25

 + [新增] 提示词来源新增BananaPromptQuicker，并支持添加自定义标准 JSON 来源。
@@ -5,6 +5,7 @@ description: 当前版本已实现但仍需人工验证的变更项

 # 待测试

+- 图片编辑弹窗：遮罩、切图和裁剪连续滚轮缩放时，图片与遮罩应保持同步且不再闪烁、短暂消失或跳动；遮罩画笔圆心应始终固定在鼠标位置，仅直径随缩放变化，缩放后仍可准确涂抹、拖动切分线和调整裁剪框。
 - 提示词中心布局：页面标题及提示词总数应居中；连续输入搜索文字时应在停止输入约 300ms 后再查询；桌面端分类与标签应在左侧独立滚动，右侧搜索框下直接展示提示词卡片；标签数量较多时不能继续向下挤压提示词，窄屏下应恢复上下排列且内容不溢出；不再显示「我的提示词」Tab，收藏提示词应直接加入我的资产。
 - 提示词来源：6 个内置来源应从 Image Prompts 统一仓库读取，更新后数量依次为 323、494、53、76、126、129；提示词仍按 6 个来源分组并可独立启用，来源内可继续按 `tags` 筛选。添加标准 JSON URL 后应能查看内容，填写非数组 JSON 或不可访问地址时应显示失败，并继续保留该来源上一次成功缓存的内容。
 - 提示词来源界面：来源应以卡片列表展示，启用开关位于左侧，数量、同步状态和上次成功时间作为次级信息显示，查看、拉取及自定义来源编辑/删除操作使用带文字按钮；底部定时拉取区域应保持独立边框布局。
@@ -86,7 +86,9 @@ export function CanvasNodeCropDialog({ dataUrl, open, onClose, onConfirm }: { da
                >
                    <div className="relative" style={viewport.contentStyle}>
                        <div ref={boxRef} className="absolute isolate overflow-hidden rounded-lg bg-black select-none [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
-                            <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full object-contain opacity-90" draggable={false} />
+                            <div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
+                                <img src={dataUrl} alt="" className="block h-full w-full object-contain opacity-90" draggable={false} />
+                            </div>
                            <CropMask crop={crop} />
                            <div className="absolute cursor-move border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.3),0_0_28px_rgba(0,0,0,.28)]" style={cropStyle(crop)} onPointerDown={(event) => startDrag("move", event)}>
                                <div className="pointer-events-none absolute inset-x-0 top-1/3 border-t border-white/50" />
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { createPortal } from "react-dom";
 import { Button, Input, Modal, Slider, Tooltip } from "antd";
 import { Brush, Eraser, Redo2, RotateCcw, Undo2, WandSparkles, X, ZoomIn, ZoomOut } from "lucide-react";

@@ -75,11 +76,10 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
    };

    const updateBrushPreview = (event: ReactPointerEvent<HTMLCanvasElement>, size = brushSize, adjusting = false) => {
-        const rect = event.currentTarget.getBoundingClientRect();
        setBrushPreview({
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-            size: Math.max(4, (size / event.currentTarget.width) * rect.width),
+            x: event.clientX,
+            y: event.clientY,
+            size,
            adjusting,
        });
    };
@@ -89,14 +89,13 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
            event.preventDefault();
            event.stopPropagation();
            event.currentTarget.setPointerCapture(event.pointerId);
-            const rect = event.currentTarget.getBoundingClientRect();
            brushAdjustRef.current = {
                active: true,
                pointerId: event.pointerId,
                startX: event.clientX,
                startSize: brushSize,
-                previewX: event.clientX - rect.left,
-                previewY: event.clientY - rect.top,
+                previewX: event.clientX,
+                previewY: event.clientY,
            };
            updateBrushPreview(event, brushSize, true);
            return;
@@ -120,7 +119,7 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
            setBrushPreview({
                x: brushAdjust.previewX,
                y: brushAdjust.previewY,
-                size: Math.max(4, (nextSize / event.currentTarget.width) * event.currentTarget.getBoundingClientRect().width),
+                size: nextSize,
                adjusting: true,
            });
            return;
@@ -218,38 +217,43 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
                >
                    <div className="relative" style={viewport.contentStyle}>
                        <div ref={viewport.stageRef} className="absolute isolate overflow-hidden rounded-lg bg-transparent select-none [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
-                            <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full bg-transparent object-contain [backface-visibility:hidden]" draggable={false} />
                            {image ? (
                                <>
                                    <canvas ref={maskCanvasRef} width={image.width} height={image.height} className="hidden" />
-                                    <canvas
-                                        ref={previewCanvasRef}
-                                        width={image.width}
-                                        height={image.height}
-                                        className="absolute inset-0 h-full w-full cursor-none touch-none [backface-visibility:hidden]"
-                                        onPointerDown={startDraw}
-                                        onPointerMove={moveDraw}
-                                        onPointerUp={stopDraw}
-                                        onPointerCancel={stopDraw}
-                                        onPointerEnter={(event) => updateBrushPreview(event)}
-                                        onPointerLeave={() => {
-                                            if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null);
-                                        }}
-                                        onContextMenu={(event) => event.preventDefault()}
-                                    />
-                                    {brushPreview ? (
-                                        <div
-                                            className={`pointer-events-none absolute z-10 rounded-full border-2 ${brushPreview.adjusting ? "border-[#fbbf24] bg-black/10" : "border-white/90 bg-black/5"} shadow-[0_0_0_1px_rgba(0,0,0,.8)]`}
-                                            style={{ left: brushPreview.x, top: brushPreview.y, width: brushPreview.size, height: brushPreview.size, transform: "translate(-50%, -50%)" }}
-                                        >
-                                            {brushPreview.adjusting ? <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-semibold text-white">{brushSize}px</span> : null}
-                                        </div>
-                                    ) : null}
+                                    <div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
+                                        <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full bg-transparent object-contain" draggable={false} />
+                                        <canvas
+                                            ref={previewCanvasRef}
+                                            width={image.width}
+                                            height={image.height}
+                                            className="absolute inset-0 h-full w-full cursor-none touch-none"
+                                            onPointerDown={startDraw}
+                                            onPointerMove={moveDraw}
+                                            onPointerUp={stopDraw}
+                                            onPointerCancel={stopDraw}
+                                            onPointerEnter={(event) => updateBrushPreview(event)}
+                                            onPointerLeave={() => {
+                                                if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null);
+                                            }}
+                                            onContextMenu={(event) => event.preventDefault()}
+                                        />
+                                    </div>
                                </>
                            ) : null}
                        </div>
                    </div>
                </div>
+                {brushPreview
+                    ? createPortal(
+                          <div
+                              className={`pointer-events-none fixed z-[1100] rounded-full border-2 ${brushPreview.adjusting ? "border-[#fbbf24] bg-black/10" : "border-white/90 bg-black/5"} shadow-[0_0_0_1px_rgba(0,0,0,.8)]`}
+                              style={{ left: brushPreview.x, top: brushPreview.y, width: Math.max(4, brushPreview.size * viewport.imageScale), aspectRatio: 1, transform: "translate(-50%, -50%)" }}
+                          >
+                              {brushPreview.adjusting ? <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-semibold text-white">{brushSize}px</span> : null}
+                          </div>,
+                          document.body,
+                      )
+                    : null}

                <div className="flex min-h-[360px] flex-col gap-5">
                    <div>
@@ -162,7 +162,9 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
                        >
                            <div className="relative" style={viewport.contentStyle}>
                                <div ref={previewRef} className="absolute isolate overflow-hidden rounded-lg bg-black [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
-                                    <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full object-contain [backface-visibility:hidden]" draggable={false} />
+                                    <div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
+                                        <img src={dataUrl} alt="" className="block h-full w-full object-contain" draggable={false} />
+                                    </div>
                                    <SplitGrid horizontalLines={horizontalLines} verticalLines={verticalLines} active={active} onPointerDown={startDrag} />
                                </div>
                            </div>
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from "react";

 type ImageSize = { width: number; height: number };

@@ -11,6 +11,7 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
    const viewportNodeRef = useRef<HTMLDivElement>(null);
    const stageRef = useRef<HTMLDivElement>(null);
    const panRef = useRef<{ pointerId: number; x: number; y: number; scrollLeft: number; scrollTop: number } | null>(null);
+    const zoomAnchorRef = useRef<{ zoom: number; ratioX: number; ratioY: number; viewportX: number; viewportY: number } | null>(null);
    const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);
    const [viewportSize, setViewportSize] = useState<ImageSize>({ width: 0, height: 0 });
    const [zoom, setZoom] = useState(minZoom);
@@ -23,7 +24,9 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
    }, []);

    useEffect(() => {
-        if (open) setZoom(minZoom);
+        if (!open) return;
+        zoomAnchorRef.current = null;
+        setZoom(minZoom);
    }, [open, image?.width, image?.height]);

    useEffect(() => {
@@ -85,6 +88,19 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
        top: Math.max(0, Math.round((contentSize.height - stageSize.height) / 2)),
    };

+    useLayoutEffect(() => {
+        const viewport = viewportNodeRef.current;
+        const anchor = zoomAnchorRef.current;
+        if (!viewport || !anchor || Math.abs(anchor.zoom - zoom) > 0.001) return;
+        const nextWidth = baseSize.width * zoom;
+        const nextHeight = baseSize.height * zoom;
+        const nextLeft = Math.max(0, (Math.max(viewport.clientWidth, nextWidth) - nextWidth) / 2);
+        const nextTop = Math.max(0, (Math.max(viewport.clientHeight, nextHeight) - nextHeight) / 2);
+        viewport.scrollLeft = nextLeft + anchor.ratioX * nextWidth - anchor.viewportX;
+        viewport.scrollTop = nextTop + anchor.ratioY * nextHeight - anchor.viewportY;
+        zoomAnchorRef.current = null;
+    }, [baseSize.height, baseSize.width, zoom]);
+
    const setZoomAround = useCallback(
        (nextZoom: number, clientX?: number, clientY?: number) => {
            const viewport = viewportNodeRef.current;
@@ -103,17 +119,8 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
            const viewportX = pointerX - viewportRect.left;
            const viewportY = pointerY - viewportRect.top;

+            zoomAnchorRef.current = { zoom: boundedZoom, ratioX, ratioY, viewportX, viewportY };
            setZoom(boundedZoom);
-            requestAnimationFrame(() => {
-                const nextWidth = baseSize.width * boundedZoom;
-                const nextHeight = baseSize.height * boundedZoom;
-                const nextContentWidth = Math.max(viewport.clientWidth, nextWidth);
-                const nextContentHeight = Math.max(viewport.clientHeight, nextHeight);
-                const nextLeft = Math.max(0, (nextContentWidth - nextWidth) / 2);
-                const nextTop = Math.max(0, (nextContentHeight - nextHeight) / 2);
-                viewport.scrollLeft = nextLeft + ratioX * nextWidth - viewportX;
-                viewport.scrollTop = nextTop + ratioY * nextHeight - viewportY;
-            });
        },
        [baseSize.height, baseSize.width, zoom],
    );
@@ -177,6 +184,7 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
        },
        canZoomIn: zoom < maxZoom,
        canZoomOut: zoom > minZoom,
+        imageScale: image ? stageSize.width / image.width : 0,
        zoomIn: () => setZoomAround(zoom * zoomStep),
        zoomOut: () => setZoomAround(zoom / zoomStep),
        resetZoom: () => setZoomAround(minZoom),
@@ -187,6 +195,12 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
            width: stageSize.width,
            height: stageSize.height,
        } satisfies CSSProperties,
+        mediaStyle: {
+            width: baseSize.width,
+            height: baseSize.height,
+            transform: `translateZ(0) scale(${zoom})`,
+            transformOrigin: "top left",
+        } satisfies CSSProperties,
    };
 }