UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: SwiftUI, A problem in drawing a puzzle piece by Path()

Forums > SwiftUI

I want to draw a puzzle piece, but I get trouble with path subtraction.

The following picture is what I want:

Howerver, the following picture is what I got:

And the following picture show the sequence I drow:

And here is my code:

struct PuzzleNodeShape: Shape {
    var puzzleData: PuzzleData

    func path(in rect: CGRect) -> Path {
        var path = Path()

        let segment = min(rect.width, rect.height) * 0.2
        let radius = segment * 0.5

        let centerTop = CGPoint(x: rect.width * 0.5, y: segment)
        let centerRight = CGPoint(x: segment * 4, y: rect.height * 0.5)
        let centerBottom = CGPoint(x: rect.width * 0.5, y: segment * 4)
        let centerLeft = CGPoint(x: segment, y: rect.height * 0.5)

        path.move(to: CGPoint(x: segment, y: segment * 2))

        // Draw 1 and 2
        path.addLine(to: CGPoint(x: segment, y: segment))
        path.addLine(to: CGPoint(x: segment * 2, y: segment))

        // Draw 3 (Top)
        path.addArc(center: centerTop, radius: radius, startAngle: 
              .degrees(0), endAngle: .degrees(180), clockwise: true)

        // Draw 4 and 5
        path.addLine(to: CGPoint(x: segment * 4, y: segment))
        path.addLine(to: CGPoint(x: segment * 4, y: segment * 2))

        // Draw 6 (Right)
        path.addArc(center: centerRight, radius: radius, startAngle: 
              .degrees(90), endAngle: .degrees(270), clockwise: true)

        // Draw 7 and 8
        path.addLine(to: CGPoint(x: segment * 4, y: segment * 4))
        path.addLine(to: CGPoint(x: segment * 3, y: segment * 4))

        // Draw 9 (Bottom)
        path.addArc(center: centerBottom, radius: radius, startAngle: 
              .degrees(180), endAngle: .degrees(360), clockwise: true)

        // Draw 10 and 11
        path.addLine(to: CGPoint(x: segment, y: segment * 4))
        path.addLine(to: CGPoint(x: segment, y: segment * 3))

        // Draw 12 (Left)
        path.addLine(to: CGPoint(x: segment, y: segment * 2))

        return path
    }
}
struct PuzzleLibraryView: View {
    var body: some View {
        PuzzleNodeShape()
    }
}

I think adding the correct difference between paths might solve it. But I have searched everywhere and couldn't make it work. If you could help me, I would be extremely grateful.

2      

Hi, I had to change a few things for it to keep it's shape in diferent frames but this should work:

struct PuzzleNodeShape: Shape {
//    var puzzleData: PuzzleData

    func path(in rect: CGRect) -> Path {
        var path = Path()

        let segment = min(rect.width, rect.height) * 0.2
        let radius = segment * 0.5

        let centerTop = CGPoint(x: segment / 0.4, y: segment)
        let centerRight = CGPoint(x: segment * 4, y: segment / 0.4)
        let centerBottom = CGPoint(x: segment / 0.4, y: segment * 4)
//        let centerLeft = CGPoint(x: segment, y: segment / 0.4)

        path.move(to: CGPoint(x: segment, y: segment))

//      Draw 1 (Top)
        path.addArc(center: centerTop, radius: radius, startAngle:
              .degrees(180), endAngle: .degrees(0), clockwise: false)

//      Draw 2
        path.addLine(to: CGPoint(x: segment * 4, y: segment))

//      Draw 3 (Right)
        path.addArc(center: centerRight, radius: radius, startAngle:
              .degrees(-90), endAngle: .degrees(-270), clockwise: true)

//      Draw 4
        path.addLine(to: CGPoint(x: segment * 4, y: segment * 4))

//      Draw 5 (Bottom)
        path.addArc(center: centerBottom, radius: radius, startAngle:
              .degrees(0), endAngle: .degrees(180), clockwise: false)

//      Draw 6
        path.addLine(to: CGPoint(x: segment, y: segment * 4))

//      Draw 7 (Left)
        path.closeSubpath()

        return path
    }
}

3      

Think you every much !!! You solved it perfectly !!!

2      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.