自定義圓角矩形形狀

Question

我正在開發一個帶有自定義 roundedRectangle Shape 的項目，它的一側有一個凸起，根據我的研究，我必須使用自定義路徑繪制一個形狀......但是我這樣做並不是很成功，並且我不明白如何創建它。

如果有人幫助我創建此附件中的形狀，我將不勝感激：

Answer 1

要繪制帶有圓角的自定義形狀， .addArc是你的朋友。

struct LabelShape: Shape {
    let cornerRadius: CGFloat
    let tabWidth: CGFloat
        
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: cornerRadius, y: rect.height))
        path.addArc(tangent1End: CGPoint(x: rect.width, y: rect.height), tangent2End: CGPoint(x: rect.width, y: 0), radius: cornerRadius)
        path.addArc(tangent1End: CGPoint(x: rect.width, y: 0), tangent2End: CGPoint(x: 0, y: 0), radius: cornerRadius)
        path.addArc(tangent1End: CGPoint(x: rect.width - tabWidth, y: 0), tangent2End: CGPoint(x: rect.width - tabWidth, y: rect.height), radius: cornerRadius)
        path.addArc(tangent1End: CGPoint(x: rect.width - tabWidth, y: cornerRadius * 2), tangent2End: CGPoint(x: 0, y: cornerRadius * 2), radius: cornerRadius)
        path.addArc(tangent1End: CGPoint(x: 0, y: cornerRadius * 2), tangent2End: CGPoint(x: 0, y: rect.height), radius: cornerRadius)
        path.addArc(tangent1End: CGPoint(x: 0, y: rect.height), tangent2End: CGPoint(x: rect.width, y: rect.height), radius: cornerRadius)
        return path
    }
}

你可以這樣使用：

struct ContentView: View {
    
    var body: some View {
        ZStack(alignment: .topTrailing) {
            LabelShape(cornerRadius: 10, tabWidth: 110)
                .stroke(.red)
                .frame(width: 300, height: 100)
            HStack(alignment: .firstTextBaseline, spacing: 4) {
                Text("01:59:43")
                    .font(.system(size: 14, weight: .bold))
                Text("Hours")
                    .font(.system(size: 10, weight: .regular))
            }
            .padding(4)
        }
    }
}

有關此版本的addArc工作原理的詳細解釋，請參閱https://stackoverflow.com/a/71683201/123632