Question 301038 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – SwiftUI: How to clip an image overlay to its view?

I have the following view displaying a book image:

struct MaskContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(LinearGradient(colors: [.red, .green], startPoint: .top, endPoint: .bottom))
            Rectangle()
                .fill(LinearGradient(colors: [.red, .purple, .green], startPoint: .top, endPoint: .bottom))
                .padding(10)
            Rectangle()
                .fill(LinearGradient(colors: [.yellow, .green], startPoint: .top, endPoint: .bottom))
                .padding(20)
                .overlay(alignment: .center) {
                    Image("book")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .colorMultiply(.black)
                        .opacity(0.1)
                        .rotationEffect(.degrees(-20), anchor: .center)
                        .offset(x: 50.0, y: 10)
                        .clipShape(Rectangle())
                        .clipped()
                    
                }
            Text("Tourism")
                .foregroundStyle(.white)
                .font(.largeTitle)
        }
        .frame(width: 200, height: 250)
    }
}

I’m trying to clip the image to the rectangle to which it’s added as an overlay but it’s overflowing onto the background rectangles. How can I achieve this?

The image:

enter image description here

Current Result:

enter image description here

Clipping the rectangle containing the overlay doesn’t fix it either:
enter image description here

Tags:

2

Answers


  1. 0

    You should clip the Rectangle instead, to remove the part of the image that’s "sticking out" of the rectangle’s frame.

    Rectangle()
    .fill(LinearGradient(colors: [.yellow, .green], startPoint: .top, endPoint: .bottom))
    .padding(20)
    .overlay(alignment: .center) {
        Image("book")
            ...
        
    }
    .clipped()// here!

    If you want to clip the image with the green-yellow area only, you should add the padding of the rectangle last, after clipping.

    Rectangle()
    .fill(LinearGradient(colors: [.yellow, .green], startPoint: .top, endPoint: .bottom))
    .overlay {
        Image("book")
            ...
    }
    .clipped()
    .padding(20) // move the padding here

    Alternatively, don’t use an overlay and just add the image to the ZStack, and use an insetted rectangle as the clip shape.

    // directly in the ZStack
Image("book")
    ...
    .clipShape(Rectangle().inset(by: 20)) // 20, because that is the padding for the green-yellow rectangle
    Login or Signup to reply.
  2. 0 
    struct MaskContentView: View {
var body: some View {
    ZStack {
        Rectangle()
            .fill(LinearGradient(colors: [.red, .green], startPoint: .top, endPoint: .bottom))
        Rectangle()
            .fill(LinearGradient(colors: [.red, .purple, .green], startPoint: .top, endPoint: .bottom))
            .padding(10)
        Rectangle()
            .fill(LinearGradient(colors: [.yellow, .green], startPoint: .top, endPoint: .bottom))
            .padding(20)
            .overlay(alignment: .center) {
                Image("Book")
                    .resizable()
                    //You can brainstorm here....
                    .frame(width: 160, height: 200)
                    .aspectRatio(contentMode: .fill)
                    .colorMultiply(.black)
                    .opacity(0.1)
                    .rotationEffect(.degrees(-20), anchor: .center)
                    .offset(x: 20.0, y: 10)
                    .clipShape(Rectangle())
                    .clipped()
                
            }
        Text("Tourism")
            .foregroundStyle(.white)
            .font(.largeTitle)
    }
    .frame(width: 200, height: 250)
}

    }
    You can see the result in the attached image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search