Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I draw a shape with multiple borders?

Tags:

swift

swiftui

I am trying to draw a shape using swift, and here my code

struct ElementView: View {
    var element: Element

    var body: some View {
        let rec = RoundedRectangle(cornerRadius: 25.0)
        
        return ZStack {
            rec
                .frame(width: 300, height: 150, alignment: .center)
                .foregroundColor(.pink)
                .opacity(0.4)
                .overlay(
                    rec.stroke(
                        Color.pink,
                        style: StrokeStyle(
                            lineWidth: 5,
                            lineCap: .round,
                            lineJoin: .round
                        )
                    )
                )
            Text("Text")
        }
    }
}

There is only one border, but I want two or more

My result: https://i.sstatic.net/n26Vb.png

What is expected: https://i.sstatic.net/L23cW.png

How can I add multiple borders?

like image 488
Some Name Avatar asked Jun 10 '26 01:06

Some Name


1 Answers

Another approach with less code!


enter image description here


struct ElementView: View {

    var body: some View {

        Text("Text")
            .frame(width: 300, height: 150, alignment: .center)
            .background(Color.yellow.opacity(0.4))
            .cornerRadius(15.0)
            .overlay(RoundedRectangle(cornerRadius: 15.0).strokeBorder(Color.blue, lineWidth: 10.0))
            .padding(10.0)
            .overlay(RoundedRectangle(cornerRadius: 25.0).strokeBorder(Color.red, lineWidth: 10.0))

    }
}
like image 195
ios coder Avatar answered Jun 22 '26 21:06

ios coder



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!