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

时间:2015-04-08 00:09:27

标签: ios iphone swift uibezierpath

首先发布stackoverflow,所以,首先,你好!

我第一次尝试使用Swift并且正在进行一个项目,只是需要一些关于我遇到的问题的帮助。我有一个使用UIBezierPath的圆圈,我想动态地改变它的颜色。然而,当我试图甚至“硬编码”颜色时,我无法让它改变。我试过看这里:How to change the color of a UIBezierPath in Swift?,但它没有回答我的问题。但是,我确实看到有一个答案确实说Bezier路径没有颜色。如果是这样,那我怎么会改变沿着它的路径的圆的颜色呢?

这是我正在使用的代码:

    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)

我想让圆圈改变颜色。

1 个答案:

答案 0 :(得分:6)

路径没有颜色。这是一条路!只有图形上下文具有笔触颜色/填充颜色。迟早你会有一个图形上下文 - 没有一个bezier路径是没用的。执行此操作时,将其路径设置为贝塞尔曲线路径,根据需要设置其笔触/填充颜色,然后描边/填充路径。瞧。

在您的情况下,您似乎有一对CAShapeLayer对象。您可以更改他们的笔触/填充颜色,因为它们具有图形上下文 - 它们采用您提供的路径和颜色,并通过填充和描边路径为您绘制它们。精细。但是你不能改变bezier路径的笔划或填充颜色 - 它只是一条路径。整个概念毫无意义。

说了这么多,你还不清楚你遇到了什么问题。根据你的代码,我运行了这一点:

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)

    }
}

它构建并运行,我看到完全我期望看到的内容:一个粗灰色的圆圈:

enter image description here

这是因为这个形状层具有清晰的填充颜色和灰色笔触颜色。如果您不喜欢这些颜色,请让形状图层为您提供不同的颜色。

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

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

}

而且,正如预期的那样,我得到了一个绿色圆圈(这不是一个精确的圆圈,但这仅仅是因为我的观点不是一个完美的正方形):

enter image description here

所以我再也看不出问题是什么了:你的代码正是我希望你的代码做的事情。