在 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

我很容易得到這個：

這似乎很像你想要畫的東西。 它只是三個形狀層。 你已經有了一個，所以你再添加兩個。