如何在Swift中基于变量参数使用贝塞尔曲线绘制两个半圆

你已经计算得到的InRadius（内半径）、OutRadius（外半径）、Grades（角度）三个参数可直接传入UIBezierPath的圆弧构造方法实现绘制，注意Swift中绘制用的是弧度单位，需要先做角度转弧度的换算。

1. 自定义双圆弧绘制视图 #

你可以通过继承UIView重写绘制方法实现自定义绘制逻辑，参考代码如下：

import UIKit

class DoubleArcView: UIView {
    // 对外暴露参数，赋值后自动触发重绘
    var inRadius: Double = 0 {
        didSet { setNeedsDisplay() }
    }
    var outRadius: Double = 0 {
        didSet { setNeedsDisplay() }
    }
    var grades: Double = 0 {
        didSet { setNeedsDisplay() }
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        // 取视图中心点作为圆弧的圆心
        let arcCenter = CGPoint(x: bounds.midX, y: bounds.midY)
        // 角度转弧度
        let endRadian = grades * .pi / 180
        // 可根据需求调整起始角度，默认0是从水平正右方向开始绘制
        let startRadian: Double = 0
        
        // 绘制外半径圆弧
        let outArcPath = UIBezierPath(arcCenter: arcCenter, radius: outRadius, startAngle: startRadian, endAngle: endRadian, clockwise: true)
        UIColor.red.setStroke()
        outArcPath.lineWidth = 2
        outArcPath.stroke()
        
        // 绘制内半径圆弧
        let inArcPath = UIBezierPath(arcCenter: arcCenter, radius: inRadius, startAngle: startRadian, endAngle: endRadian, clockwise: true)
        UIColor.blue.setStroke()
        inArcPath.lineWidth = 2
        inArcPath.stroke()
    }
}

2. 绑定到你的计算逻辑 #

在你原有计算参数的Calcular方法末尾，新增参数赋值逻辑即可触发绘制，参考代码如下：

@IBAction func Calcular(_ sender: Any) {
    let a = Double(dmenor.text!)
    let b = Double(DMayor.text!)
    let c = Double(Altura.text!)
    
    if a != nil && b != nil && c != nil{
        let h = Double(b! * c!) / (b! - a!)
        let l = Double(sqrt((b! * b! / 4) + (h * h)))
        let ñ = Double(h-c!)
        let i = Double(sqrt((a! * a! / 4) + (ñ * ñ)))
        let g = Double(b! * 180) / (l)

        InRadius.text  = String(format:"%.1f", i)
        OutRadius.text  = String(format:"%.1f", l)
        Grades.text  = String(format:"%.1f", g)
        
        // 新增：给自定义绘制视图赋值触发重绘
        guard let inR = Double(InRadius.text!),
              let outR = Double(OutRadius.text!),
              let grade = Double(Grades.text!) else { return }
        // 此处doubleArcView是你提前创建的DoubleArcView实例
        doubleArcView.inRadius = inR
        doubleArcView.outRadius = outR
        doubleArcView.grades = grade
    }
}

常见调整说明 #

• 如果需要圆弧从正上方开始绘制，将代码中的startRadian设置为-.pi / 2即可
• 可以自行修改lineWidth（线宽）、UIColor（绘制颜色）参数适配你的UI需求
• 若需要填充两个圆弧之间的区域形成扇形环，可将两条弧的端点用直线连接后调用fill()方法实现填充
• 确保自定义绘制视图的宽高大于2倍外半径，避免圆弧超出视图范围被裁剪

内容的提问来源于stack exchange，提问作者Luis Olivare