我需要在视图中显示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%红色&amp; 0%橙色和50%红色。如果值为[0,0,1],则只应绘制redColor。如何在没有网格线的情况下实现这一点?
任何其他更好的解决方案将永远受到赞赏:)
答案 0 :(得分:16)
这里的关键是要了解CAGradientLayer中的locations
如何工作:
渐变停止指定为介于0和1之间的值。值必须单调递增。
因此,您无法指定[1, 0, 1]
等位置,而应使用[0.0, 0.33, 0.67, 1.0]
之类的内容,而的位置值必须与您的{{1}相同算数。
要像图像中那样制作具有短颜色过渡的渐变,您必须重复每种颜色两次并指定适当的位置:
所以你的代码应该是这样的:
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]
设置小于0的值,或为startPoint.x
设置大于1的值,并将多个位置设置为零,例如:
endPoint.x
会得到与此类似的结果: