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

Forums > SwiftUI

@Heyya-x

Apr '23

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.

@Hectorcrdna

Apr '23

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
    }
}

@Heyya-x

Apr '23

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

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.