skip to Main Content

This i my code:

Image()
.resizable()
.scaledToFill()
.frame(width: 200, height: 200)
.clipShape(Rectangle().cornerRadius(8).rotationEffect(.degrees(45)))

I receive this error:

Instance method ‘clipShape(_:style:)’ requires that ‘some View’ conform to ‘Shape’

Or you know another way to crop my image to diamond?

2

Answers


  1. Try to use mask instead, maybe it will be enough for your needs, and it accepts views, like

    Image()
    .resizable()
    .scaledToFill()
    .frame(width: 200, height: 200)
    .mask(Rectangle().cornerRadius(8).rotationEffect(.degrees(45))) // << here !!
    
    Login or Signup to reply.
  2. Diamond shaped clipped image

    Like this?

    You can encapsulate the image in a ZStack and rotate them opposite to each other. Then set the frame of the ZStack to match the image. Feel free to ask if anything is unclear!

    ZStack {
        Image("IMG_1544")
            .resizable()
            .scaledToFill()
            .frame(width: 200, height: 200)
            .rotationEffect(.degrees(-45))
    }
    .frame(width: cos(.pi/4) * 200, height: sin(.pi/4) * 200)
    .cornerRadius(8)
    .rotationEffect(.degrees(45))
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search