Swift 2.1: CAGradientLayer颜色定位&分布

Question

我的需求是在视图中显示三色分布。所以我正在使用以下代码。

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。没有网格线我怎么能做到这一点？

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

Answer 1

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

The gradient stops are specified as values between 0 and 1. The values must be monotonically increasing.

所以你不能像[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]

这将给出类似于此的结果：

Swift 2.1: CAGradientLayer颜色定位&分布

Swift 2.1: CAGradientLayer color location & distribution

calayer

ios

cagradientlayer

swift