视图的层在创建后看起来错位了

我正试着和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×7+6×8=118。所以,我认为我不应该在分配上有任何问题。

当我移除剪辑(将clipToBound设置为false)和圆角时,实际设备上的显示是正确的。这是一个真实设备的屏幕截图:

但当我从Xcode捕获具有调试视图层次结构的视图时。看起来像这样