将圆角半径设置为负值以实现凹角

Question

我用这段代码来圆我的 UIView:

extension UIView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
        self.layer.masksToBounds = false
    }
}

然后我用了view.roundCorners([.topLeft, .topRight], radius: view.frame.width/3)

现在这个圆角是凸的，我想要相反的。这意味着顶角将保持在相同的点，但它们之间的线向视图内部变圆。我尝试通过使用负值调用上述函数来实现此目的，但这导致什么也没有发生。

我添加了一张图片来证明我的目标。我怎么能做到这一点？

Answer 1

您需要创建自己的 UIBezierPath。对于凹端，addQuadCurve(to:controlPoint:)就派上用场了。

这里我使用参数depth来控制曲线的数量：

extension UIView {

    func concaveEnds(depth: CGFloat) {
        let width = self.bounds.width
        let height = self.bounds.height

        let path = UIBezierPath()
        path.move(to: CGPoint.zero)
        path.addLine(to: CGPoint(x: width, y: 0))
        path.addQuadCurve(to: CGPoint(x: width, y: height), controlPoint: CGPoint(x: width - height * depth, y: height / 2))
        path.addLine(to: CGPoint(x: 0, y: height))
        path.addQuadCurve(to: CGPoint.zero, controlPoint: CGPoint(x: height * depth, y: height / 2))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
        self.layer.masksToBounds = false
    }
}

游乐场演示：

let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 100))
view.backgroundColor = .red

view.concaveEnds(depth: 0.4)

将圆角半径设置为负值以实现凹角

Setting corner radius as a negative value to achieve concave corners

calayer

swift