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

David B 发表于 Dev

大卫·B

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

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

这是我正在使用的代码：

    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)

我想让圆圈变色。

马特

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

在您的情况下，您似乎有一对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)

    }
}

它会构建并运行，我确切地看到了我所期望看到的：一个粗的灰色部分圆圈：

在此处输入图片说明

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

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

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

}

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

在此处输入图片说明

因此，我再一次也看不出问题出在哪里：您的代码执行了我希望您的代码执行的操作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-20

我来说两句

0条评论

登录后参与评论

上一篇：如何使用Go和http包删除Cookie？

来自分类Dev

Related 相关文章

文章

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

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

在GridView中更改元素OnItemClick的颜色

使用window.location.hash更改元素的背景颜色

在悬停AngularJS上更改元素颜色

如何使用array_walk更改元素的值？

从colors.xml更改元素的颜色

如何更改元素的值

如何更改UIBezierPath背景颜色？

点击更改元素颜色

如何使用angular.js更改元素的颜色

每次滚动时如何更改元素颜色

使用xmlstarlet，如何更改元素的值

单击元素时如何更改元素的背景颜色？

如何使用JavaScript更改元素的类？

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

JavaScript更改元素颜色并使用LocalStorage存储

Javascript，使用if语句更改元素的单击颜色

单击更改元素背景颜色

单击元素时如何更改元素的背景颜色？

如何通过jQuery更改元素的颜色？

使用JavaScript更改元素onMouseOver的颜色

在悬停AngularJS上更改元素颜色

单击时更改元素的颜色

根据元素的内容更改元素的颜色

更改元素数量颜色

如何动态更改元素？

如何使用javascript更改元素的属性？

使用下拉菜单更改元素的颜色

如何使用 React 更改元素的 innerHTML？

在元素之前更改元素的颜色