swiftui - 如何在我的自定义形状上圆化这些角？

Question

我制作了一个自定义的“倾斜”矩形，我想将其变成圆角“倾斜”矩形。这是迄今为止的图片:

struct SlantedRectangle: Shape {
    func path(in rect: CGRect) -> Path {
        return Path { path in
            path.move(to: CGPoint(x: rect.width, y: 30))
            path.addLine(to: CGPoint(x: rect.width, y: rect.height))
            path.addLine(to: CGPoint(x: 0, y: rect.height))
            path.addLine(to: CGPoint(x: 0, y: 0))
        }
    }
}

如何将左上角和右上角圆角化？

Answer 1

对于圆角，您可以使用 addArc Path 的方法。

struct SlantedRectangle: Shape {
    let slanted: CGFloat
    let radius: CGFloat
    
    func path(in rect: CGRect) -> Path {
        return Path { path in
            path.move(to: CGPoint(x: rect.width - radius, y: slanted))
            path.addArc(center: CGPoint(x: rect.width - radius, y: slanted + radius), radius: radius, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false)
            path.addLine(to: CGPoint(x: rect.width, y: rect.height))
            path.addLine(to: CGPoint(x: 0, y: rect.height))
            path.addLine(to: CGPoint(x: 0, y: radius))
            path.addArc(center: CGPoint(x: radius, y: radius), radius: radius, startAngle: Angle(degrees: 180), endAngle: Angle(degrees: 270), clockwise: false)
            path.closeSubpath()
        }
    }
}

现在像这样创建您的SlantedRectangle。

SlantedRectangle(slanted: 30, radius: 30)

Preview