Today I will show you how to add a mask to an Image view, which can be used to highlight the subject of the image.

Knowledge points:

• First, add an Image view.

• Then by calling the clipShape method, apply a mask effect to the Image view, and the mask is Circle.

var body: some View {
    VStack {
        Image("podnu")
            .clipShape(Circle())
    }
}

Visual effects:

• Add another Image view, using another masking method.

• By calling the mask method, apply a mask effect to the Image view, and the mask is Circle.

• We can see that clipShape and mask produce the same effect.

var body: some View {
    VStack {
        Image("podnu")
            .mask(Circle())
    }
}

Visual effects:

• Finally, import a gradient image for masking the Text view.

• Again, add an Image view and load the gradient image.

• Then, set its width and height to 300

• Finally, add a specified text mask to it with a font size of 50 and a bold effect.

var body: some View {
    VStack {
        Image("gradient")
            .resizable()
            .frame(width: 300, height: 300)
            .mask {
                Text("Hello World!")
                    .font(Font.system(size: 50))
                    .bold()
            }
    }
}

Visual effects:

Follow me on:

(Foks) Hui Wang's LinkedIn