BLACK FRIDAY: Save 50% on all my Swift books and bundles! >>

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      

Save 50% in my WWDC sale.

SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

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.