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

Question

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

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

 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)
    }

Answer 1

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

    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 属性用于设置进度线的起点和终点

Answer 2

我很容易得到这个：

这似乎很像你想要画的东西。 它只是三个形状层。 你已经有了一个，所以你再添加两个。