SwiftUI QR code scan reactangle with border corner

Question

My requirement has to show QR code within the 4 corner lines, Scanning QR code is done. Currently .overlay( RoundedRectangle is showing full border., but I need to draw a below, any idea?

CodeScannerView(codeTypes: [.qr], simulatedData: "Some simulated data", completion: self.handleScan)
                 .padding(.horizontal, 40)
                 .cornerRadius(35)
                 .overlay(
                     RoundedRectangle(cornerRadius: 20)
                         .stroke(Color.yellow, lineWidth: 5)
                 )
                 .frame(width: 350, height: 250)
                 .padding(.bottom , 50)``` 

Answer 1

You can achieve that border with stroke(). It does take some more parameters like a StrokeStyle. With a little bit of calculations you can achieve that result. Here is an example:

struct ContentView : View {
    var body : some View {

        Text("Hello World")
            .frame(width: 275, height: 275)
            .overlay(
                Rectangle()
                    .stroke(Color.yellow, style: StrokeStyle(lineWidth: 5.0,lineCap: .round, lineJoin: .bevel, dash: [60, 215], dashPhase: 29))
            )
    }
}

Basically you will have to pass an array of dash, where first number is the length of your yellow border. The 215 is the spacing.

If you calculate 60*4 + 215*4, you will have to get the same as calulcating the scope of your actual view. For me its 275*4. Then play around with the dashPhase and you can achieve a good result.