CODEWITHSUNDEEP
viewswiftuishapesmasking
nppatt
nppatt

Reputation: 13

How to mask out a region of a view

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)
        }
    }
}

Upvotes: 1

Views: 786

Answers (1)

Asperi
Asperi

Reputation: 257603

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))

Upvotes: 2

Related Questions