SwiftUI实现多颜色描边路径的视图适配缩放方案问询

问题背景 #

原代码通过合并所有线条为单个Path，实现了缩放适配视图并居中显示，但拆分每个线条单独设置描边颜色时，所有路径堆叠在一起，无法保持正确的相对位置和缩放效果。

原合并路径代码：

GeometryReader { geometry in
    let frame = CGRect(x: geometry.frame(in: .local).minX, y: geometry.frame(in: .local).minY, width: geometry.frame(in: .local).width, height: geometry.frame(in: .local).height)
    
    Path { path in
        for line in drawingToShow.visibleLines {
            DrawingViewTools().add(line: line, to: &path)
        }
    }
    .scaled(for: frame)
    .translateToCenter(for: frame)
    .stroke(.black, lineWidth: lineWidth)
    .frame(alignment: .center)
}

原Path扩展（问题根源：基于单个Path的boundingRect计算变换）：

extension Path {
    func scaled(for rect: CGRect) -> Path {
        let scaleX : CGFloat = (rect.width * 0.98) / boundingRect.width
        let scaleY : CGFloat = (rect.height * 0.98) / boundingRect.height
        let scale = min(scaleX, scaleY)
        return applying(CGAffineTransform(scaleX: scale, y: scale)).offsetBy(dx: -boundingRect.origin.x * scale, dy: -boundingRect.origin.y * scale)
    }
    
    func translateToCenter(for rect: CGRect) -> Path {
        let centerFrameX = rect.size.width / 2
        let centerFrameY = rect.size.height / 2
        let offX = centerFrameX - (boundingRect.width / 2.0)
        let offY = centerFrameY - (boundingRect.height / 2.0)
        return applying(CGAffineTransform(translationX: 1, y: 1)).offsetBy(dx: offX, dy: offY)
    }
}

拆分后的问题代码（路径堆叠）：

ZStack {
    ForEach(Array(drawingToShow.visibleLines.enumerated()), id: \.offset) { index, line in
        Path { path in
            DrawingViewTools().add(line: line, to: &path)
        }
        .scaled(for: frame)
        .translateToCenter(for: frame)
        .stroke(line.color, lineWidth: lineWidth)
        .frame(alignment: .center)
    }
}

解决方案 #

核心问题是单个线条的boundingRect远小于整体边界，导致缩放比例异常放大。需要基于所有线条的整体边界计算统一的缩放和偏移变换，再应用到每个独立路径上。

修改后的完整代码 #

GeometryReader { geometry in
    let frame = geometry.frame(in: .local)
    
    // 计算所有线条组合的总边界矩形
    var totalBoundingRect = CGRect.zero
    for line in drawingToShow.visibleLines {
        var linePath = Path()
        DrawingViewTools().add(line: line, to: &linePath)
        totalBoundingRect = totalBoundingRect.union(linePath.boundingRect)
    }
    
    // 避免空边界导致除以零崩溃
    guard !totalBoundingRect.isEmpty else {
        return EmptyView()
    }
    
    // 计算统一缩放比例（保留98%的边距）
    let scaleX = (frame.width * 0.98) / totalBoundingRect.width
    let scaleY = (frame.height * 0.98) / totalBoundingRect.height
    let scale = min(scaleX, scaleY)
    
    // 计算缩放后的居中偏移量
    let scaledTotalWidth = totalBoundingRect.width * scale
    let scaledTotalHeight = totalBoundingRect.height * scale
    let offsetX = (frame.width - scaledTotalWidth) / 2 - totalBoundingRect.origin.x * scale
    let offsetY = (frame.height - scaledTotalHeight) / 2 - totalBoundingRect.origin.y * scale
    
    // 组合变换：先缩放，再偏移
    let unifiedTransform = CGAffineTransform(scaleX: scale, y: scale)
        .translatedBy(x: offsetX, y: offsetY)
    
    ZStack {
        ForEach(Array(drawingToShow.visibleLines.enumerated()), id: \.offset) { index, line in
            Path { path in
                DrawingViewTools().add(line: line, to: &path)
            }
            .applying(unifiedTransform)
            .stroke(line.color, lineWidth: lineWidth)
        }
    }
}

关键优化点 #

1. 统一计算整体边界：遍历所有线条，合并它们的boundingRect得到总边界，确保所有路径使用相同的缩放基准。
2. 统一变换逻辑：将缩放和偏移合并为单个CGAffineTransform，避免每个路径单独计算导致的错位。
3. 空边界防护：添加guard语句避免空路径导致的除以零崩溃。
4. 移除冗余变换：原translateToCenter中无意义的translationX:1, y:1偏移已移除。

可选代码优化 #

将计算总边界的逻辑提取为工具方法，提高代码复用性：

// 假设drawingToShow的类型为DrawingModel，根据实际类型调整
extension DrawingModel {
    func totalBoundingRect() -> CGRect {
        var rect = CGRect.zero
        for line in visibleLines {
            var path = Path()
            DrawingViewTools().add(line: line, to: &path)
            rect = rect.union(path.boundingRect)
        }
        return rect
    }
}

之后在GeometryReader中可直接调用：

let totalBoundingRect = drawingToShow.totalBoundingRect()

内容的提问来源于stack exchange，提问作者Benjamin B.