UIBezierPath和CAShapeLayer

Question

我想得到一个带有圆角上角的矩形。为此，我使用了UIBezierPath和CAShapeLayer。

问题是左角正确舍入，而右角不是正确，而且我不明白为什么会这样，这是我做错了。

对我来说，使当前代码有效，通过cornerRadius或其他方式解决问题是很重要的，不幸的是，这对我不感兴趣。

当前结果图像

和

必需的结果图片 。

import UIKit

func getRadians(from degrees: CGFloat) -> CGFloat {
    return degrees * CGFloat.pi / 180
}

let view = UIView()
view.backgroundColor = .green

let width: CGFloat = 800
let height: CGFloat = 400

view.frame = CGRect(x: 0, y: 0, width: width, height: height)

let cornersRadius: CGFloat = 100
var path = UIBezierPath()

path.move(to: CGPoint(x: 0, y: 0))

path.addLine(to: CGPoint(x: width, y: 0))
path.addLine(to: CGPoint(x: width, y: height))

path.addLine(to: CGPoint(x: 0, y: height))
path.addLine(to: CGPoint(x: 0, y: 0))

path = path.reversing()

let topLeft = UIBezierPath()
topLeft.move(to: CGPoint(x: 0, y: cornersRadius))

topLeft.addLine(to: CGPoint(x: 0, y: 0))
topLeft.addLine(to: CGPoint(x: cornersRadius, y: 0))

topLeft.addArc(withCenter: CGPoint(x: cornersRadius, y: cornersRadius), radius: cornersRadius, startAngle: getRadians(from: 270), endAngle: getRadians(from: 180), clockwise: false)
topLeft

let topRight = UIBezierPath()
topRight.move(to: CGPoint(x: width, y: cornersRadius))

topRight.addLine(to: CGPoint(x: width, y: 0))
topRight.addLine(to: CGPoint(x: width - cornersRadius, y: 0))

topRight.addArc(withCenter: CGPoint(x: width - cornersRadius, y: cornersRadius), radius: cornersRadius, startAngle: getRadians(from: 270), endAngle: getRadians(from: 0), clockwise: true)
topRight

path.append(topLeft)
path.append(topRight)

let layer = CAShapeLayer()
layer.path = path.cgPath

view.layer.mask = layer
view

Answer 1

有一种更简单的方法可以实现。您可以使用以下方法：

init(roundedRect:byRoundingCorners:cornerRadii:) for UIBezierPath

有关Apple documentation中的更多信息

用法示例ls在这里：

let cornerRadius = CGFloat(10.0)
let roundedCorners = roundedCorners.union([.topLeft, .topRight])

let path = UIBezierPath(roundedRect:maskRect, byRoundingCorners:roundedCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

let maskLayer = CAShapeLayer()
maskLayer.frame = YOUR_VIEW_TO_MASK.bounds
maskLayer.path = maskPath.cgPath

YOUR_VIEW_TO_MASK.layer.mask = maskLayer

Answer 2

使用单个UIBezierPath：

let largeRadius: CGFloat = 100.0
let smallRadius: CGFloat = 12.0

let path = UIBezierPath()

// Bottom left
path.move(to: CGPoint(x: 0, y: height - smallRadius)
path.addLine(to: CGPoint(x: 0, y: largeRadius)

// Top left
path.addArc(withCenter: CGPoint(x: largeRadius, y: largeRadius), radius: largeRadius, startAngle: getRadians(from: 270), endAngle: getRadians(from: 0, clockwise: true))

// Top right
path.addLine(to: CGPoint(x: width - largeRadius, y: 0)
path.addArc(withCenter: CGPoint(x: width - largeRadius, y: largeRadius), radius: largeRadius, startAngle: getRadians(from: 0), endAngle: getRadians(from: 90))

// EITHER (rounded bottom corners):
// Bottom right 
path.addLine(to: CGPoint(x: width, y: height - smallRadius)
path.addArc(withCenter: CGPoint(x: width - smallRadius, y: height - smallRadius), radius: smallRadius, startAngle: getRadians(from: 90), endAngle: getRadians(from: 180))

// Bottom left
path.addLine(to: CGPoint(x: smallRadius, y: height - smallRadius))
path.addArc(withCenter: CGPoint(x: smallRadius, y: height - smallRadius), radius: smallRadius, startAngle: getRadians(from: 180), endAngle: getRadians(from: 270))

// OR (square bottom corners):
// Bottom right
path.addLine(to: CGPoint(x: width, y: height))

// Bottom left
path.addLine(to: CGPoint(x: 0, y: height))
path.close()
let layer = CAShapeLayer()
layer.path = path.cgPath

请注意，此代码提供了一种在底部添加较小的圆角的方法，而不是使用单独的图层蒙版以及使用方形的底部角。

我也在对您的getRadians()函数进行假设。