创建后，View的图层看起来错位了

Question

我正在尝试通过CALayers实现这一目标

但是现在我明白了

我不明白为什么。这是我的代码：

required init?(coder aDecoder: NSCoder)
    {
        super.init(coder: aDecoder)

        let point1 = CGPoint(x: 0.0, y: 0.0)
        let point2 = CGPoint(x: 18.0, y: 0.0)
        let point3 = CGPoint(x: 36.0, y: 0.0)
        let point4 = CGPoint(x: 54.0, y: 0.0)
        let point5 = CGPoint(x: 72.0, y: 0.0)
        let point6 = CGPoint(x: 90.0, y: 0.0)
        let point7 = CGPoint(x: 108.0, y: 0.0)

        let lineLength: CGFloat = 118.0

        layer.cornerRadius = frame.size.height / 2
        clipsToBounds = true

        layer.addSublayer(createLineLayer(startPoint: point1, endPoint: CGPoint(x: point1.x, y: lineLength), color: UIColor.lightGray))
        layer.addSublayer(createLineLayer(startPoint: point2, endPoint: CGPoint(x: point2.x, y: lineLength), color: UIColor.lightGray))
        layer.addSublayer(createLineLayer(startPoint: point3, endPoint: CGPoint(x: point3.x, y: lineLength), color: UIColor.lightGray))
        layer.addSublayer(createLineLayer(startPoint: point4, endPoint: CGPoint(x: point4.x, y: lineLength), color: UIColor.lightGray))
        layer.addSublayer(createLineLayer(startPoint: point5, endPoint: CGPoint(x: point5.x, y: lineLength), color: UIColor.lightGray))
        layer.addSublayer(createLineLayer(startPoint: point6, endPoint: CGPoint(x: point6.x, y: lineLength), color: UIColor.lightGray))
        layer.addSublayer(createLineLayer(startPoint: point7, endPoint: CGPoint(x: point7.x, y: lineLength), color: UIColor.lightGray))

        let skyBlue = UIColor(red: 100.0 / 255.0, green: 186.0 / 255.0, blue: 246.0 / 255.0, alpha: 1.0)

        pulseLayer1 = createLineLayer(startPoint: point1, endPoint: CGPoint(x: point1.x, y: lineLength), color: skyBlue)
        pulseLayer2 = createLineLayer(startPoint: point2, endPoint: CGPoint(x: point2.x, y: lineLength), color: skyBlue)
        pulseLayer3 = createLineLayer(startPoint: point3, endPoint: CGPoint(x: point3.x, y: lineLength), color: skyBlue)
        pulseLayer4 = createLineLayer(startPoint: point4, endPoint: CGPoint(x: point4.x, y: lineLength), color: skyBlue)
        pulseLayer5 = createLineLayer(startPoint: point5, endPoint: CGPoint(x: point5.x, y: lineLength), color: skyBlue)
        pulseLayer6 = createLineLayer(startPoint: point6, endPoint: CGPoint(x: point6.x, y: lineLength), color: skyBlue)
        pulseLayer7 = createLineLayer(startPoint: point7, endPoint: CGPoint(x: point7.x, y: lineLength), color: skyBlue)

        let pulseLayers: [CAShapeLayer] = [pulseLayer1, pulseLayer2, pulseLayer3, pulseLayer4, pulseLayer5, pulseLayer6, pulseLayer7]

        for pulseLayer in pulseLayers
        {
            layer.addSublayer(pulseLayer)

            let animation = CABasicAnimation(keyPath: "strokeEnd")
            animation.fillMode = CAMediaTimingFillMode.forwards
            animation.fromValue = 1
            animation.toValue = 0
            animation.duration = 0
            animation.isRemovedOnCompletion = false

            pulseLayer.add(animation, forKey: "initial")
        }

        transform = CGAffineTransform(rotationAngle: CGFloat.pi)
    }

private func createLineLayer(startPoint: CGPoint, endPoint: CGPoint, color: UIColor) -> CAShapeLayer
    {
        let path = UIBezierPath()
        path.move(to: startPoint)
        path.addLine(to: endPoint)

        let layer = CAShapeLayer()
        layer.strokeColor = color.cgColor
        layer.lineWidth = 10.0
        layer.path = path.cgPath

        return layer
    }

视图固定为118 x 118点。我设置了7条线，每条线的厚度为10点，间距为8点。这样我得到10 x 7 + 6 x 8 =118。所以，我认为我的发行版本应该没有问题。

当我删除裁剪（将clipToBound设置为false）和圆角倒圆时，在真实设备上显示正确。这是真实设备的屏幕截图：

但是，当我从Xcode用Debug View Hierarchy捕获视图时。看起来像这样