我的 CAShapeLayer 在我的視圖中沒有很好地居中

Question

我不想在灰色視圖中畫一個圓圈，但它沒有完全居中，我不明白為什么。

我得到我的視圖的中心（circleView）並將它放在圓的中心然后我有 CAShapeLayers 到 superview

let shapeLayer = CAShapeLayer()
let shapeLayer2 = CAShapeLayer()

let center = circleView.center
let height = circleView.frame.height

// First circle

let circularPath = UIBezierPath(arcCenter: center, radius: height/2-20 , startAngle: -CGFloat.pi / 2, endAngle: (2 * CGFloat.pi) - (CGFloat.pi / 2), clockwise: true)
shapeLayer.path = circularPath.cgPath
shapeLayer.lineWidth = 20
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor(named: "color1")!.cgColor
shapeLayer.strokeEnd = 1
        
view.layer.addSublayer(shapeLayer)
        

// Second circle

let circularPath2 = UIBezierPath(arcCenter: center, radius: height/2-20, startAngle: -CGFloat.pi / 2, endAngle: (2 * CGFloat.pi) - (CGFloat.pi / 2), clockwise: true)
shapeLayer2.path = circularPath2.cgPath
shapeLayer2.lineWidth = 20
shapeLayer2.fillColor = UIColor.clear.cgColor
shapeLayer2.strokeColor = UIColor(named: "color")!.cgColor
shapeLayer2.strokeEnd = 0.5
        
view.layer.addSublayer(shapeLayer2)

但這就是我得到的

我試圖像這樣獲得我的觀點的中心：

CGPoint(x: circleView.bounds.midX, y: circleView.bounds.midY)

並嘗試將 shapeLayer 添加到我的 circleView 而不是 superview 但它也不起作用。 你有什么主意嗎？

Answer 1

管理圖層的最佳方式是UIView並在layoutSubviews()中設置大小、路徑點等。

這是一個基於您的代碼的簡單示例（我不知道您的“顏色”或“顏色 1”是什么，所以我將它們設置為綠色和系統綠色）：

class CircleView: UIView {
    
    private let shapeLayer = CAShapeLayer()
    private let shapeLayer2 = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        
        // set shape layer properties and add them as sublayers
        
        shapeLayer.lineWidth = 20
        shapeLayer.fillColor = UIColor.clear.cgColor
        //shapeLayer.strokeColor = UIColor(named: "color1")!.cgColor
        shapeLayer.strokeColor = UIColor.systemGreen.cgColor
        shapeLayer.strokeEnd = 1
        
        self.layer.addSublayer(shapeLayer)

        shapeLayer2.lineWidth = 20
        shapeLayer2.fillColor = UIColor.clear.cgColor
        //shapeLayer2.strokeColor = UIColor(named: "color")!.cgColor
        shapeLayer2.strokeColor = UIColor.green.cgColor
        shapeLayer2.strokeEnd = 0.5
        
        self.layer.addSublayer(shapeLayer2)

    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let height = bounds.height
        
        // we can use the same path for both layers
        let circularPath = UIBezierPath(arcCenter: center,
                                        radius: height * 0.5 - 20.0,
                                        startAngle: -.pi * 0.5, // start at minus 90-degrees (12 o'clock)
                                        endAngle: .pi * 1.5,    // end at 270-degrees (also 12 o'clock)
                                        clockwise: true)

        shapeLayer.path = circularPath.cgPath
        shapeLayer2.path = circularPath.cgPath

    }
}

現在我們將視圖添加到控制器：

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let circleView = CircleView()
        circleView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(circleView)
        NSLayoutConstraint.activate([
            circleView.widthAnchor.constraint(equalToConstant: 300.0),
            circleView.heightAnchor.constraint(equalTo: circleView.widthAnchor),
            circleView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            circleView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        ])

        circleView.backgroundColor = .lightGray

    }

}

結果是：