如何在SWIFT中绘制自定义的圆角矩形？

Question

我正在尝试通过编程绘制上图所示的形状。

这个形状有自定义的圆角。

view.layer.cornerRadius = some value less than half diameter

这个方法不管用。设置cornerRadius会在每一边绘制一条直线（如底部图片所示），但是我想绘制的形状根本没有直线，也不是椭圆形。

我尝试了下面的代码，但没有成功。这段代码只会绘制一个椭圆形。

var path = UIBezierPath(ovalIn: CGRect(x: 000, y: 000, width: 000, height: 000))

我认为这不能通过设置cornerRadius来实现。

应该还有其他的方法。

我不知道应该使用哪个类和如何使用。

请问有人能给我一些方向吗？

谢谢！

- Vincent Gigandet

---

可能是[如何在Swift中绘制简单的圆角矩形]（https://dev59.com/i10a5IYBdhLWcg3waH_j）的重复问题。 - Sina

不是这样的。我想要绘制的形状既不是矩形也不是椭圆形。通过设置cornerRadius无法实现这一点。 - Vincent Gigandet

你好 @VincentGigandet - 你要找的是二次方程。事实上，你碰巧遇到了一个非常有趣的问题：https://dev59.com/WlUM5IYBdhLWcg3wKNyB - Fattie

请注意，这可能是您想要的：https://dev59.com/WlUM5IYBdhLWcg3wKNyB#56439911。 - Fattie

其次，这个错误的答案 https://dev59.com/WlUM5IYBdhLWcg3wKNyB#49334551 中有你可能想要的确切示例代码。同时，只需搜索“addQuadCurveToPoint”即可找到许多示例。祝好运！ - Fattie

@Fattie，多亏了你，我解决了这个问题！ - Vincent Gigandet

Answer 1

我通过绘制一个二次函数来完成这个任务。

let dimention: CGFloat = some value

let path = UIBezierPath()
    path.move(to: CGPoint(x: dimension/2, y: 0))
    path.addQuadCurve(to: CGPoint(x: dimension, y: dimension/2),
                      controlPoint: CGPoint(x: dimension, y: 0))
    path.addQuadCurve(to: CGPoint(x: dimension/2, y: dimension),
                      controlPoint: CGPoint(x: dimension, y: dimension))
    path.addQuadCurve(to: CGPoint(x: 0, y: dimension/2),
                      controlPoint: CGPoint(x: 0, y: dimension))
    path.addQuadCurve(to: CGPoint(x: dimension/2, y: 0),
                      controlPoint: CGPoint(x: 0, y: 0))
    path.close()

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 1.0
    shapeLayer.position = CGPoint(x: 0, y: 0)

    self.someView.layer.addSublayer(shapeLayer)

- Vincent Gigandet

Answer 2

您需要在代码中添加 cipsToBounds 以获取带有给定圆角半径的图像。
尝试以下代码：

 view.layer.cornerRadius = some value 
 view.clipsToBounds = true

- Angel F Syrus

---

我相信 clipsToBounds 与这个问题无关。不管怎样，还是谢谢。 - Vincent Gigandet

Answer 3

您可以使用以下路径来设置自定义形状

  let path =  UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 150, height: 150), byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8))

您可以根据您的需求和UI更改宽度和高度

- Prashant Tukadiya

---

这与设置cornerRadius相同，可以使直线变得圆润。 - Vincent Gigandet

Answer 4

class RoundView: UIView {
    var roundCorner: UIRectCorner? = nil
    var roundRadius:CGFloat = 0

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        Bundle.main.loadNibNamed(“nib name”, owner: self, options: nil))
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        isUserInteractionEnabled = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if roundCorner != nil {
            // self.roundCorners([.topRight, .bottomLeft, .bottomRight], radius: 15)
            self.roundCorners(roundCorner!, radius: roundRadius)
        }
    }
}

- Ansersion

---

设置roundRadius和这段代码有什么区别？我看两者效果相同。 - Vincent Gigandet