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

Question

可能是一个简单的错误，但我无法弄清楚发生了什么。

我有 3 个 UIBezierPaths，我要合并到 1 个。我希望路径的两端有一个圆边，中间路径有一个斜角 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

从代码中删除这些行并将它们添加到 draw func 的末尾对你有用，原因是边路径是圆形的但它们与中间路径重叠所以如果你先画边然后画中间的会隐藏圆角。

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))

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

UIBezierPath with multiple paths not joining lines with bevel type

ios

swift

uibezierpath