[SwiftUI] Shape path로 Tooltip 그리기

실제 구현 화면

struct TipBubbleShape: Shape, InsettableShape {
    private var insetValue = 0.0
    
    func inset(by amount: CGFloat) -> some InsettableShape {
        var bubble = self
        bubble.insetValue = amount
        return bubble
    }
    
    func path(in rect: CGRect) -> Path {
        let width = rect.width
        let height = rect.height
        let radius = rect.height / 2.0
        let midpoint = radius * 0.42
        
        let path = Path { p in
            p.move(to: CGPoint(x: 25, y: height))
            p.addLine(to: CGPoint(x: width - radius, y: height))
            // bottomTrailing start
            p.addCurve(to: CGPoint(x: width, y: height - radius),
                       control1: CGPoint(x: width - midpoint, y: height),
                       control2: CGPoint(x: width, y: height - midpoint))
            p.addLine(to: CGPoint(x: width, y: radius))
            // topTrailing start
            p.addCurve(to: CGPoint(x: width - radius, y: 0),
                       control1: CGPoint(x: width, y: midpoint),
                       control2: CGPoint(x: width - midpoint, y: 0))
            p.addLine(to: CGPoint(x: radius, y: 0))
            // topLeading start
            p.addCurve(to: CGPoint(x: 0, y: radius),
                       control1: CGPoint(x: midpoint, y: 0),
                       control2: CGPoint(x: 0, y: midpoint))
            p.addLine(to: CGPoint(x: 0, y: radius))
            // bottomLeading start
            p.addCurve(to: CGPoint(x: radius, y: height),
                       control1: CGPoint(x: 0, y: height - midpoint),
                       control2: CGPoint(x: midpoint, y: height))
            p.addLine(to: CGPoint(x: radius, y: height))
            p.move(to: CGPoint(x: (width / 2.0) - midpoint, y: height))
            
            // triangle start
            p.addLine(to: CGPoint(x: (width / 2.0), y: height + 7))
            p.addLine(to: CGPoint(x: (width / 2.0) + midpoint, y: height))
        }
        return path
    }
}

 

실제 적용은 이렇게

struct ContentView: View {
    let title: String
    
    var body: some View {
        ZStack {
            Text("우와 이제 나 툴팁도 그린다.")
                .foregroundStyle(.white)
                .padding(.horizontal, 21)
                .padding(.vertical, 10)
                .background(
                    TipBubbleShape()
                        .inset(by: 7)
                        .shadow(color: .black.opacity(0.1), radius: 10, x: 0, y: 4)
                        .foregroundStyle(.orange)
                )
        }
    }
}

 

My life saver

https://ios-development.tistory.com/1147

[iOS - SwiftUI] Shape, InsettableShape 사용 방법(Custom Shape, inset(by:))

https://prafullkumar77.medium.com/swiftui-creating-a-chat-bubble-like-imessage-using-path-and-shape-67cf23ccbf62

SwiftUI: Creating a Chat Bubble (like iMessage) using Path and Shape