SwiftUI旋转容器内图片缩放后Y轴拖拽失效及覆盖问题修复咨询

问题描述 #

• Y轴拖拽在缩放后失效：初始状态下X、Y轴拖拽均正常，缩放后仅能沿X轴拖拽；
• 缩放+拖拽后图片无法完整覆盖边界框：操作后图片边缘有时超出框体，需限制拖拽范围确保覆盖；
• 拖拽时图片超出有效范围。

期望行为 #

• 图片无论缩放与否，始终完整覆盖边界框；
• 缩放后仍能在X、Y轴正常拖拽；
• 拖拽时图片不会超出有效范围，保持对框体的覆盖。

原实现代码 #

import SwiftUI

struct RotatingDraggingRectView: View {
    @State private var rectData: RectData = RectData(
        frameSize: CGSize(width: 100, height: 160),
        framePosition: CGPoint(x: 200, y: 200),
        imageSize: CGSize(width: 200, height: 150),
        imageRotation: .zero,
        imagePosition: CGPoint(x: 200, y: 300)
    )

    @State private var imagePositionAtStartOfDrag: CGPoint?
    @State private var magnificationGestureState: CGFloat = 1

    var body: some View {
        VStack {
            GeometryReader { geometry in
                ZStack {
                    Rectangle()
                        .fill(Color.yellow)
                        .frame(width: rectData.frameSize.width, height: rectData.frameSize.height)
                        .position(rectData.framePosition)

                    Rectangle()
                        .fill(Color.blue.opacity(0.5))
                        .frame(width: rectData.imageSize.width, height: rectData.imageSize.height)
                        .rotationEffect(rectData.imageRotation)
                        .position(rectData.imagePosition)
                }
                .background(Color.red)
                .frame(width: geometry.size.width, height: geometry.size.width)
                .position(CGPoint(x: geometry.size.width / 2, y: geometry.size.height / 2))
            }
            .gesture(dragGesture().simultaneously(with: zoomGesture()))

            Slider(value: $rectData.imageRotation.degrees, in: 0...180, step: 1)
                .padding()
                .onChange(of: rectData.imageRotation) {
                    adjustRectSizeForRotation()
                }
        }
        .onAppear {
            adjustRectSizeForRotation()
        }
    }

    // MARK: - Adjust Rect Size to Fit After Rotation (Preserve Aspect Ratio)
    func adjustRectSizeForRotation() {
        let angleRadians = rectData.imageRotation.radians
        let absCos = abs(cos(angleRadians))
        let absSin = abs(sin(angleRadians))

        let requiredWidth = (rectData.frameSize.width * absCos) + (rectData.frameSize.height * absSin)
        let requiredHeight = (rectData.frameSize.width * absSin) + (rectData.frameSize.height * absCos)

        let aspectRatio = rectData.imageSize.width / rectData.imageSize.height
        let scaleFactorWidth = requiredWidth / rectData.imageSize.width
        let scaleFactorHeight = requiredHeight / rectData.imageSize.height

        let scaleFactor = max(scaleFactorWidth, scaleFactorHeight)

        rectData.imageSize.width *= scaleFactor
        rectData.imageSize.height *= scaleFactor

        rectData.imagePosition = rectData.framePosition
    }

    // MARK: - Drag Gesture (Ensures Image Covers Frame)
    func dragGesture() -> some Gesture {
        DragGesture()
            .onChanged { value in
                let xBegin: CGFloat
                let yBegin: CGFloat
                if let imagePositionAtStartOfDrag {
                    xBegin = imagePositionAtStartOfDrag.x
                    yBegin = imagePositionAtStartOfDrag.y
                } else {
                    imagePositionAtStartOfDrag = rectData.imagePosition
                    xBegin = rectData.imagePosition.x
                    yBegin = rectData.imagePosition.y
                }
                let angleRadians = rectData.imageRotation.radians
                let cosAngle = cos(angleRadians)
                let sinAngle = sin(angleRadians)
                let A = rectData.frameSize.width * abs(cosAngle)
                let B = rectData.frameSize.height * abs(sinAngle)
                let maxDragLen = rectData.imageSize.width - (A + B)
                let dxMax = maxDragLen * cosAngle
                let dyMax = maxDragLen * sinAngle
                let minX = rectData.framePosition.x - abs(dxMax / 2)
                let maxX = rectData.framePosition.x + abs(dxMax / 2)
                let minY = rectData.framePosition.y - abs(dyMax / 2)
                let maxY = rectData.framePosition.y + abs(dyMax / 2)
                let xDrag = min(maxX, max(minX, xBegin + value.translation.width))
                let yDrag = min(maxY, max(minY, yBegin + value.translation.height))
                let dxDrag = xDrag - xBegin
                let dyDrag = yDrag - yBegin
                let dx: CGFloat
                let dy: CGFloat
                if dxMax == 0 || dyMax == 0 {
                    dx = dxDrag
                    dy = dyDrag
                } else {
                    let ratio = dxMax / dyMax
                    let dxAdjusted = dyDrag * ratio
                    let dyAdjusted = dxDrag / ratio
                    if abs(dxDrag - dxAdjusted) < abs(dyDrag - dyAdjusted) {
                        dx = dxAdjusted
                        dy = dyDrag
                    } else {
                        dx = dxDrag
                        dy = dyAdjusted
                    }
                }
                let newX = xBegin + dx
                let newY = yBegin + dy
                
                rectData.imagePosition.x = newX
                rectData.imagePosition.y = newY
            }
            .onEnded { _ in
                imagePositionAtStartOfDrag = nil
            }
    }

    // MARK: - Zoom Gesture
    func zoomGesture() -> some Gesture {
        MagnifyGesture()
            .onChanged { value in
                let gestureRatio = value.magnification / magnificationGestureState
                let aspectRatio = rectData.imageSize.width / rectData.imageSize.height
                
                // Calculate rotated bounding box size
                let angleRadians = rectData.imageRotation.radians
                let cosAngle = abs(cos(angleRadians))
                let sinAngle = abs(sin(angleRadians))
                
                let rotatedFrameWidth = (rectData.frameSize.width * cosAngle) + (rectData.frameSize.height * sinAngle)
                let rotatedFrameHeight = (rectData.frameSize.width * sinAngle) + (rectData.frameSize.height * cosAngle)
                
                
                let scaleFactorWidth = rotatedFrameWidth / rectData.imageSize.width
                let scaleFactorHeight = rotatedFrameHeight / rectData.imageSize.height
                let requiredScaleFactor = max(scaleFactorWidth, scaleFactorHeight)
                
                
                let minWidth = rectData.imageSize.width * requiredScaleFactor
                
                

                var newWidth = rectData.imageSize.width * gestureRatio
                var newHeight = newWidth / aspectRatio
                
                
                newWidth = max(minWidth, newWidth)
                newHeight = newWidth / aspectRatio
                
                let imageCoversFrame = newWidth >= rotatedFrameWidth && newHeight >= rotatedFrameHeight
                
                if !imageCoversFrame {

                    let centerXAdjustment = (rectData.framePosition.x - rectData.imagePosition.x)
                    let centerYAdjustment = (rectData.framePosition.y - rectData.imagePosition.y)
                    rectData.imagePosition.x += centerXAdjustment
                    rectData.imagePosition.y += centerYAdjustment
                }
                
                rectData.imageSize.width = newWidth
                rectData.imageSize.height = newHeight
                
                magnificationGestureState = value.magnification
            }
            .onEnded { _ in
                magnificationGestureState = 1.0
            }
    }
}

// MARK: - Data Models
struct RectData {
    var frameSize: CGSize
    var framePosition: CGPoint
    var imageSize: CGSize
    var imageRotation: Angle
    var imagePosition: CGPoint
}

// MARK: - Preview
struct RotatingDraggingRectView_Previews: PreviewProvider {
    static var previews: some View {
        RotatingDraggingRectView()
    }
}

修复方案 #

1. 修复缩放后Y轴拖拽失效问题 #

原拖拽手势中错误的比例约束逻辑导致Y轴拖拽被限制，改用旋转坐标系转换计算拖拽范围，确保XY轴拖拽正常：

func dragGesture() -> some Gesture {
    DragGesture()
        .onChanged { value in
            let startPos = imagePositionAtStartOfDrag ?? rectData.imagePosition
            imagePositionAtStartOfDrag = startPos
            
            let angle = rectData.imageRotation.radians
            let cosA = cos(angle)
            let sinA = sin(angle)
            
            // 计算旋转后边界框的外接尺寸
            let rotatedFrameWidth = rectData.frameSize.width * abs(cosA) + rectData.frameSize.height * abs(sinA)
            let rotatedFrameHeight = rectData.frameSize.width * abs(sinA) + rectData.frameSize.height * abs(cosA)
            
            // 计算图片可拖拽的最大偏移量（确保覆盖边界框）
            let maxOffsetX = (rectData.imageSize.width - rotatedFrameWidth) / 2
            let maxOffsetY = (rectData.imageSize.height - rotatedFrameHeight) / 2
            
            // 将拖拽转换到旋转坐标系下的偏移
            let dx = value.translation.x
            let dy = value.translation.y
            
            // 旋转偏移量到图片坐标系
            let rotatedDx = dx * cosA + dy * sinA
            let rotatedDy = -dx * sinA + dy * cosA
            
            // 限制旋转坐标系下的偏移范围
            let clampedRotatedDx = max(-maxOffsetX, min(maxOffsetX, rotatedDx))
            let clampedRotatedDy = max(-maxOffsetY, min(maxOffsetY, rotatedDy))
            
            // 转换回全局坐标系
            let finalDx = clampedRotatedDx * cosA - clampedRotatedDy * sinA
            let finalDy = clampedRotatedDx * sinA + clampedRotatedDy * cosA
            
            // 更新图片位置
            rectData.imagePosition.x = startPos.x + finalDx
            rectData.imagePosition.y = startPos.y + finalDy
        }
        .onEnded { _ in
            imagePositionAtStartOfDrag = nil
        }
}

2. 修复缩放后图片覆盖问题 #

原缩放逻辑中最小尺寸计算错误，调整为基于边界框旋转后的实际需求计算最小尺寸，确保缩放后图片始终覆盖边界框：

func zoomGesture() -> some Gesture {
    MagnifyGesture()
        .onChanged { value in
            let aspectRatio = rectData.imageSize.width / rectData.imageSize.height
            let angle = rectData.imageRotation.radians
            let cosA = abs(cos(angle))
            let sinA = abs(sin(angle))
            
            // 旋转后边界框的最小所需图片尺寸
            let requiredWidth = rectData.frameSize.width * cosA + rectData.frameSize.height * sinA
            let requiredHeight = rectData.frameSize.width * sinA + rectData.frameSize.height * cosA
            
            // 计算满足覆盖的最小尺寸（保持原图比例）
            let minWidth = max(requiredWidth, requiredHeight * aspectRatio)
            let minHeight = minWidth / aspectRatio
            
            // 应用手势缩放
            let scale = value.magnification / magnificationGestureState
            var newWidth = rectData.imageSize.width * scale
            var newHeight = newWidth / aspectRatio
            
            // 限制最小尺寸
            newWidth = max(newWidth, minWidth)
            newHeight = max(newHeight, minHeight)
            
            // 缩放时保持图片相对边界框的位置（避免突然跳转）
            let scaleRatio = newWidth / rectData.imageSize.width
            let dx = (rectData.imagePosition.x - rectData.framePosition.x) * (scaleRatio - 1)
            let dy = (rectData.imagePosition.y - rectData.framePosition.y) * (scaleRatio - 1)
            
            rectData.imagePosition.x += dx
            rectData.imagePosition.y += dy
            
            rectData.imageSize.width = newWidth
            rectData.imageSize.height = newHeight
            
            magnificationGestureState = value.magnification
        }
        .onEnded { _ in
            magnificationGestureState = 1.0
        }
}

3. 优化旋转后的尺寸调整逻辑 #

原旋转调整逻辑存在重复缩放问题，修改为仅在当前尺寸不足时调整：

func adjustRectSizeForRotation() {
    let angle = rectData.imageRotation.radians
    let cosA = abs(cos(angle))
    let sinA = abs(sin(angle))
    
    let requiredWidth = rectData.frameSize.width * cosA + rectData.frameSize.height * sinA
    let requiredHeight = rectData.frameSize.width * sinA + rectData.frameSize.height * cosA
    let aspectRatio = rectData.imageSize.width / rectData.imageSize.height
    
    // 计算最小所需尺寸
    let minWidth = max(requiredWidth, requiredHeight * aspectRatio)
    let minHeight = minWidth / aspectRatio
    
    // 仅当当前尺寸小于最小尺寸时调整
    if rectData.imageSize.width < minWidth || rectData.imageSize.height < minHeight {
        rectData.imageSize.width = minWidth
        rectData.imageSize.height = minHeight
    }
    
    // 旋转后重置图片位置到边界框中心
    rectData.imagePosition = rectData.framePosition
}

优化建议 #

• 将旋转、缩放的坐标转换逻辑封装为工具方法，提升代码可读性；
• 使用@GestureState替代@State管理手势临时状态（如拖拽起始位置），无需手动重置；
• 调整手势冲突处理策略，可根据需求使用exclusively(before:)控制手势优先级；
• 若需支持边界框拖拽，可添加对应手势并同步更新图片位置。

内容的提问来源于stack exchange，提问作者Hector