动态可调整窗格中的图像缩放与平移/缩放适配问题

解决方案 #

1. 存储原始图像尺寸，手动计算填充比例 #

scaledToFill()的隐式布局会和手动scaleEffect冲突，因此需要存储原始图像尺寸，手动计算基础填充缩放比例，替代隐式的scaledToFill()。

修改PaneModel，新增存储原始图像尺寸的属性：

struct PaneModel: Identifiable {
    let id = UUID()
    var background: PaneBackground = .color(Color(white: 0.2))
    var imageOffset: CGSize = .zero
    var imageScale: CGFloat = 1.0
    var originalImageSize: CGSize? // 存储原始图像的宽高
}

2. 重构图像布局逻辑，统一缩放计算 #

在PaneView的backgroundView中，手动计算基础填充比例，结合用户的缩放值和手势状态，实现精确的尺寸控制：

@ViewBuilder
private func backgroundView(geometry: GeometryProxy) -> some View {
    switch pane.background {
    case .image(let uiImage):
        let imageSize = CGSize(width: uiImage.size.width, height: uiImage.size.height)
        // 初始化原始图像尺寸和历史窗格尺寸
        if pane.originalImageSize == nil {
            pane.originalImageSize = imageSize
            previousPaneSize = geometry.size
        }
        
        // 计算基础填充比例：和scaledToFill()逻辑一致，取宽高比例的最大值
        let baseScale = max(geometry.size.width / imageSize.width, geometry.size.height / imageSize.height)
        // 总缩放比例 = 基础填充比例 × 用户设置的缩放 × 手势临时缩放
        let totalScale = baseScale * pane.imageScale * gestureScale
        
        Image(uiImage: uiImage)
            .resizable()
            .frame(width: imageSize.width, height: imageSize.height)
            .scaleEffect(totalScale)
            .offset(
                x: pane.imageOffset.width + gestureOffset.width,
                y: pane.imageOffset.height + gestureOffset.height
            )
            .gesture(combinedGesture())
    case .color(let color):
        color
    default:
        Color(white: 0.2)
    }
}

3. 窗格尺寸变化时，按比例更新缩放和偏移 #

在onChange(of: geometry.size)中，计算窗格尺寸的变化比例，同步调整用户的缩放值和偏移量，确保视觉上的状态一致：

@State private var previousPaneSize: CGSize = .zero

// ... 其他代码

.onChange(of: geometry.size) { newSize in
    guard let originalImageSize = pane.originalImageSize, previousPaneSize != .zero else {
        previousPaneSize = newSize
        return
    }
    
    // 计算窗格宽高的变化比例
    let widthScale = newSize.width / previousPaneSize.width
    let heightScale = newSize.height / previousPaneSize.height
    
    // 重新计算基础填充比例，调整用户缩放值
    let oldBaseScale = max(previousPaneSize.width / originalImageSize.width, previousPaneSize.height / originalImageSize.height)
    let newBaseScale = max(newSize.width / originalImageSize.width, newSize.height / originalImageSize.height)
    pane.imageScale = (pane.imageScale * oldBaseScale) / newBaseScale
    
    // 按比例调整偏移量，保证图像相对位置不变
    pane.imageOffset = CGSize(
        width: pane.imageOffset.width * widthScale,
        height: pane.imageOffset.height * heightScale
    )
    
    previousPaneSize = newSize
}

4. 修正手势处理逻辑 #

确保手势的平移和缩放基于当前窗格的坐标系统，更新后的手势组合：

private func combinedGesture() -> some Gesture {
    SimultaneousGesture(
        DragGesture()
            .updating($gestureOffset) { value, state, _ in
                state = value.translation
            }
            .onEnded { value in
                pane.imageOffset.width += value.translation.width
                pane.imageOffset.height += value.translation.height
            },
        MagnificationGesture()
            .updating($gestureScale) { value, state, _ in
                state = value
            }
            .onEnded { value in
                pane.imageScale *= value
            }
    )
}

关键说明 #

• 手动计算基础填充比例，避免scaledToFill()和scaleEffect的布局冲突
• 窗格尺寸变化时，通过比例换算同步更新缩放和偏移，保证图像的视觉状态一致
• 存储原始图像尺寸，确保所有比例计算的基准统一

内容的提问来源于stack exchange，提问作者Murat Çiçek