iOS Swift中如何绘制如图所示的自定义曲线？

问题分析 #

你的代码中draw(_:)方法的路径逻辑有误，导致曲线形状不符合预期。当前路径是从左下角到右下角，再曲线到左上角，无法形成顶部中间向上凸的弧形。同时commonInit()方法未被调用，会导致Nib加载失效。

修正方案 #

1. 重构UIBezierPath路径

要实现顶部中间向上凸的弧形，需按以下逻辑构建路径：

• 从视图左下角出发，直线到左上角
• 添加曲线连接到右上角，通过控制点让中间区域向上拱起
• 直线回到右下角，最后闭合路径

2. 修复Nib加载逻辑

在两个初始化方法中调用commonInit()，确保Nib资源正确加载。

修正后的完整代码 #

import UIKit

class FooterView: UIView {

    @IBOutlet weak var footerImageView: UIImageView!

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        let fillColor = UIColor.blue
        
        let width = rect.size.width
        let height = rect.size.height
        // 弧形凸起高度，可按需调整
        let curveHeight: CGFloat = height * 0.2

        // 起点：视图左下角
        path.move(to: CGPoint(x: 0, y: height))
        // 直线到视图左上角
        path.addLine(to: CGPoint(x: 0, y: 0))
        // 添加曲线到视图右上角，控制点实现向上凸效果
        path.addCurve(to: CGPoint(x: width, y: 0), 
                      controlPoint1: CGPoint(x: width / 3, y: -curveHeight), 
                      controlPoint2: CGPoint(x: width * 2 / 3, y: -curveHeight))
        // 直线到视图右下角
        path.addLine(to: CGPoint(x: width, y: height))
        // 闭合路径
        path.close()

        fillColor.setFill()
        path.fill()
    }

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

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

    private func commonInit(){
        Bundle.main.loadNibNamed("FooterView", owner: self, options: nil)
        // 若需显示图片，取消以下两行注释
        footerImageView.contentMode = .scaleAspectFill
        addSubview(footerImageView)
    }
}

关键说明 #

• 控制点调整：curveHeight控制弧形凸起的高度，可根据视觉需求修改数值，改变弧形的弯曲程度。
• 坐标系注意：UIKit坐标系y轴向下，因此向上凸起需要将控制点的y坐标设为负数，让曲线超出视图顶部边界，形成向上拱的视觉效果。
• Nib加载：必须在两个初始化方法中调用commonInit()，否则自定义视图的Nib资源无法正确加载。

内容的提问来源于stack exchange，提问作者Dimpy-iRoid