如何将渐变颜色添加到使用UIBezierPath创建的CAShapeLayer

Question

我尝试了this和this，但仍然没有成功。基本上我想创造这样的东西（内圈）。圆圈将根据一些数据创建，如果数据为50，我们将获得半圆，如果是100，我们将获得完整的圆圈。

这就是我到目前为止所做的，所以如何创建上述设计

我创建了一个使用界面构建器的视图，并使用此代码

绘制了这些圆圈

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。它基于一个十字形，它将你的矩形视图分成4个部分，然后移动每个部分的颜色以获得应用于图层蒙版。