UIBezierPath具有多个路径，不连接具有斜角类型的线

Question

可能是一个简单的错误，但我不知道发生了什么。

我有3个要合并为1的UIBezierPaths。我希望路径的任一端都具有圆角，中间路径具有斜角lineJoinStyle。但是，最后一条路径似乎有一个舍入的lineJoinStyle，我似乎无法修复。

这里是我的意思的图像。

这是我正在使用的代码：

    override func draw(_ rect: CGRect) {

        let leftQuarterPoint: CGPoint = CGPoint(x: 15, y: rect.height / 2)
        let rightQuarterPoint: CGPoint = CGPoint(x: (rect.width - (rect.width / 4)), y: rect.height / 2)
        let leftPath = UIBezierPath()
        leftPath.move(to: leftQuarterPoint)
        let firstPoint = CGPoint(x: rect.width / 4, y: rightQuarterPoint.y)
        Global.Colors.red.setStroke()

        leftPath.addCurve(to: firstPoint, controlPoint1: CGPoint(x: leftQuarterPoint.x, y: rightQuarterPoint.y), controlPoint2: CGPoint(x: firstPoint.x, y: firstPoint.y))
        leftPath.lineWidth = 20
        leftPath.lineCapStyle = .round
        leftPath.stroke()


        let middlePath = UIBezierPath()

        Global.Colors.orange.setStroke()
        middlePath.move(to: leftPath.currentPoint)
        middlePath.addCurve(to: rightQuarterPoint, controlPoint1: CGPoint(x: rect.width / 2, y: rect.height / 2), controlPoint2: CGPoint(x: rect.width / 2, y: rect.height / 2))
        middlePath.lineWidth = 20
        middlePath.lineCapStyle = .square
        middlePath.lineJoinStyle = .bevel
        middlePath.stroke()


        let rightPath = UIBezierPath()
        Global.Colors.green.setStroke()

        rightPath.move(to: middlePath.currentPoint)

        rightPath.addCurve(to: CGPoint(x: rect.width - 15, y: (rect.height / 2)), controlPoint1: CGPoint(x: rightQuarterPoint.x, y: rightQuarterPoint.y), controlPoint2: CGPoint(x: rect.width-15, y: rect.height / 2))
        rightPath.lineWidth = 20
        rightPath.lineCapStyle = .round
        rightPath.lineJoinStyle = .bevel
        rightPath.stroke()

        let path = UIBezierPath()


        path.append(leftPath)
        path.append(middlePath)
        path.append(rightPath)


        path.lineWidth = 20

    }

对不起，如果我缺少简单的东西。

Answer 1

将这些行从代码中删除并将它们添加到绘制函数的末尾将为您工作，原因是边路径是圆形的，但它们与中间的路径重叠，因此，如果先拖拉侧面然后再绘制中间的路径它将隐藏圆角。

override func draw(_ rect: CGRect) {

       ...

        Global.Colors.green.setStroke()
        rightPath.stroke()

        Global.Colors.red.setStroke()
        leftPath.stroke()

        Global.Colors.orange.setStroke()
        middlePath.stroke()
}

Answer 2

您的正确路径与中间路径重叠。只是在中间路径结束后才开始绘制正确的路径。将此行替换为rightPath.move。15将是您要开始绘制正确路径的值。

rightPath.move(to: CGPoint(x: middlePath.currentPoint.x + 15, y: middlePath.currentPoint.y))