实用型ColorPicker的设计与实现

  1. 云栖社区>
  2. 博客>
  3. 正文

实用型ColorPicker的设计与实现

长风呼啸 2019-08-08 12:20:03 浏览139
展开阅读全文

一、前言

ColorPicker,颜色选取器,简称拾色器。
说到拾色器,大家可能就会想到Photoshop, 使用得最多的应该是设计, 对于开发而言,平常要用到拾色器的机会不多。
如果有一天,项目中需要一个拾色器(多用于自定义颜色),该如何入手?
今天且来给大家分享一下拾色器的设计和实现。

二、颜色空间

要实现实用的拾色器,了解下颜色空间是必要的。
颜色空间也称彩色模型(又称彩色空间或彩色系统),它的用途是在某些标准下用通常可接受的方式对彩色加以说明。
关于颜色空间,文末附有一些链接,都是前人的精华总结。
尤其是《色彩空间中的 HSL、HSV、HSB 有什么区别》中的讨论(知乎大神的作答),读完立即醍醐灌顶,茅塞顿开。

本节主要摘录各大神的一些表述,并加以整理。
为了阅读体验,就不逐一附上作者了,具体见文后链接。

2.1 RGB空间

RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于两者亮度之总和,越混合亮度越高,即加法混合。
红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。
当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。

2.2 HSB空间

RGB 是对机器很友好的色彩模式,但并不够人性化,因为我们对色彩的认识往往是”什么颜色?鲜艳不鲜艳?亮还是暗?”。
例如,我们平时描述颜色,“深紫”,“浅绿”,“明黄”,"暗红”等,一是交代基础颜色,二是对颜色本身加以描述。
HSB(HSV) 基于 RGB ,是一个更人性化的表示方法。
H(Hue) 为色相, 取值范围:0-360°,基础颜色。
S(Saturation) 为饱和度, 取值范围:0 - 1(0% - 100%), 表示色彩的纯度。
B(Brightness)为明度, 取值范围:0 - 1(0% - 100%),表示对光量的感知。
明度在某些地方也叫Value,所以就有了HSV,HSV和HSB是一样的,只是关于明度的叫法不一样而已。

  • 色相环的每一种颜色,在RGB空间中,最多只有两个颜色通道(r, g, b)大于0,所以色相环的颜色是最纯净的。
  • 明度决定了RBG三个分量的大小,也就是决定了光亮的大小,在感知层面,就是明暗的区别。
  • 饱和度为0的颜色,r,g,b相等, 当明度为0时为黑色,明度为1时为白色,大于0小于1时为灰色;
    饱和度为1时,颜色值仅取决于色相和明度,而明度只控制RGB分量的大小,所以颜色还是纯净的;

饱和度在0到1之间时,为饱和度为0的颜色(黑灰白)和饱和度为1的颜色的线性插值,越靠近1颜色越纯净。

2.3 明度

先看 Photoshop 的 HSB 颜色模型拾色器,如下图所示,HSB 的 B(明度)控制纯色中混入黑色的量,越往上,值越大,黑色越少,颜色明度越高。

2.4 饱和度

如下图所示,HSB 的 S(饱和度)控制纯色中混入白色的量,越往右,值越大,白色越少,颜色纯度越高。

2.5 色相

色相指的是色彩的外相,是在不同波长的光照射下,人眼所感觉不同的颜色,如红色、黄色、蓝色等。
在HSL和HSV色彩空间中,H指的就是色相,是以红色为0°(360°);黄色为60°;绿色为120°;青色为180°;蓝色为240°;品红色为300°。

从上图可以看出,从0°到360°,是一个分段函数,其中,每一段都有一个颜色分量是0,一个分量是1,另一个分量或从0到1,或从1到0。

2.6 HSB转RGB

对用户而言,HSB空间更容易调节,但是对于计算机,用RGB空间渲染会更加方便。
以下是HSB到RGB的转换公式:

图中, h, s , v分别是色相,饱和度,明度。
有了这个组公式,我们就可以理解2.5节的色相条是怎么来的了。
首先看到第一个公式,[]是取整符号,即 hi = (int) (h/60)% 6 。
令s=1, v=1, 则p=0, q=1-f, t=f。
当i=0(第一段),(r, g, b) = (v, t, p) = (1, f, 0), 而f=h/60-hi =h/60,
也就是,第一段中,r=1, g=h/60, b=0;
特例:当h=60, r=1,g=1,b=0, 混合出黄色。
以此类推。
另外我们还注意到,当h选定之后,颜色和s,v成线性关系,这一点对后面拾色器的实现很重要。

三、拾色器的设计

3.1 条形拾色器

需要用到自定义颜色的APP不多,网易APP是其中一个。
点击“个性换肤->自选颜色”,会弹出这样的界面:

页面中间是预览,底部是预定义的调色板;
调色板的最后,是一张多彩的图片,点击后切换成两个颜色条,如下图:

第一个颜色条很眼熟了,就是前面提到的色相;
底下这条,应该是以选取的色相为基础,饱和度为1,明度从0到1渐变。
这两个颜色条组合起来,颜色的取值范围为2.2节中的圆柱的侧面。
取值范围虽然只占颜色空间的一部分,但是也是很有价值的一部分。
可能网易的设计师只想让用户选取鲜明的颜色,所以舍弃了饱和度的调节,同时换来了极大的简洁性。

3.2 环形拾色器

开源的Android拾色器有不少,其中HoloColorPicker是star比较多的一个项目。

该项目把色相做成一个环,底下辅以饱和度和明度的调节,可以说是一个完整的拾色器了(可以选取整个颜色空间的颜色)。
把色相做成色相环,看起来比色相条要更加炫酷一些,但是占用面积变大了。
像网易云音乐的颜色选取,因为要给预览图足够的空间,所以只能用空间占用少的拾色器;
像这种一下占用大半个屏幕的设计,不适合网易云音乐这种选色场景。

3.3 PS拾色器

Photoshop的常规拾色器是矩形构成的“饱和度-明度”选取面板,以及色相条(然后也可以通过设置换成色相轮)。

Photoshop作为专业的图像编辑软件,拾色器无疑是很强大的。
同时电脑显示器的面积毕竟比手机要大很多,鼠标的选取精确度也比手指触摸屏幕要精确,
所以Photoshop的拾色器可以大开大合,提供各种面板,显示全面的参数。

四、技术实现

通过前面三个小节的分析,我们可以看出,拾色器的实现要点为:
以HSB颜色空间为基础,通过条形,环形,矩形等坐标来调节HSB各分量的值,达成颜色的选取。

首先第一个要解决的问题就是,颜色空间的转换计算。
幸运的是,SDK 的 Color 类提供HSB(HSV)和RGB之间的转换方法:

public static void colorToHSV(@ColorInt int color, @Size(3) float hsv[]) 

public static int HSVToColor(@Size(3) float hsv[])

然后要解决的第二个问题是,坐标的绘制。
同样,SDK也提供了各种Shader, 使得我们可以轻松的绘制各种坐标。
接下来我们结合实例看一下。

4.1 仿网易云音乐

也不卖关子了,先上效果图吧:

和网易云音乐一样,都是在下方显示面板,有预置的调色板,调色板最后的方块可以跳转去自定义暗色;
不同之处在于,比之多了透明度和纯度的调节,如此,可以选择整个颜色空间,以及alpha通道。

以上实现的关键点在于,色相、饱和度(为了字体长度相同,以“纯度”作为title),以及明度的绘制。
前面我们提到,色相是分段线性变化的,因此,我们可以利用 LinearGradient 来绘制。

public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],
            @Nullable float positions[], @NonNull TileMode tile) 

给LinearGradient的color数组福祉,只需列出色相在分段交界的颜色即可:

private static final int[] COLORS = new int[] {
        0xFFFF0000,
        0xFFFFFF00,
        0xFF00FF00,
        0xFF00FFFF,
        0xFF0000FF,
        0xFFFF00FF,
        0xFFFF0000,
};

前面2.6节提到,h确定之后, 颜色和s,v成线性关系,因此,也可以通过LinearGradient来绘制饱和度和明度。
例如,绘制饱和度时,只需计算hsv第二分量(hsv[1], 也就是s)等于0和等于1时的颜色值,作为LinearGradient的colors的参数,即可绘制在当前h, v值对应的s的变化(也就是饱和度对应的颜色条)。

    hsv[1] = 0f;
    colors[0] = Color.HSVToColor(hsv);
    hsv[1] = 1f;
    colors[1] = Color.HSVToColor(hsv);

明度的绘制以此类推。

4.2 仿Photoshop

色相在0°和360°对应的都是红色,首位相接,所以很多时候会被做成色相环(Photoshop中叫色相轮)。
饱和度和明度,如果合成一个二维坐标,会更加直观,这样也是Photoshop的方案。

要绘制色相环,需要用到另一个Shader:

 public SweepGradient(float cx, float cy,
            @NonNull @ColorInt int colors[], @Nullable float positions[])

用法很简单,把上一节给出的 COLORS 代入 SweepGradient 的 colors 即可。

而要合成饱和度和明度,可以用ComposeShader:

private Shader getSVShader() {
    if (mValShader == null) {
        mValShader = new LinearGradient(
                mSVRect.left, mSVRect.top,
                mSVRect.left, mSVRect.bottom,
                Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP);
    }

    if (mShaderHSV[0] != mHSV[0] || mComposeShader == null) {
        mShaderHSV[0] = mHSV[0];
        Shader satShader = new LinearGradient(
                mSVRect.left, mSVRect.top,
                mSVRect.right, mSVRect.top,
                Color.WHITE, Color.HSVToColor(mShaderHSV), Shader.TileMode.CLAMP);
        mComposeShader = new ComposeShader(mValShader, satShader, PorterDuff.Mode.MULTIPLY);
    }

    return mComposeShader;
}

ComposeShader可以组合两个Shader, 因为颜色和s, v是线性关系,所以需要组合两个LinearGradient。
第一个LinearGradient从左上角到左下角,从白到黑;
第二个LinearGradient从左上角到右上角,从白到色相的颜色。
效果如下:

既然拾色部分已经占了这么多空间了,所以干脆把剩下的空间也用上,来做数据面板;
还加一个编辑框,可以手动输入RGB颜色,同时限制编辑框只能输入十六进制,限制输入长度。

4.3 拾色器的选取

两类拾色器中,通过条形坐标来选取颜色比较节约空间,通过环形和矩形则相对直观。
具体使用哪一种,要视情况而定:
如果要实时预览效果,那拾色器就不能占太多空间,这时候第一种方案会比较适合;
如果要制作调色板之类的,用第二种方案就比较高效。
不过,在移动设备上,第二种方案会打折扣,比如在sv面板中选取颜色时,手指会遮挡住指示器,
而在PC上的话,由于是用鼠标选取,所以可以精确选取,也没有遮挡的问题。

五、总结

本文先是讲述了颜色空间的相关知识,
然后介绍了业界的一些拾色器的设计,
最后演示了两种拾色器,以及实现要点。

限于篇幅,在实现方面没有讲的很细,读者可以具体看项目代码。
代码链接:
https://github.com/No89757/ColorPicker

参考资料:
色彩空间中的 HSL、HSV、HSB 有什么区别
从 RGB 到 HSV 的转换详细介绍
RGB与HSB之间的转换公式
维基百科 - 色相

网友评论

登录后评论
0/500
评论
长风呼啸
+ 关注