ios - 具有多个路径的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()
}