How to scale and arrange multiple UIBezierPath in one view in SwiftUI? - swiftui

Question

I have multiple UIBezierPath, let's say two squares:
var squareA: UIBezierPath {
let bp = UIBezierPath()
bp.addLine(to: CGPoint(x: 0, y: 0))
bp.addLine(to: CGPoint(x: 100, 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: 200))
bp.addLine(to: CGPoint(x: 400, y: 300))
bp.addLine(to: CGPoint(x: 300, y: 300))
return bp
}
Now I would like to display these two squares in one view. This view should be centered and scaled down when I set a specific frame size. Some thing like this:
MyUIBezierPathView(paths: [squareA, squareB])
.frame(width: 200)
How can I solve this problem?
EDIT: I've tried some other solution guidelined by the link that #Aspari posted.
Combine all shapes:
extension UIBezierPath {
static func calculateBounds(paths: [UIBezierPath]) -> CGRect {
let myPaths = UIBezierPath()
for path in paths {
myPaths.append(path)
}
return (myPaths.bounds)
}
}
Now I'm calculating the new dimensions:
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))
}
}
And finally in my view I use this view:
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)
}
and this works well! But it seems that this solution only works with "straight shapes" like squares, rectangles and so on. If I use some shapes with quadratic curves my shapes are not anymore in the center of the view. Here is an example:
Squares:
Curved Shapes:
Code for the curved shapes:
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
}
I'm not sure, but it feels like the control points in the quadratic curves are taken into account and are the reason for this offset?
EDIT 2: It's not a problem with the form of shape, but it's a problem with the position of my paths in the view. If there is no shape in my view that starts at CGPoint(x: 0, y: 0) which is the case for the curved shape, there will be this strange offset. How can I remove this?
EDIT 3: I've solved the problem. I had to change my view to:
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))
}
}