如何使用UIBezierPath更改元素的颜色? [英] How can I change the color of an element using a UIBezierPath?

问题描述

有关stackoverflow的第一篇文章，首先，您好！

First post on stackoverflow so, first and foremost, hello!

我第一次尝试使用Swift，并且正在做一个项目，只是需要一些有关我遇到的问题的帮助.我有一个使用UIBezierPath的圆圈，我想动态地更改其颜色.但是，当我尝试甚至对颜色进行硬编码"时，都无法更改它.我尝试在这里查看:如何更改颜色Swift中的UIBezierPath?，但是它没有回答我的问题.但是，我确实看到那里的一个答案确实表明贝塞尔曲线路径没有颜色.如果是这样，我该如何改变沿其路径的圆的颜色?

I'm trying my hand at Swift for the first time and am working a project and just needed some help on a problem I'm having. I've got a circle using a UIBezierPath that I'd like to change the color of, dynamically. However, when I try to even "hard code" the color, I'm unable to get it to change. I've tried looking here: How to change the color of a UIBezierPath in Swift?, but it didn't answer my question. However, I do see that one answer there does state that a Bezier path has no color. If so, how would I then go about altering the color of the circle going along its path?

这是我正在使用的代码:

Here's the code I'm working with:

    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)

再次，如果这是一个明显的答案或已经被回答，我深表歉意.我感谢您提出的任何建议，可以帮助我指明正确的方向.谢谢.

Again, I apologize if this is an obvious answer or has already been answered. I appreciate any advice that would help point me in the right direction. Thank you.

更新:这就是我尝试做的事情.我将内圆和外圆的填充和描边颜色更改为绿色，但是仍然有清晰的圆:

UPDATE: So here's what I tried doing. I changed the fill and stroke colors of both inner and outer circles to green, but I still have clear circles:

        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)

我想让圆圈改变颜色.

推荐答案

路径没有颜色.这是一条路！只有图形上下文具有笔触颜色/填充颜色.迟早会有一个图形上下文-没有一个贝塞尔曲线路径是没有用的.完成后，将其路径设置为贝塞尔曲线路径，根据需要设置其描边/填充颜色，然后描边/填充路径.Voilà.

A path has no color. It's a path! Only a graphics context has a stroke color / fill color. Sooner or later you will have a graphics context - a bezier path is useless without one. When you do, set its path to your bezier path, set its stroke / fill color as desired, and then stroke / fill the path. Voilà.

在您的情况下，您似乎有一对CAShapeLayer对象.您可以更改其的笔触/填充颜色，因为它们具有图形上下文-它们采用您指定的路径和颜色，并通过填充和抚摸路径为您绘制它们.美好的.但是您不能更改贝塞尔曲线路径的笔触或填充颜色-这只是一条路径.整个概念毫无意义.

In your case, you seem to have a pair of CAShapeLayer objects. You can change their stroke / fill colors, because they have a graphics context - they take the path and colors you give them, and draw them for you by filling and stroking the path. Fine. But you cannot change a bezier path's stroke or fill color - it's just a path. The entire notion is meaningless.

说了这么多，到目前为止还不清楚您遇到什么问题.根据您的代码，我运行了其中的这段代码:

Having said all that, it is far from clear what issue you are having. Based on your code, I ran this bit of it:

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)

    }
}

它可以构建并运行，我完全可以看到 我希望看到的是:粗的灰色圆圈:

It builds and runs, and I see exactly what I would expect to see: a thick gray part-circle:

这是因为此形状图层具有透明的填充颜色和灰色的笔触颜色.如果您不喜欢这些颜色，请要求形状图层为您提供不同的颜色.

That is because this shape layer has a clear fill color and a grey stroke color. If you don't like those colors, ask the shape layer to give you different colors.

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

UPDATE You updated your code to show a second version involving green fill and stroke. So I tried your second code:

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

}

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

And, as expected, I got a green circle (it isn't an exact circle, but that is just because my view is not a perfect square):

同样，我也看不出问题出在哪里:您的代码执行了我希望您的代码执行的操作.

So again I don't see what the problem is supposed to be: your code does just what I would expect your code to do.

这篇关于如何使用UIBezierPath更改元素的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！