CAShapeLayer 未按需要渲染答案

【问题标题】：CAShapeLayer not rendering as desiredCAShapeLayer 未按需要渲染
【发布时间】：2020-10-20 21:32:40
【问题描述】：

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

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

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

这是它的渲染方式：

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

【问题讨论】：

顺便说一句，说innerCircleLayer.position = view.center 之类的话是永远正确的。 view.center 不是view 的中心。相反，它是view 所在的位置。

标签： swift uikit calayer cashapelayer

【解决方案1】：

对于outerPath，您应该使用view.bounds 而不是view.frame。不需要设置position的outerCircleLayer，也不需要设置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

【讨论】：

谢谢！最近我一直沉浸在网络代码和 RxSwift 中，我忘记了 UIKit 的东西。哈哈。