梯度CAShapeLayer

Question

我在向CAShapeLayer添加梯度时遇到了问题。我已经创建了圆圈层，我想给它增加一个梯度。因此，我创建了一个CAGradientLayer，并将其帧设置为层界，并将其设置为逐层屏蔽，但它没有出现。我能做什么?

private func setupCircle() -> CAShapeLayer {
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: progressView.frame.size.width / 2.0, y: progressView.frame.size.height / 2.0), radius: (progressView.frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)

    let circleLayer = CAShapeLayer()
    circleLayer.path = circlePath.CGPath
    circleLayer.fillColor = nil
    circleLayer.strokeColor = UIColor.yellowColor().CGColor
    circleLayer.backgroundColor = UIColor.yellowColor().CGColor
    circleLayer.lineWidth = configurator.lineWidth
    circleLayer.strokeEnd = 1.0

    return circleLayer
}

private func setupGradient() -> CAGradientLayer {
    let gradient = CAGradientLayer()
    gradient.colors = [UIColor.clearColor().CGColor, UIColor.yellowColor().CGColor, UIColor.greenColor().CGColor]
    gradient.locations = [0.0, 0.25, 1.0]
    gradient.startPoint = CGPointMake(0, 0)
    gradient.endPoint = CGPointMake(1, 1)
    return gradient
}

let circle = setupCircle()
let gradient = setupGradient()

gradient.frame = circle.bounds
gradient.mask = circle

progressView.layer.addSublayer(circle)
progressView.layer.insertSublayer(gradient, atIndex: 0)

编辑：我已将setupCircle方法更改为：

private func setupCircle() -> CAShapeLayer {
    let circleLayer = CAShapeLayer()
    circleLayer.frame = progressView.bounds.insetBy(dx: 5, dy: 5)
    circleLayer.path = UIBezierPath(ovalInRect: CGRectMake(progressView.center.x, progressView.center.y, progressView.bounds.size.width, progressView.bounds.size.height)).CGPath
    circleLayer.fillColor = nil
    circleLayer.strokeColor = UIColor.yellowColor().CGColor
    circleLayer.backgroundColor = UIColor.yellowColor().CGColor
    circleLayer.lineWidth = configurator.lineWidth
    circleLayer.strokeEnd = 1.0

    return circleLayer
}

这里的效果，我做得好吗？

​

​

编辑2:我已经将circleLayer.path = UIBezierPath(ovalInRect: CGRectMake(progressView.center.x, progressView.center.y, progressView.bounds.size.width, progressView.bounds.size.height)).CGPath更改为circleLayer.path = UIBezierPath(ovalInRect: circleLayer.bounds).CGPath，它更好，但仍然不是我想要的：

​

​

Answer 1

您可以在viewDidLoad中创建层并将它们添加到层层次结构中，但是您不应该在那里执行任何框架逻辑，因为布局在那时没有更新。尝试将正在进行任何帧计算的所有代码移动到viewDidLayoutSubviews。

这也应该在每次更新布局时完成，因此将其从setupCircle移动到viewDidLayoutSubviews。

let circlePath = UIBezierPath(...)
circleLayer.path = circlePath.cgPath

编辑：

另外，我看不出你在哪里设置circleLayer的框架?这还不足以设置它的路径。如果你有一个掩码CGRect.zero rect，它将完全隐藏它的父层。

我建议将其替换为：

let circlePath = UIBezierPath(arcCenter: CGPoint(x: progressView.frame.size.width / 2.0, y: progressView.frame.size.height / 2.0), radius: (progressView.frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)

在这方面：

circleLayer.bounds = progressView.frame.insetBy(dx: 5, dy: 5)
circleLayer.path = UIBezierPath(ovalIn: circleLayer.bounds).cgPath

这样，就可以同时设置帧和路径。对坐标系也要小心。我不确定progressView在视图层次结构中的位置，也许您需要的是bounds。

编辑2:也应该删除几行代码。

1. 这使得你的圆层完全不透明，它使形状本身不可见。

​

circleLayer.backgroundColor = UIColor.yellowColor().CGColor 

1. 您不应该将圆形作为子层添加，因为您将使用它作为掩码：

​

progressView.layer.addSublayer(circle)