Swift 2.1：CAGradientLayer 颜色定位和分布

Posted 2023-02-23

【中文标题】Swift 2.1：CAGradientLayer 颜色定位和分布

【英文标题】：Swift 2.1: CAGradientLayer color location & distribution

【发布时间】：2015-11-18 19:20:35

【问题描述】：

我需要在视图中显示 3 色分布。所以我正在使用以下代码。

func drawWithGradientLayer() 

        // total contains sum of all values contained in segmentValues variable.
        // I'm using green -> Orange -> Red colors as colors

        if total == 0 
            return
        

        if gradientLayer.superlayer != nil 
            gradientLayer.removeFromSuperlayer()
        

        var previous: CGFloat = (CGFloat(segmentValues[0])/CGFloat(total))
        var locations: [NSNumber] = [previous]

        for var i=1; i<segmentValues.count; i++ 
            previous = previous + (CGFloat(segmentValues[i])/CGFloat(total))
            locations.append(previous)
        

        locations.append(1.0) // Line may need to be commented

        gradientLayer = CAGradientLayer()
        gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)

        gradientLayer.startPoint = CGPointMake(0.0, 0.5);
        gradientLayer.endPoint = CGPointMake(1.0, 0.5);

        gradientLayer.colors = colors
        gradientLayer.locations = locations

        self.layer.insertSublayer(gradientLayer, atIndex: 0)

但问题是渐变颜色没有按照我的要求分布。例如，如果我的值为 [1,0,1]，那么条形应该显示 50% 红色和 0% 橙色和 50% 红色。如果值为 [0,0,1]，则应仅绘制 redColor。在没有网格线的情况下如何实现这一点？

任何其他更好的解决方案将永远受到赞赏:)

【参考方案1】：

这里的关键是了解locations在CAGradientLayer中是如何工作的：

渐变停止点指定为 0 到 1 之间的值。这些值必须单调递增。

因此，您不能指定像 [1, 0, 1] 这样的位置，而应该使用像 [0.0, 0.33, 0.67, 1.0] 这样的东西，并且位置值的数量必须与您的 colors 计数相同。

要在图像中制作具有短颜色过渡的渐变，您必须将每种颜色重复两次并指定适当的位置：

所以你的代码应该是这样的：

    gradientLayer.colors =  [
        UIColor.greenColor().CGColor,  UIColor.greenColor().CGColor,
        UIColor.orangeColor().CGColor, UIColor.orangeColor().CGColor,
        UIColor.redColor().CGColor,    UIColor.redColor().CGColor
    ]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradientLayer.locations = [0.0, 0.2, 0.3, 0.7, 0.8, 1.0]

如果你想在不改变颜色的情况下获得2色渐变，你可以为startPoint.x设置一个小于0的值或为endPoint.x设置一个大于1的值，并将多个位置设置为零，例如：

    gradientLayer.startPoint = CGPoint(x: -0.01, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradientLayer.locations = [0.0, 0.0, 0.0, 0.0, 0.1, 1.0]

这将给出类似的结果：

【讨论】：

你能告诉我我们如何为 arc 或 cricle 做同样的事情吗？谢谢

@Chetan 无法使用 CAGradientLayer 绘制圆形渐变，必须使用 CGContextDrawRadialGradient 手动绘制。或者，您可以使用像这样的现成视图 - github.com/maxkonovalov/MKGradientView