如何使用颜色划分创建渐变效果? [英] How can I create a gradient effect using color divisions?
本文介绍了如何使用颜色划分创建渐变效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个表视图(自定义类而不是UITableView),其结果具有渐变效果,如下图所示:
我尝试的内容:
- 我成功地将正确的渐变作为背景添加到每个表格单元格,但我需要它是每个标签文本的颜色,而不是每个单元格的背景。Question。(我问了这个。)
失败测试:
- 创建自定义渐变图像并将其作为ColorWithPatternImage:添加到每个标签,但由于渐变是一个,所以每个单元格看起来都是一样的。Question。
失败测试:
最后一次尝试:
假设您有两种颜色,Color1和Color2。混合这些颜色可以产生渐变。在上图中,Color1=紫色,Color2=橙色。可以很容易地创建渐变效果,方法是根据结果数将渐变分成几个部分,然后找到每个部分的平均颜色并将其用作每个相应结果的文本颜色。
例如:
5个结果=5个分区。
- Division1=紫色
- Division2=紫色较少,橙色较多
- Division3=等于紫色,等于橙色
- Division4=紫色最少,橙色最多
- Division5=橙色
结果不是很详细,因为每个文本都是纯色,但当文本很小时,效果同样令人印象深刻:
问题是,对于像这样的两种颜色:
紫色:128.0、0.0、255.0
橙色:255.0、128.0、0.0
如何将其划分为5个部分并求出每个部分的平均值?
我可以使用Pixelmator中的吸管工具完成此操作,但只有在我知道固定结果数的情况下,才能使用6个结果。
我不能用数学来解决它,我不知道从何说起。
有什么想法吗?
推荐答案
您可以对颜色的RGB值使用数学运算。
要获取RGB值,可以对UIColor
使用getRed:green:blue:alpha
方法。然后,您所要做的就是根据需要的区段数将颜色平均在一起。
这里是一个函数,它应该根据开始颜色和结束颜色以及所需的分区数返回颜色数组。
解决方案
func divideColors(firstColor: UIColor, secondColor: UIColor, sections: Int) -> [UIColor] {
// get rgb values from the colors
var firstRed: CGFloat = 0; var firstGreen: CGFloat = 0; var firstBlue: CGFloat = 0; var firstAlpha: CGFloat = 0;
firstColor.getRed(&firstRed, green: &firstGreen, blue: &firstBlue, alpha: &firstAlpha)
var secondRed: CGFloat = 0; var secondGreen: CGFloat = 0; var secondBlue: CGFloat = 0; var secondAlpha: CGFloat = 0;
secondColor.getRed(&secondRed, green: &secondGreen, blue: &secondBlue, alpha: &secondAlpha)
// function to mix the colors
func mix(_ first: CGFloat, _ second: CGFloat, ratio: CGFloat) -> CGFloat { return first + ratio * (second - first) }
// variable setup
var colors = [UIColor]()
let ratioPerSection = 1.0 / CGFloat(sections)
// mix the colors for each section
for section in 0 ..< sections {
let newRed = mix(firstRed, secondRed, ratio: ratioPerSection * CGFloat(section))
let newGreen = mix(firstGreen, secondGreen, ratio: ratioPerSection * CGFloat(section))
let newBlue = mix(firstBlue, secondBlue, ratio: ratioPerSection * CGFloat(section))
let newAlpha = mix(firstAlpha, secondAlpha, ratio: ratioPerSection * CGFloat(section))
let newColor = UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: newAlpha)
colors.append(newColor)
}
return colors
}
您的问题被标记为Objective-C
,但将上面的SWIFT代码转换为Objective-C应该很容易,因为您将使用相同的UIColor
API。
以下是测试上述功能的一些代码(非常适合SWIFT游乐场)。
测试代码
let sections = 5
let view = UIView(frame: CGRect(x: 0, y: 0, width: 250, height: 50))
for (index, color) in divideColors(firstColor: UIColor.purple, secondColor: UIColor.orange, sections: sections).enumerated() {
let v = UIView(frame: CGRect(x: CGFloat(index) * 250 / CGFloat(sections), y: 0, width: 250 / CGFloat(sections), height: 50))
v.backgroundColor = color
view.addSubview(v)
}
view.backgroundColor = .white
测试结果
它还适用于任何数量的区段和不同的颜色!
这篇关于如何使用颜色划分创建渐变效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文