ios 如何圆UIBezierPath线边缘？

20jt8wwn 于 2023-05-02 发布在 iOS

关注(0)|答案(3)|浏览(190)

我有一条由UIBezierPath绘制的线：

let line = CAShapeLayer()
line.path = UIBezierPath(arcCenter: center,
                          radius: radius,
                          startAngle: CGFloat(114.0/180.0) * .pi,
                          endAngle: .pi,
                          clockwise: true).cgPath
line.lineWidth = LINE_WIDTH
line.strokeColor = UIColor.red.withAlphaComponent(0.9).cgColor
line.fillColor = UIColor.clear.cgColor

我尝试通过添加一些新的CAShapeLayer()来绕过这个拐角：

let corner = CAShapeLayer()
corner.path = UIBezierPath(arcCenter: coordByCorner(114.0*1.00035),
                           radius: LINE_WIDTH/2,
                           startAngle: CGFloat(114.0/180.0) * .pi,
                           endAngle: CGFloat(114.0/180.0 + 1) * .pi,
                           clockwise: false).cgPath
corner.strokeColor = UIColor.clear.cgColor
corner.fillColor = UIColor.red.withAlphaComponent(0.9).cgColor

line.addSublayer(corner)

但我认为这是一个糟糕的变体，当我改变图层的颜色时，颜色会随着不同的timeInterval而变化。
而且，这一切看起来像这样：

P.S.：1.00035有消除层之间差距。alpha必须〈1。0（0.1 - 0.9）。那么如何在保持阿尔法的同时做到这一点呢？

ios

来源：https://stackoverflow.com/questions/48765388/how-to-round-uibezierpath-line-edge

3条答案

按热度按时间

ttygqcqt1#

通过添加kCALineCapRound解决了问题

let line = CAShapeLayer()
line.path = UIBezierPath(arcCenter: center,
                      radius: radius,
                      startAngle: CGFloat(114.0/180.0) * .pi,
                      endAngle: .pi,
                      clockwise: true).cgPath
line.lineWidth = LINE_WIDTH
line.strokeColor = UIColor.red.withAlphaComponent(0.9).cgColor
line.fillColor = UIColor.clear.cgColor
line.lineCap = kCALineCapRound // this parameter solve my problem

赞(0）回复(0）举报 2023-05-02

qltillow2#

一个简单的方法是创建一个向内移动所需cornerRadius的路径，用两倍粗的线画它，并应用圆形线连接样式。

let layer = CAShapeLayer()

layer.strokeColor = UIColor.lightGray.cgColor
layer.fillColor = UIColor.lightGray.cgColor
layer.lineWidth = 2.0 * cornerRadius
layer.lineJoin = kCALineJoinRound
layer.path = getSemicirclePath(
    arcCenter: arcCenter,
    radius: radius,
    cornerRadius: cornerRadius
)

func getSemicirclePath(arcCenter: CGPoint, radius: CGFloat, cornerRadius: CGFloat) -> CGPath {
    let path = UIBezierPath(
        arcCenter: CGPoint(x: arcCenter.x, y: arcCenter.y - cornerRadius),
        radius: radius - cornerRadius,
        startAngle: .pi,
        endAngle: 2.0 * .pi,
        clockwise: true
    )
    path.close()
    return path.cgPath
}

下面是示例结果：