如何在 UIBezierPath Swift 中繪制這樣的曲線？

Question

我正在嘗試開發一個背景如下所示的屏幕：

在這里，我正在嘗試開發灰色彎曲背景，它也填充了屏幕的下部。 我對UIBezierPath很陌生，我試過這個：

class CurvedView: UIView {

//MARK:- Data Types

//MARK:- View Setup

override func draw(_ rect: CGRect) {
    
    let fillColor: UIColor = .blue
    let path = UIBezierPath()
    let y:CGFloat = 0
    
    print(rect.height)
    print(rect.width)
    
    path.move(to: CGPoint(x: .zero, y: 100))
    path.addLine(to: CGPoint(x: 60, y: 100))
    path.addCurve(to: .init(x: 100, y: 0), controlPoint1: .init(x: 125, y: 80), controlPoint2: .init(x: 50, y: 80))
    
    path.close()
    fillColor.setFill()
    path.fill()
    
}

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = .init(hex: "#dfe1e3")
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.backgroundColor = .init(hex: "#dfe1e3")
    
}
}

這段代碼給了我這個：

我遵循了很多教程，但我沒有得到確切的理解。 我知道對於這條曲線，我必須移動到(0,100) ，然后添加一條線，然后添加一條曲線，十延長線添加一條曲線，然后直線下曲線，然后直線並關閉。 但是，當我開始時，你可以看到藍線沒有覆蓋上部。 誰能幫幫我嗎？

Answer 1

這是我創建的一些示例，您可以更改值以使其更類似於您想要的

這是曲線中控制點如何工作的指南

注意：我在 viewDidload 中調用了這段代碼

let path = UIBezierPath()
        let fillColor = UIColor.blue
        
        let y: CGFloat = UIScreen.main.bounds.size.height
        let x: CGFloat = UIScreen.main.bounds.size.width
        let height: CGFloat = 200
        
        path.move(to: CGPoint(x: 0, y: y)) // bottom left
        path.addLine(to: CGPoint(x: 0, y: y - 20)) // top left
        path.addCurve(to: CGPoint(x: x, y: y - height), controlPoint1: CGPoint(x: x * 2 / 3, y: y), controlPoint2: CGPoint(x: x * 5 / 6, y: y - height * 6 / 5)) // curve to top right
        path.addLine(to: CGPoint(x: x, y: y)) // bottom right
        path.close() // close the path from bottom right to bottom left

        let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.fillColor = fillColor.cgColor

    view.layer.addSublayer(shapeLayer)

Answer 2

參考@aiwiguna

class CurvedView: UIView {

//MARK:- Data Types

//MARK:- View Setup

override func draw(_ rect: CGRect) {
    
  
    let path = UIBezierPath()
  
    
    let fillColor = UIColor.blue
            
            let y: CGFloat = UIScreen.main.bounds.size.height
            let x: CGFloat = UIScreen.main.bounds.size.width
            let height: CGFloat = 200
            
            path.move(to: CGPoint(x: 0, y: y)) // bottom left
            path.addLine(to: CGPoint(x: 0, y: y - 20)) // top left
            path.addCurve(to: CGPoint(x: x, y: y - height), controlPoint1: CGPoint(x: x * 2 / 3, y: y), controlPoint2: CGPoint(x: x * 5 / 6, y: y - height * 6 / 5)) // curve to top right
            path.addLine(to: CGPoint(x: x, y: y)) // bottom right
            path.close() // close the path from bottom right to bottom left

            let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.fillColor = fillColor.cgColor

    
    path.close()
    fillColor.setFill()
    path.fill()
    
}

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = .red
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.backgroundColor = .yellow
    
}
}