CAShapeLayer 未按需要呈现

Question

我有一个视图，上面有一些 CAShapeLayer。我懒惰地实例化它如下：

lazy var myViewWithLayersOnIt: UIView = {
    let view = UIView(frame: CGRect(origin: CGPoint(x: 14,
                                                    y: 2),
                                    size: CGSize(width: 10,
                                                 height: 10)))
    view.translatesAutoresizingMaskIntoConstraints = false

    let outerCircleLayer = CAShapeLayer()
    let outerPath = UIBezierPath(ovalIn: view.frame).cgPath
    outerCircleLayer.path = outerPath
    outerCircleLayer.position = view.center
    outerCircleLayer.fillColor = UIColor.white.cgColor
    view.layer.addSublayer(outerCircleLayer)

    let innerFrame = CGRect(origin: CGPoint(x: 1.5,
                                            y: 1.5),
                            size: CGSize(width: 8.5,
                                         height: 8.5))
    let innerCircleLayer = CAShapeLayer()
    let innerPath = UIBezierPath(ovalIn: innerFrame).cgPath
    innerCircleLayer.path = innerPath
    innerCircleLayer.position = view.center
    innerCircleLayer.fillColor = UIColor.red.cgColor
    view.layer.addSublayer(innerCircleLayer)

    return view
}()

虽然应该在屏幕上呈现的所有内容都在呈现，但 CAShapeLayer 并未位于 view 的中心。我认为这可能是由于懒惰实例化，所以我放弃了懒惰并且我看到了完全相同的问题。我忘了做什么？

这是它的渲染方式：

感谢您的阅读。我欢迎您的意见。

Answer 1

对于 outerPath，您应该使用 view.bounds 而不是 view.frame。不需要设置outerCircleLayer的position，也不需要设置innerCircleLayer.

lazy var myViewWithLayersOnIt: UIView = {
    let view = UIView(frame: CGRect(origin: CGPoint(x: 14,
                                                        y: 2),
                                        size: CGSize(width: 10,
                                                     height: 10)))
        

    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = UIColor.black

    let outerCircleLayer = CAShapeLayer()
    let outerPath = UIBezierPath(ovalIn: view.bounds).cgPath /// bounds!
    outerCircleLayer.path = outerPath
//    outerCircleLayer.position = view.center
    outerCircleLayer.fillColor = UIColor.white.cgColor
    view.layer.addSublayer(outerCircleLayer)

    let innerFrame = CGRect(origin: CGPoint(x: 1.5,
                                                y: 1.5),
                                size: CGSize(width: 8.5,
                                             height: 8.5))
    let innerCircleLayer = CAShapeLayer()
    let innerPath = UIBezierPath(ovalIn: innerFrame).cgPath
    innerCircleLayer.path = innerPath
//    innerCircleLayer.position = view.center
    innerCircleLayer.fillColor = UIColor.red.cgColor
    view.layer.addSublayer(innerCircleLayer)

    return view
}()

结果：

红圈偏离中心因为

let innerFrame = CGRect(origin: CGPoint(x: 1.5,
                                        y: 1.5),
                        size: CGSize(width: 8.5,
                                     height: 8.5))

应该是

let innerFrame = CGRect(origin: CGPoint(x: 0.75,
                                        y: 0.75),
                        size: CGSize(width: 8.5,
                                     height: 8.5))

8.5 + 0.75 + 0.75 = 10，而不是 8.5 + 1.5 + 1.5 = 11.5

CAShapeLayer 未按需要呈现

CAShapeLayer not rendering as desired

swift

uikit

calayer

cashapelayer