SwiftUI Path .closeSubpath() 与 UIBezierPath .close() 的工作方式不同 [英] SwiftUI Path .closeSubpath() not working the same way as UIBezierPath .close()

问题描述

我正在尝试使用 SwiftUI 绘制以下形状:

在 SwiftUI 之前，我只需要创建一个 UIBezierPath，用 addArc 添加角，然后最后调用 close()，但是在 SwiftUI Path 上调用 closeSubpath 时我没有得到相同的结果.

这是我的代码:

<预><代码>路径{路径输入让宽度:CGFloat = 23让高度:CGFloat = 24让箭头宽度 = 高度/2.0让cornerRadius = 高度/7.5path.addArc(center: CGPoint(x: width - cornerRadius, y:cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: -90), endAngle: .zero, 顺时针: true)path.addLine(to: CGPoint(x: width, y: height - cornerRadius))path.addArc(center: CGPoint(x: width - cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: .zero, endAngle: Angle(degrees: 90), 顺时针: true)path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 135), 顺时针: true)path.addArc(center: CGPoint(x: cornerRadius, y: height/2.0), radius: cornerRadius, startAngle: Angle(degrees: 135), endAngle: Angle(degrees: 225), 顺时针: true)path.addArc(center: CGPoint(x: arrowWidth +cornerRadius, y:cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: 225), endAngle: Angle(degrees: -90), 顺时针: true)path.closeSubpath()}.foregroundColor(.red)

提前致谢！

解决方案

应该通过Shape来绘制，指定rect为path，如下面的demo

注意:也固定顺时针方向

struct NewShape_Previews: PreviewProvider {静态 var 预览:一些视图 {新形状().frame(宽:100，高:48).foregroundColor(颜色.红色)}}结构新形状:形状{func path(in rect: CGRect) ->小路 {路径{路径输入让宽度:CGFloat = rect.width让高度:CGFloat = rect.height让箭头宽度 = 高度/2.0让cornerRadius = 高度/7.5path.addArc(center: CGPoint(x: width - cornerRadius, y:cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: -90), endAngle: .zero, 顺时针: false)path.addLine(to: CGPoint(x: width, y: height - cornerRadius))path.addArc(center: CGPoint(x: width - cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: .zero, endAngle: Angle(degrees: 90), 顺时针: false)path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 135), 顺时针: false)path.addArc(center: CGPoint(x: cornerRadius, y: height/2.0), radius: cornerRadius, startAngle: Angle(degrees: 135), endAngle: Angle(degrees: 225), 顺时针: false)path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y:cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: 225), endAngle: Angle(degrees: -90), 顺时针: false)}}}

I'm trying to draw the following shape with SwiftUI:

Before SwiftUI I just had to create a UIBezierPath, add the corners with addArc and then finally call close(), but I don't get the same result when calling closeSubpath on SwiftUI Path.

Here's my code:

            Path { path in
                let width: CGFloat = 23
                let height: CGFloat = 24
                let arrowWidth = height / 2.0
                let cornerRadius = height / 7.5

                path.addArc(center: CGPoint(x: width - cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: -90), endAngle: .zero, clockwise: true)
                path.addLine(to: CGPoint(x: width, y: height - cornerRadius))
                path.addArc(center: CGPoint(x: width - cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: .zero, endAngle: Angle(degrees: 90), clockwise: true)
                path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y: height - cornerRadius), radius:  cornerRadius, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 135), clockwise: true)
                path.addArc(center: CGPoint(x: cornerRadius, y: height / 2.0), radius: cornerRadius, startAngle: Angle(degrees: 135), endAngle: Angle(degrees: 225), clockwise: true)
                path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: 225), endAngle: Angle(degrees: -90), clockwise: true)
                path.closeSubpath()
            }
            .foregroundColor(.red)

Thanks in advance!

解决方案

It should be drawn via Shape, which specifies rect for path, as in demo below

Note: also fixed clockwise direction

struct NewShape_Previews: PreviewProvider {
    static var previews: some View {
        NewShape()
            .frame(width: 100, height: 48)
            .foregroundColor(Color.red)
    }
}

struct NewShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            let width: CGFloat = rect.width
            let height: CGFloat = rect.height
            let arrowWidth = height / 2.0
            let cornerRadius = height / 7.5

            path.addArc(center: CGPoint(x: width - cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: -90), endAngle: .zero, clockwise: false)
            path.addLine(to: CGPoint(x: width, y: height - cornerRadius))
            path.addArc(center: CGPoint(x: width - cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: .zero, endAngle: Angle(degrees: 90), clockwise: false)
            path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y: height - cornerRadius), radius:  cornerRadius, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 135), clockwise: false)
            path.addArc(center: CGPoint(x: cornerRadius, y: height / 2.0), radius: cornerRadius, startAngle: Angle(degrees: 135), endAngle: Angle(degrees: 225), clockwise: false)
            path.addArc(center: CGPoint(x: arrowWidth + cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: Angle(degrees: 225), endAngle: Angle(degrees: -90), clockwise: false)
        }
    }
}

这篇关于SwiftUI Path .closeSubpath() 与 UIBezierPath .close() 的工作方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！