一个初级的使用GDI+开发的颜色拾取器用户控件

 
概要

        虽然大部份开发者和APIs在工作中使用颜色时用RGB方案，但在阐述或选择颜色上它不是唯一可供使用的方法。比如，标准的 Windows颜色-选择对话框允许你在工作时用一种间接的方法使用HSL颜色方案。这篇文章，作者描述若干颜色选择的方案，而且使用GDI+（通过 System.Drawing命名空间）产生一个组件这样做可以为你自己的应用程序提供一个简单的、友好的颜色选择者。按着这个方法，你将得到一些提示来帮助你在自己的应用中使用GDI+。 
        因为Windows? 提供一个标准的通用的来选择颜色的对话框（参见图1），所以很容易就假定这是选择颜色的仅有方法。那是不正确的，然而，在这篇文章中我将提供一个易用的方法来代替标准的颜色-选择对话框。这个例子的外观和布局很容易修改。你可以使用任何你喜欢的方法来设计指示器，而且这个例子包含了两种不同的布局设计。这篇文章中心在两种特定的区域：研究不同颜色选择的方法和解释System.Drawing 命名空间的是如何让使这个例子工作的。

颜色空间：

        标准的Windows颜色-选择对话框只在众多的方法中提供两种方法来表示颜色。可以使用代码来表示颜色。这个颜色选择的表示是通常被叫做“颜色空间”，因为颜色表示通常地允许你通过一个固定的三-维坐标空间去访问颜色。图1显示当自定义的颜色按钮被选择时的标准的Windows对话框，所以右手边面板出现，允许你去定义自己的颜色。忽视左手边侧面的对话框，它允许你简单的通过一个预选择颜色的调色板来选择颜色，右手边的面板允许用鼠标拖曳颜色选择条，或者使用两种不同的颜色空间，红/绿/蓝（RGB）或色彩/饱和/发光度（HSL）输入颜色。在这个对话框中，单个的RGB值包含8-位值和范围是从0直到255.HSL值范围是从0到240.


图1 Windows标准的颜色选择对话框

        RGB 颜色系统组合三种颜色坐标，同一个表明颜色的透明度，通常称作“alpha“的组成部分，产生一个32位无符号的整数值来表示颜色。注意图1这个对话框不提供任何方法选择一个除了 255的alpha值，允许只有完全不透明的颜色。AlphaRGB （ARGB）值是一种很容易用计算机解决的方法来表示颜色的。例如，在图1中选择一个颜色，组合ARGB值是十进制13578293或者十六进制数 FF30CFCB。以4-字节值断开这个数字，使其变为单个字节，你将找到，正是你期待的在图1里面给定的颜色，值是255，48，207，和203分别为alpha，红，绿，和蓝颜色的组成部分。当使用这个特殊对话框时，忽略alpha部分，它的值将总是255（FF），这样将很容易使用编程的方法将整数的表示转换成颜色的单个字节,因此Windows的爱好者和它们的应用程序开发者，使用RGB方案去表示颜色。

        RGB颜色系统组合三种颜色坐标，同一个表明颜色的透明度，通常称作“alpha“的组成部分，产生一个32位无符号的整数值来表示颜色。注意图1这个对话框不提供任何方法选择一个除了 255的alpha值，允许只有完全不透明的颜色。AlphaRGB （ARGB）值是一种很容易用计算机解决的方法来表示颜色的。例如，在图1中选择一个颜色，组合ARGB值是十进制13578293或者十六进制数 FF30CFCB。以4-字节值断开这个数字，使其变为单个字节，你将找到，正是你期待的在图1里面给定的颜色，值是255，48，207，和203分别为alpha，红，绿，和蓝颜色的组成部分。当使用这个特殊对话框时，忽略alpha部分，它的值将总是255（FF），这样将很容易使用编程的方法将整数的表示转换成颜色的单个字节,因此Windows的爱好者和它们的应用程序开发者，使用RGB方案去表示颜色。

        虽然使用RGB颜色空间对于计算机在它的内部之间变换颜色的表示后退和向前而且表示人类需要为了选择一个颜色是比较容易的，在颜色挑选上RGB不提供任何有用的次序。一些开发组任意的选择安排在图1右手边颜色栅格布局--没有理由它看上去是这种样子。如果你花点时间去调查在颜色选择方块之内这些相连的颜色的意思，当在屏幕上移动你的鼠标时，观察R，G和B部分值的颜色，你将可能辨别一个模式。这个模式不是明显的，然而，可能你曾经也没猜想一个RGB值给出了你选择的位置。在一个比较合逻辑的颜色选择方案，颜色选择器的位置应该与选择器有一些联系。

        回到很容易使用的Windows通用的对话框以前的那些日子，我记得尝试去创造我自己的颜色选择对话框。没有更进一步的了解，于是我开始尝试创造一个二维栅格来提供选择任何RGB颜色。很快的，我认识到我正在用二维工具尝试去解决一个三维问题。我的那个简单的解决方案是提供一组可供选择的颜色，除了这个简单的方法外。事实上，RGB颜色空间由标准Cartesian座标组成，用红，绿，蓝分配颜色象的像x,y和z值那样工作。使用RGB颜色空间规定一个颜色要在三维空间选择一个点，这一点的任何组成部分表明与三个轴的黑色（0，0，0）的间距。白色（255， 255，255）表示的角是颜色“立方”斜相反的开端。

        所以RGB是方便的，但不是为了人类。人类是习惯用颜色在术语里的色调，饱各度和亮度来思考颜色。为了符合这些需要，标准的颜色选择对话框也提供一个可选择的表示这个颜色的值，HSL样式。这个可供选择的安排对于你和我是比较有意义的，虽然它要求计算机做更多的工作作为它完成有些复杂数学上的计算把HSL格式值变换成更通用的RGB值。如果你在对话框里选择拖曳选择左、右或向上和向下和观察HSL值，你将正好看到样式。那是，当你从左到右移动穿过方块，色彩值从0增加到240.当你在方块里从顶部移动到底部，饱和值从240减少到 0。当你从顶部拖曳独立的竖直的滑块到底部，亮度值从240减少到0。给这些实际的安排，你能相对的容易，成为精通从在对话框中的二个点的位置转化成一个合理的近似相应的HSL颜色值。这种情况不适用RGB。

        色调/饱和/值（HSV）颜色空间是一种HSL的修饰，值的轴线是用来测量颜色的明亮度，你的范围不能超出饱和的明亮度之外。与之比较，HSL允许你在超过饱和的明亮度之外移动，穿越蜡笔颜色，一直到白色。HSV使用一个饱和度为0的值，提供所有的颜色，这些颜色有相同的红，绿，蓝组成成份。（那是灰色的色度）。HSV是显示实例应用中的颜色方案，而且它很容易解释。

        第一个HSV值的组成部分，色调，相当于在一个圆中的角度。这个圆包含相同的颜色像在图1右手边显示的那样，但是安排在圆型的样式（请看图2）。给定这个布局，红颜色相当于0度，黄色相当于60度，等等。在实例项目中，HSV的特殊变化用来在圆中变化角度，所以颜色色调的值分配范围是从0到255— 变换是在代码内部完成的。


图2颜色圆

        饱和值相当于离圆心的距离。颜色在圆的边界是完全饱和圆心包含没有饱和的白色。图3显示的是绿色饱和值的变化范围，好象在图2显示的圆中抽取出来的。再一次，我选择从0到255范围是任意的和只有适合做选择颜色而使用HSV时感觉比较像熟悉的RGB。在真实性上，实例能刚好使用在0和1之间浮点值来表示饱和值。

图3饱和状态

        值的分配包括选择的颜色明亮度，它范围是从255（完全明亮）到0（黑暗）。再一次，重要的不是精确的值—此刻的变化是刚好实用。图4显示的绿色，它的坐标值从255变化到0。

图4 值

        当你工作中使用HSV颜色空间时，你真正拥有的是一个彩色的圆锥。在图2中的圆扮演圆锥的顶部，一条线从圆上每一个点往下到圆锥的顶点，表示黑色，为每一个颜色提供亮度范围。图5显示这个圆锥为三种颜色使用明亮轴线：绿色，蓝晶色，紫色。一个色调坐标能表示任何颜色，测量环绕圆的角度，饱和度的坐标是离圆心距离，值的坐标是于圆锥底部的顶点的距离。