如何使用 UIBezierPath 更改元素的颜色？

Question

首先在 Whosebug 上 post 所以，首先，你好！

我第一次尝试 Swift，我正在做一个项目，只是需要一些帮助来解决我遇到的问题。我有一个使用 UIBezierPath 的圆圈，我想动态地改变它的颜色。但是，当我尝试 "hard code" 颜色时，我无法改变它。我试过在这里查看：How to change the color of a UIBezierPath in Swift?，但它没有回答我的问题。但是，我确实看到那里的一个答案确实指出贝塞尔曲线路径没有颜色。如果是这样，那么我将如何改变沿其路径的圆圈的颜色？

这是我正在使用的代码：

    outerCircle.path = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: frameSize.width, height: frameSize.height)).CGPath
    outerCircle.lineWidth = 8.0
    outerCircle.strokeStart = 0.0
    outerCircle.strokeEnd = 0.45
    outerCircle.lineCap = kCALineCapRound
    outerCircle.fillColor = UIColor.clearColor().CGColor
    outerCircle.strokeColor = UIColor.grayColor().CGColor
    outerCircleView.layer.addSublayer(outerCircle)

    outerCircle.strokeStart = 0.0
    outerCircle.strokeEnd = 1.0

    vibrancyView.contentView.addSubview(outerCircleView)

    innerCircleView.frame.size = frameSize

    let innerCirclePadding: CGFloat = 12
    innerCircle.path = UIBezierPath(ovalInRect: CGRect(x: innerCirclePadding, y: innerCirclePadding, width: frameSize.width - 2*innerCirclePadding, height: frameSize.height - 2*innerCirclePadding)).CGPath
    innerCircle.lineWidth = 4.0
    innerCircle.strokeStart = 0.5
    innerCircle.strokeEnd = 0.9
    innerCircle.lineCap = kCALineCapRound
    innerCircle.fillColor = UIColor.clearColor().CGColor
    innerCircle.strokeColor = UIColor.grayColor().CGColor
    innerCircleView.layer.addSublayer(innerCircle)

再次，如果这是一个明显的答案或已经有人回答，我深表歉意。我很感激任何能帮助我指明正确方向的建议。谢谢。

更新：这就是我尝试做的事情。我把内圈和外圈的填充和描边颜色都改成了绿色，但是我的圈还是很清晰:

        outerCircle.path = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: frameSize.width, height: frameSize.height)).CGPath
    outerCircle.lineWidth = 8.0
    outerCircle.strokeStart = 0.0
    outerCircle.strokeEnd = 0.45
    outerCircle.lineCap = kCALineCapRound
    outerCircle.fillColor = UIColor.greenColor().CGColor
    outerCircle.strokeColor = UIColor.greenColor().CGColor
    outerCircleView.layer.addSublayer(outerCircle)

    outerCircle.strokeStart = 0.0
    outerCircle.strokeEnd = 1.0

    vibrancyView.contentView.addSubview(outerCircleView)

    innerCircleView.frame.size = frameSize

    let innerCirclePadding: CGFloat = 12
    innerCircle.path = UIBezierPath(ovalInRect: CGRect(x: innerCirclePadding, y: innerCirclePadding, width: frameSize.width - 2*innerCirclePadding, height: frameSize.height - 2*innerCirclePadding)).CGPath
    innerCircle.lineWidth = 4.0
    innerCircle.strokeStart = 0.5
    innerCircle.strokeEnd = 0.9
    innerCircle.lineCap = kCALineCapRound
    innerCircle.fillColor = UIColor.greenColor().CGColor
    innerCircle.strokeColor = UIColor.greenColor().CGColor
    innerCircleView.layer.addSublayer(innerCircle)

我想让圆圈改变颜色。

Answer 1

路径没有颜色。这是一条路！只有图形上下文具有描边颜色/填充颜色。迟早你会有一个图形上下文——没有贝塞尔曲线路径是无用的。当你这样做时，将它的路径设置为你的贝塞尔曲线路径，根据需要设置它的描边/填充颜色，然后描边/填充路径。瞧。

在你的例子中，你似乎有一对 CAShapeLayer 对象。您可以更改 它们的 描边/填充颜色，因为它们有图形上下文 - 它们采用您给它们的路径和颜色，并通过填充和描边路径为您绘制它们。美好的。但是您不能更改贝塞尔曲线路径的描边或填充颜色——它只是一条路径。整个概念是没有意义的。

说了这么多，还不清楚你遇到了什么问题。根据你的代码，我运行是这样的：

class ViewController: UIViewController {
    @IBOutlet weak var outerCircleView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let outerCircle = CAShapeLayer()
        let frameSize = outerCircleView.frame.size
        outerCircle.path = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: frameSize.width, height: frameSize.height)).CGPath
        outerCircle.lineWidth = 8.0
        outerCircle.strokeStart = 0.0
        outerCircle.strokeEnd = 0.45
        outerCircle.lineCap = kCALineCapRound
        outerCircle.fillColor = UIColor.clearColor().CGColor
        outerCircle.strokeColor = UIColor.grayColor().CGColor
        outerCircleView.layer.addSublayer(outerCircle)

    }
}

它构建并运行，我看到完全我希望看到的东西：一个厚厚的灰色部分圆圈：

那是因为这个形状图层的填充色是透明的，描边色是灰色的。如果您不喜欢这些颜色，请让形状层给您不同的颜色。

UPDATE 您更新了代码以显示涉及绿色填充和描边的第二个版本。所以我尝试了你的第二个代码：

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    let outerCircle = CAShapeLayer()
    let frameSize = outerCircleView.frame.size
    outerCircle.path = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: frameSize.width, height: frameSize.height)).CGPath
    outerCircle.lineWidth = 8.0
    outerCircle.strokeStart = 0.0
    outerCircle.strokeEnd = 0.45
    outerCircle.lineCap = kCALineCapRound
    outerCircle.fillColor = UIColor.greenColor().CGColor
    outerCircle.strokeColor = UIColor.greenColor().CGColor
    outerCircleView.layer.addSublayer(outerCircle)

    outerCircle.strokeStart = 0.0
    outerCircle.strokeEnd = 1.0

}

而且，正如预期的那样，我得到了一个绿色圆圈（它不是一个精确的圆圈，但这只是因为我的视图不是一个完美的正方形）：

所以我还是不明白应该是什么问题：您的代码执行的正是我希望您的代码执行的操作。

如何使用 UIBezierPath 更改元素的颜色？

How can I change the color of an element using a UIBezierPath?

iphone

ios

uibezierpath

swift