微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ios – Swift 2.1:CAGradientLayer颜色位置和分布

我需要在视图中显示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,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,1],那么条形图应显示50%红色& 0%橙色,50%红色.如果值为[0,则只绘制redColor.如何在没有网格线的情况下实现此目的?

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

解决方法

这里的关键是要了解CAGradientLayer中的位置如何工作:

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

因此,您不能指定[1,1]等位置,而应使用[0.0,0.33,0.67,1.0]之类的位置,并且位置值的数量必须与颜色计数相同.

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

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

gradientLayer.colors =  [
        UIColor.greenColor().CGColor,UIColor.greenColor().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]

如果要在不更改颜色的情况下获得双色渐变,可以为startPoint.x设置小于0的值,或者为endPoint.x设置大于1的值,并将多个位置设置为零,例如:

gradientLayer.startPoint = CGPoint(x: -0.01,0.0,0.1,1.0]

这会产生类似于此的结果:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐