SwiftUI 에서 삼각형을 그리는 방법(역삼각형, 말풍선 포함)

안녕하세요. 도미닉입니다.

 

오늘은 SwiftUI 에서 삼각형을 그리는 방법을 공유하겠습니다.

 

아래 코드를 구글링해서 얻을 수 있었습니다.

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))

        return path
    }
}

 

이 코드를 실행해보았습니다.

삼각형 하나가 잘 그려졌습니다.

 

보통 이렇게 삼각형을 그리지는 않겠죠? 조금 더 작고 이쁜 삼각형을 그려보겠습니다.

 

네 위에 처럼 이쁘고 깜찍한 삼각형을 그렸습니다.

 

 

 

디자인에 따라 역삼각형을 그려야할 경우도 있을 수 있습니다.

위에 코드와 같이 Triangle 구조체에 rect.minX 등을 적절히 조정하여 역삼각형을 얻을 수 있었습니다.

 

코드는 아래와 같습니다.

 

struct InvertedTriangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))

        return path
    }
}

 

이 역삼각형이 필요했던 이유가 저는 말풍선을 그려야 했었습니다.

 

말풍선을 그려보겠습니다.

위 코드와 같이 텍스트 아래에 역삼각형을 배치하여 말풍선을 그려볼 수 있습니다.

 

감사합니다.

 

참고 : https://www.hackingwithswift.com/books/ios-swiftui/paths-vs-shapes-in-swiftui

Paths vs shapes in SwiftUI - a free Hacking with iOS: SwiftUI Edition tutorial