ios - 如何向使用 UIBezierPath 创建的 CAShapeLayer 添加渐变颜色

Question

我试过了this和 this但仍然没有成功。基本上我想创建这样的东西(内圈)。圆将根据一些数据创建，比方说，如果数据是 50，我们将得到一个半圆，如果它是 100，我们将得到一个完整的圆。

这就是我目前所拥有的，那么我该如何创建上述设计

我使用界面构建器创建了一个 View ，并使用这段代码绘制了这些圆圈

override func viewDidLoad() {


    let circlePath = UIBezierPath(arcCenter: CGPoint(x: myView.layer.frame.height/2,y: myView.layer.frame.height/2), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.CGPath
    shapeLayer.fillColor = UIColor.clearColor().CGColor
    shapeLayer.strokeColor = UIColor.grayColor().CGColor
    shapeLayer.lineWidth = 3.0

    let colorCirclePath = UIBezierPath(arcCenter: CGPoint(x: myView.layer.frame.height/2,y: myView.layer.frame.height/2), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)

    let coloredShapeLayer = CAShapeLayer()
    coloredShapeLayer.path = colorCirclePath.CGPath
    coloredShapeLayer.fillColor = UIColor.clearColor().CGColor
    coloredShapeLayer.strokeColor = UIColor.whiteColor().CGColor
    coloredShapeLayer.lineWidth = 10.0
    self.myView.layer.addSublayer(coloredShapeLayer)

    self.myView.layer.addSublayer(shapeLayer)



}

这就是我创建渐变的方式。

    let gradient: CAGradientLayer = CAGradientLayer()
    let startingColorOfGradient = UIColor(colorLiteralRed: 50/255, green: 189/255, blue: 170/255, alpha: 1.0).CGColor
    let endingColorOFGradient = UIColor(colorLiteralRed: 133/255, green: 210/255, blue: 230/255, alpha: 1.0).CGColor
    gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.colors = [startingColorOfGradient , endingColorOFGradient]
    self.myView.layer.insertSublayer(gradient, atIndex:0)

Answer 1

如果你想要一个真实的渐变色模拟，你可以查看this SO answer .它基于将矩形 View 分成 4 个部分的十字，然后移动每个部分的颜色以获得应用于图层蒙版的规则渐变。