top of page
Writer's pictureHui Wang

19. SwiftUI: How to add a mask to Image view


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:

Opmerkingen


bottom of page