在 Swift 中创建椭圆，周围有一个进度条

如何解决在 Swift 中创建椭圆，周围有一个进度条

我正在尝试设计类似于此图像的内容，其中有一个椭圆形，然后在它周围有一个进度条。我已经能够用边框绘制一个古怪的椭圆形，但我完全迷失在它的进度条部分，任何帮助将不胜感激。这是我的椭圆代码和输出是什么

第一张图是代码输出的，第二张图是目标

 func setupOvalView(){
                
        let path = UIBezierPath(ovalIn: CGRect(x: self.ovalView.frame.origin.x,y: self.ovalView.frame.origin.y,width: self.ovalView.frame.width,height: self.ovalView.frame.height))
        
        
        let rect = CGRect(x: self.ovalView.frame.origin.x + 20,y: self.ovalView.frame.origin.y + 20,width: self.ovalView.frame.width - 40,height: self.ovalView.frame.height - 40)
        
        let circlePath = UIBezierPath(ovalIn: rect)
        path.append(circlePath)
        path.usesEvenOddFillRule = true
        
        
        
        let fillLayer = CAShapeLayer()
        fillLayer.path = path.cgPath
        
        fillLayer.fillRule = .evenOdd
        fillLayer.fillColor = UIColor.lightGray.cgColor
        fillLayer.opacity = 0.5
        view.layer.addSublayer(fillLayer)
    }

解决方法

这是如何绘制与您附加的图片中的椭圆相似的椭圆的一部分：

    let path = UIBezierPath(ovalIn: CGRect(x: 10,y: 10,width: 100,height: 200))
    let layer = CAShapeLayer()
    layer.path = path.cgPath
    layer.fillColor = UIColor.clear.cgColor
    layer.strokeColor = UIColor.red.cgColor
    layer.strokeStart = 0.5
    layer.strokeEnd = 0.8
    layer.lineWidth = 10
    layer.lineCap = .round
    view.layer.addSublayer(layer)

strokeStart 和strokeEnd 属性用于设置进度线的起点和终点

,

我很容易得到这个：

这似乎很像您要绘制的内容。它只是三个形状层。你已经有了一个，所以你再添加两个。