美文网首页Android开发经验谈Android开发
实用型ColorPicker的设计与实现

实用型ColorPicker的设计与实现

作者: 呼啸长风 | 来源:发表于2019-08-08 08:34 被阅读16次

    一、前言

    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颜色,同时限制编辑框只能输入十六进制,限制输入长度。

    五、总结

    两类拾色器中,通过条形坐标来选取颜色比较节约空间,通过环形和矩形则相对直观。
    具体使用哪一种,要视情况而定:
    如果要实时预览效果,那拾色器就不能占太多空间,这时候第一种方案会比较适合;
    如果要制作调色板之类的,用第二种方案就比较高效。

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

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

    相关文章

      网友评论

        本文标题:实用型ColorPicker的设计与实现

        本文链接:https://www.haomeiwen.com/subject/knaydctx.html