一个类似CColorDialog中颜色选择的控件实现

一个类似CColorDialog中颜色选择的控件实现

如图一

一. 了解

1. 这个控件相当于一个3维坐标, 分别是H(色调), S(饱和度), L(亮度). 但显示器显示的是一个平面, 所以分成了两块 HS维度块和L维度块.
2. 我们使用GDI/GDIP, 通常是使用RGB格式的颜色结构, 所以需要实现RGB与HSL的互转.
3. HS维度块上的颜色是怎么产生的? L取中间值120, 从而得到HS维度块的RGB颜色实现绘制.
4. 有一个疑问, HSL的范围分别是: H[0, 360], S[0, 1], L[0, 1], 而在图一中却并不是这样, 而都是[0, 240]范围. 
   其实是控件把它们都映射到[0, 240]范围而已. 在HSL/RGB互转算法是不需要映射到[0, 240]的.

二. 实现

1. 根据上面的了解, 实现就很简单了.
2. 我使用GDIP, 所以我增加了一个维度, "透明维度": A.
如图二

三. 小结

1. HSL的原始范围与[0, 240]范围的映射容易让人搞糊涂.
2. 在实现过程中要经过从HSL原始范围映射到[0, 240]范围, 再从[0, 240]范围映射到控件的像素大小范围.
3. 还需要对HSL与RGB的互转, 互转算法是从HSL的原始范围直接转RGB的, 不需要转[0, 240], 看来[0, 240]只是为了UI显示方便而使用的.

四. 思考

我们是不是可以直接实现RGB的控件, 而不需要通过HSL?
如图三


1. RG维度块中的颜色, B取128.
2. 明显没有HSL空间那么直观.
3. 这里使用 RG-B分块, 那么也可以GB-R, RB-G分块, 反正颜色就是没有HSL那么直观.
4. 所以为什么使用HSL颜色空间, 再转RGB, 还是有它的道理的.


HSL与RGB互转算法参考:

http://www.cnblogs.com/daiguagua/p/3311756.html

// 颜色选择另外一种实现方式
http://www.vckbase.com/Public/Uploads/attach/code/12/ColorPickerDemo.zip