[SwiftUI] Square Shape를 활용하여 Image 조정하기

SwiftUI에는 미리 정의된 여러가지 Shape들이 있다. Rectangle(), Circle(), RoundedRectangle() 등이 있다. 하지만 Square()는 없다.

그래서 직접 Path를 만들어서 넣어주자.

struct Square: Shape {
    func path(in rect: CGRect) -> Path {
        let side = min(rect.maxX, rect.maxY)
        return Path { path in
            path.move(to: CGPoint(x: rect.midX, y: rect.midY - side / 2))
            path.addLine(to: CGPoint(x: rect.midX + side / 2, y: rect.midY - side / 2))
            path.addLine(to: CGPoint(x: rect.midX + side / 2, y: rect.midY + side / 2))
            path.addLine(to: CGPoint(x: rect.midX - side / 2, y: rect.midY + side / 2))
            path.addLine(to: CGPoint(x: rect.midX - side / 2, y: rect.midY - side / 2))
        }
    }
}

 

이제 Rectangle() 사용하듯 Square()를 사용할 수 있다.

 

이를 활용해서 Image를 받으면 Square 형태로 clip하는 로직을 만들 수 있다.

 

1. Square 형태로 clip하기

먼저, 가로로 긴 형태의 사진을 하나 구해서 시작한다. (세로로 긴 형태도 잘 되는 것을 확인했다.)

struct SquareImageView: View {
    var id: Int
    var imageName: String
    var aspectRatio: CGFloat?

    var body: some View {
        Image(imageName)
            .resizable()
            .aspectRatio(aspectRatio, contentMode: .fit)
            .clipShape(Rectangle())
            .background(Color.gray100)
            .tag(id)
    }
}

본문에 있는 Rectangle()을 맨 위에 Square()으로 대체하면 다음과 같다.

struct SquareImageView: View {
    var id: Int
    var imageName: String
    var aspectRatio: CGFloat?

    var body: some View {
        Image(imageName)
            .resizable()
            .aspectRatio(aspectRatio, contentMode: .fit)
            .clipShape(Square())
            .background(Color.gray100)
            .tag(id)
    }
}

Clip 성공!

 

2. Square 형태로 crop 하기

위의 형태로 cornerRadius 등을 넣으려면 문제가 생긴다. 이 때는 crop을 해야 한다.

crop하기 위해 overlay를 활용했다. (투명한 정사각형 뷰 위에 이미지를 overlay 시킨다)

이 때는 Square shape가 필요 없다.

struct SquareImageView: View {
    var id: Int
    var imageName: String
    var aspectRatio: CGFloat?

    var body: some View {
        Color.clear
            .aspectRatio(1.0, contentMode: .fit)
            .overlay(
                Image(imageName)
                    .resizable()
                    .aspectRatio(aspectRatio, contentMode: .fill)
                    .background(Color.gray100)
                    .tag(id)
            )
            .clipped()
    }
}

 

이제 cornerRadius를 적용시켜보자.

struct SquareImageView: View {
    var id: Int
    var imageName: String
    var aspectRatio: CGFloat?

    var body: some View {
        Color.clear
            .aspectRatio(1.0, contentMode: .fit)
            .overlay(
                Image(imageName)
                    .resizable()
                    .aspectRatio(aspectRatio, contentMode: .fill)
                    .background(Color.gray100)
                    .tag(id)
            )
            .clipped()
            .cornerRadius(50)
    }
}

잘 된다.