如何在 SwiftUI 的一个视图中缩放和排列多个 UIBezierPath？

如何解决如何在 SwiftUI 的一个视图中缩放和排列多个 UIBezierPath？

我有多个 UIBezierPath，比如说两个正方形：

var squareA: UIBezierPath {
    let bp = UIBezierPath()
    bp.addLine(to: CGPoint(x: 0,y: 0))
    bp.addLine(to: CGPoint(x: 100,y: 100))
    bp.addLine(to: CGPoint(x: 0,y: 100))
    return bp
}

var squareB: UIBezierPath {
    let bp = UIBezierPath()
    bp.move(to: CGPoint(x: 300,y: 200))
    bp.addLine(to: CGPoint(x: 400,y: 300))
    bp.addLine(to: CGPoint(x: 300,y: 300))
    return bp
}

现在我想在一个视图中显示这两个方块。当我设置特定的帧大小时，此视图应居中并按比例缩小。类似这样的事情：

MyUIBezierPathView(paths: [squareA,squareB])
    .frame(width: 200)

我该如何解决这个问题？

编辑：我尝试了一些其他解决方案，由@Aspari 发布的链接指导。

组合所有形状：

extension UIBezierPath {
    static func calculateBounds(paths: [UIBezierPath]) -> CGRect {
        let myPaths = UIBezierPath()
        for path in paths {
            myPaths.append(path)
        }
        return (myPaths.bounds)
    }
}

现在我正在计算新的维度：

struct ShapeView: Shape {
  
    let bezier: UIBezierPath
    let pathBounds: CGRect

    func path(in rect: CGRect) -> Path {
        let scaleX = rect.width / pathBounds.width
        let scaleY = rect.height / pathBounds.height
        let scale = min(scaleX,scaleY)
        return Path(bezier.cgPath)//.applying(CGAffineTransform(scaleX: scale,y: scale))
    }
}

最后在我看来我使用这个视图：

struct ShapeDrawer: View {
    let pathBounds = UIBezierPath.calculateBounds(paths: [squareA,squareB])

    ZStack{
        ShapeView(bezier: squareA,pathBounds: pathBounds)
        ShapeView(bezier: squareB,pathBounds: pathBounds)
    }
    .frame(width: 300,height: 300 * pathBounds.height / pathBounds.width)
    .background(Color.green)
}

这很好用！但似乎此解决方案仅适用于“直线形状”，如正方形、矩形等。如果我使用一些带有二次曲线的形状，我的形状不再位于视图的中心。下面是一个例子：

正方形：

弯曲形状：

弯曲形状的代码：

var han1: UIBezierPath {
    let shape = UIBezierPath()
    shape.move(to: CGPoint(x: 108,y: 552))
    shape.addQuadCurve(to: CGPoint(x: 120,y: 447),controlPoint: CGPoint(x: 118,y: 500))
    shape.addQuadCurve(to: CGPoint(x: 153,y: 396),controlPoint: CGPoint(x: 123,y: 413))
    shape.addQuadCurve(to: CGPoint(x: 177,y: 407),controlPoint: CGPoint(x: 168,y: 387))
    shape.addQuadCurve(to: CGPoint(x: 157,y: 522),controlPoint: CGPoint(x: 195,y: 467))
    shape.addQuadCurve(to: CGPoint(x: 126,y: 564),controlPoint: CGPoint(x: 144,y: 549))
    shape.addQuadCurve(to: CGPoint(x: 113,y: 565),controlPoint: CGPoint(x: 117,y: 568))
    shape.addQuadCurve(to: CGPoint(x: 108,y: 552),controlPoint: CGPoint(x: 107,y: 561))
    shape.close()
    return shape
}

var han2: UIBezierPath {

    let shape = UIBezierPath()
    shape.move(to: CGPoint(x: 288,y: 488))
    shape.addQuadCurve(to: CGPoint(x: 292,y: 490),controlPoint: CGPoint(x: 289,y: 489))
    shape.addQuadCurve(to: CGPoint(x: 410,y: 579),controlPoint: CGPoint(x: 371,y: 554))
    shape.addQuadCurve(to: CGPoint(x: 421,y: 593),controlPoint: CGPoint(x: 425,y: 583))
    shape.addQuadCurve(to: CGPoint(x: 398,y: 621),controlPoint: CGPoint(x: 415,y: 606))
    shape.addQuadCurve(to: CGPoint(x: 362,y: 637),controlPoint: CGPoint(x: 382,y: 636))
    shape.addQuadCurve(to: CGPoint(x: 351,y: 620),controlPoint: CGPoint(x: 349,y: 636))
    shape.addQuadCurve(to: CGPoint(x: 347,y: 594),controlPoint: CGPoint(x: 354,y: 608))
    shape.addQuadCurve(to: CGPoint(x: 289,y: 513),controlPoint: CGPoint(x: 326,y: 563))
    shape.addCurve(to: CGPoint(x: 288,y: 488),controlPoint1: CGPoint(x: 271,y: 489),controlPoint2: CGPoint(x: 262,y: 473))
    shape.close()
    return shape
}

我不确定，但感觉二次曲线中的控制点被考虑在内了，是这个偏移的原因吗？

EDIT 2：这不是形状形式的问题，而是我的路径在视图中的位置问题。如果我的视图中没有从 CGPoint(x: 0,y: 0) 开始的形状，弯曲形状就是这种情况，就会出现这种奇怪的偏移。我怎样才能删除它？

编辑 3：我已经解决了这个问题。我不得不改变我的观点：

struct ShapeView: Shape {
  
    let bezier: UIBezierPath
    let pathBounds: CGRect

    func path(in rect: CGRect) -> Path {
        let scaleX = rect.width / pathBounds.width
        let scaleY = rect.height / pathBounds.height
        let scale = min(scaleX,scaleY)
        let path = Path(bezier.cgPath).applying(CGAffineTransform(translationX: -pathBounds.origin.x,y: -pathBounds.origin.y)) // <<<<<< this line 
        return path.applying(CGAffineTransform(scaleX: scale,y: scale))
}

}