1

I am looking for advice on the best way to achieve the following with SwiftUI.

I have a view with a red rounded rectangle corner, and a child view which is a rectangular blue box offset to the bottom of the parent. 1

However, I wish to mask out the the hatched area in the second attached figure 2 so that is appear white (i.e. remove the blue hatched area) and am not sure how to best accomplish this.

This is the code as it stands:-

import SwiftUI
import Foundation

struct PupilCell : View {
    var body : some View {

        ZStack { 

            Rectangle().frame(height: 60.0, alignment: .bottom).foregroundColor(Color.blue).offset(x: 0.0, y: 50.0)
            RoundedRectangle(cornerRadius: 25, style: .continuous).stroke(lineWidth: 2.0).fill(Color.red)
        }
    }
}
Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
nppatt
  • 13
  • 2
  • i think you have to use Shape for this....see this Apple tutorial: https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes – Chris Jan 08 '20 at 09:29

1 Answers1

2

Here is possible approach:

mask for rects

ZStack {

    Rectangle().frame(height: 60.0, alignment: .bottom).foregroundColor(Color.blue).offset(x: 0.0, y: 50.0)
    RoundedRectangle(cornerRadius: 25, style: .continuous).stroke(lineWidth: 2.0).fill(Color.red)
}.mask(RoundedRectangle(cornerRadius: 25, style: .continuous).fill(Color.black))
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Asperi
  • 228,894
  • 20
  • 464
  • 690
  • 1
    but it works also with .mask(RoundedRectangle(cornerRadius: 25)) :D – Chris Jan 08 '20 at 10:09
  • 1
    Yes @Chris, in this particular case simplified variant also works. I wanted to show generic principle of masking by top view, which not always would have simplified default parameters. Just in case. – Asperi Jan 08 '20 at 10:33
  • i didn't want to reduce your solution - i didn't know how to do it without custom shape....you solution is great ;) – Chris Jan 08 '20 at 10:36