前言
最近有一个需求是根据图片平均色来改变滑动后导航的颜色,但是由于图片平均色和导航图标/文字颜色接近那么这样的展示效果并不好,因此要求当接近时改变导航的图标/文字颜色。这里直接判断相等肯定是不行的,因此需要一个近似色值的判断方法。于是就有了这篇文章。
参考文献
ps
- 如果大家看到有精简好用的三维作图软件(mac版,CAD,matlab这些就算了太大了),评论区留言给我,我补几张立体图
- 最终算法传送门
具体思路
首先大家熟悉的色值表示方式RGB也可以去近似,但是误差相当大。所以我们采用HSV的色值表示方式来计算。下面简单说明下HSV色值的原理。
和RGB一样,也分为三个值,H:色相,S:饱和度,V:明度。其中S和V都是[0,1]的数,而H为角度,不同平台的H表示是不一样的,参考文献中java环境下该值为[0,360],而在OC里该值为[0,1]所以在后续的计算中应保持对应。另外需要知道HSV是一个圆锥模型,后面的计算都是利用到这个模型的一些性质,特此说明。
HSV与圆锥模型的对应关系如下图
如图所示,一个颜色,在这个圆锥中的表示其实可以变成一个从底部圆锥顶点出发的一个向量,既然是向量,那么两个向量相减即可得出两个颜色的近似度。
那么接下来就是这个圆锥的定义和具体的计算公式了,首先定义一个圆锥我们知道要有高(或者底面直径或斜边长度)和顶角角度就能定义一个圆锥了,这里我们先定义角度为30°,斜边长度为1