ios – How to draw stroke(s) outside of an element?


I am working on an overlay effect that consists of 2 strokes, preview of it can be seen below (green strokes)

enter image description here

So far I was able to achieve it only by using 2 overlay elements like this:

    .overlay {
      ZStack {
        RoundedRectangle(cornerRadius: 18, style: .continuous)
          .inset(by: -2)
          .stroke(.green.opacity(0.2), lineWidth: 4)
        RoundedRectangle(cornerRadius: size18, style: .continuous)
          .strokeBorder(.green)
      }
    }

But using 2 elements here feels excessive? I was trying to see if there is a simpler solution where I could use single rounded rectangle but force second stroke to be drawn outside of it instead of in the center?

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img