65.9K
CodeProject 正在变化。 阅读更多。
Home

Adobe 颜色选择器克隆 - 第 1 部分

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (22投票s)

2005年3月28日

9分钟阅读

viewsIcon

157841

downloadIcon

5053

这是两篇文章中的第一篇,包含看起来和操作起来都像 Adobe Photoshop 中颜色拾取控件的控件。

Sample Image - adobe_cp_clone_part_1.jpg

引言

为什么还要另一个颜色拾取控件?

这是我正在进行的关于 .NET 控件的文章系列的第一篇,该控件的行为类似于 Adobe Photoshop 最新版本中常见的颜色拾取控件。我首先要说的是,我知道 .NET Framework 中包含内置的颜色对话框,甚至比这些更好的还有几个颜色拾取器,你可以在 Code Project 上找到。虽然这些控件做得很好,但我作为 Adobe Photoshop 的粉丝,发现它们在选项方面有所欠缺,或者像此处现有的项目一样,它们并不是我想要的用于我项目的内容。

关于我和我的编程风格的说明

为了篇幅和可读性,本文不会深入探讨我的代码,但对于那些下载并查看代码的人,我想简要谈谈我的命名约定和编程风格。我喜欢将我的代码分成区域,你会注意到我所有的类都有变量、构造函数/析构函数、事件、公共方法和私有方法部分。我知道对我来说,这使得在调试时更容易找到我想要的方法,而无需滚动二十或三十个函数来找到我需要修复的内容。此外,我试图让我的变量名具有描述性,所有类成员变量都带有前缀“m_”,后面跟着“i”、“b”、“sz”,分别代表整数、布尔值和字符串。

颜色:RGB、HSL 和 CMYK

这些格式是什么?

对于知道这些的人,你们可以跳过这一部分。颜色可以用多种方式表示,其中一种最受欢迎的是 RGB 或红绿蓝。通常,每个 RGB 值(对于 24 位位图)存储为 0-255,这允许你拥有超过 1600 万种颜色。

对于程序员来说,这就可以了,但对于大多数艺术家来说,有更好的方法来显示颜色图。对于艺术家来说,你通常会发现某种类型的 HSL(色相、饱和度、亮度)表示。这有时也称为 HSB(B 代表亮度)。色相代表色轮的 360 度,饱和度代表显示的颜色多少,亮度描述颜色的深浅。这些值的组合允许你轻松找到那些中间颜色(例如红橙色或其他)然后调整它们的亮度和饱和度。

CMYK 值,即青色/品红色/黄色/黑色,更多地用于印刷应用,其中平衡项目所用油墨的量非常重要。

在格式之间转换

使这个项目成功的关键是能够转换 RGB、HSL 和 CMYK 值。最终,我也想找到一个 Lab 值的公式,但目前我在颜色拾取器表单上将这些框禁用。对于那些想在自己的项目中使用此项目的人,你可以只需将 Lab 文本框和标签的可见性更改为 false

为了帮助我转换颜色值,我创建了我的 AdobeColors 类。这个类大致基于我在 Bob Powell 的网站上找到的一个类,但是,我不得不更改 HSL 公式(出于某种原因,Adobe Photoshop 的转换方式与其他所有人的方式都不同),并且我不得不添加我自己的 CMYK 函数。

使用该类非常简单,例如,假设你想将 Drawing.Color 转换为 HSL 值,你只需执行以下操作

Color my_rgb_color = Color.Red;
AdobeColors.HSL my_hsl_color = AdobeColors.RGB_to_HSL(my_rgb_color);

在 RGB 和 CMYK 值之间转换是类似的

Color my_rgb_color = Color.Red;
AdobeColors.CMYK my_cmyk_color = AdobeColors.RGB_to_CMYK(my_rgb_color);

然而,在 CMYK 和 HSL 值之间转换有点棘手。在我更新 AdobeColors 类之前,你必须先将 CMYK 转换为 RGB,然后再将 RGB 转换为 HSL。目前,我还没有遇到过这种情况,所以我不觉得这是一个主要的性能问题。下面是我包含在 AdobeColors 类中的所有 static

Color HSL_to_RGB(HSL hsl)
HSL RGB_to_HSL(Color c)
CMYK RGB_to_CMYK(Color c)
Color CMYK_to_RGB(CMYK _cmyk)
// these functions are based on functions found in the original 
// class found on Bob Powell’s website
Color SetBrightness(Color c, double brightness)
Color ModifyBrightness(Color c, double brightness)
Color SetSaturation(Color c, double Saturation)
Color ModifySaturation(Color c, double Saturation)
Color SetHue(Color c, double Hue)
Color ModifyHue(Color c, double Hue)

ctrlVerticalColorSlider 和 ctrl2DColorBox

控件背后的概念

这些控件完成了项目中大部分的繁重工作。ctrl2DColorBox 是方形控件,用于绘制 RGB 或 HSL 的 2 个值,具体取决于选择的无线电按钮。ctrlVertialColorSlider 绘制所选的另一个 RGB 或 HSL 值。结合起来,如果你将滑块视为第三轴,这些控件可以让你模拟所有颜色的 3D 图。

每个控件有六种模式或 DrawStyles,用于确定其外观以及如何解释用户的输入。

DrawStyle 描述 ctrlVerticalColorSlider ctrl2DColorBox
色相 代表色轮的 0-360 度。 控件上垂直绘制色相的所有值,从 0 到 360 度。饱和度和亮度恒定为 100%。 色相恒定,基于控件的主要颜色。饱和度沿 X 轴绘制在控件上,范围从 0% 到 100%,亮度沿 Y 轴从 100% 到 0% 绘制。
饱和度 代表颜色的显示程度,从 0% 到 100%。 控件上垂直绘制饱和度的所有值,从 0% 到 100%。色相和亮度值从控件设置的主要颜色中获取。 饱和度恒定,基于控件的主要颜色。色相沿 X 轴绘制在控件上,范围从 0% 到 100%,亮度沿 Y 轴从 100% 到 0% 绘制。
亮度 代表颜色的亮度,从 0% 到 100%。 控件上垂直绘制亮度的所有值,从 0% 到 100%。色相和饱和度值从控件设置的主要颜色中获取。 亮度恒定,基于控件的主要颜色。色相沿 X 轴绘制在控件上,范围从 0% 到 100%,饱和度沿 Y 轴从 100% 到 0% 绘制。
红色 代表红色的显示量,从 0 到 255。 控件上垂直绘制红色从 0 到 256 的所有值。蓝色和绿色值从控件设置的主要颜色中获取。 红色恒定,基于控件的主要颜色。蓝色沿 X 轴绘制在控件上,范围从 0 到 256,绿色沿 Y 轴从 256 到 0 绘制。
绿色 代表绿色的显示量,从 0% 到 100%。 控件上垂直绘制绿色从 0 到 256 的所有值。蓝色和红色值从控件设置的主要颜色中获取。 绿色恒定,基于控件的主要颜色。蓝色沿 X 轴绘制在控件上,范围从 0 到 256,红色沿 Y 轴从 256 到 0 绘制。
蓝色 代表蓝色的显示量,从 0% 到 100%。 控件上垂直绘制蓝色从 0 到 256 的所有值。红色和绿色值从控件设置的主要颜色中获取。 蓝色恒定,基于控件的主要颜色。红色沿 X 轴绘制在控件上,范围从 0 到 256,绿色沿 Y 轴从 256 到 0 绘制。

如何使用这些控件

将这些控件添加到你的项目并不比添加其他任何控件更难。将控件文件与 AdobeColors.cs 一起添加到你的项目后,你只需转到工具箱中的“我的用户控件”选项卡,然后将它们拖放到你的表单上即可。每个控件都有一个 DrawStyle 属性,以及一个 HSLRGB 属性,它们可以帮助你设置控件的颜色,并在用户更改它们时检索它们。当这种情况发生时,你会通过控件的 Scroll 事件知道。

就是这么简单,控件会处理其余的事情。对于像我的 frmColorPicker 这样的表单,你仍然需要处理每个控件的事件,并在其中一个控件被更改时更新控件。

将此代码添加到你自己的项目中

在此我需要说明,只要将功劳归于原作者,这段代码就可以免费用于你的项目中。我相信对于这里的大部分项目来说,这意味着保留代码文件中的标题以及原作者的姓名。如果你确实决定使用我写的一些代码,请随时给我发电子邮件,这激励我做出更多贡献(并提升我的自尊心)。

话不多说,只需将以下文件包含到你的项目中,就可以开始编码了

  • AdobeColors.cs
  • ctrl2DColorBox.cs
  • ctrlVerticalColorSlider.cs
  • frmColorPicker.cs

该项目的未来计划

正如我之前所说,这是两部分项目中的第一部分。下一部分将介绍我编写的一些额外的控件,它们与本项目中的控件类似,我认为任何发现本项目有用的人都会发现它们很有用。

此外,Adobe Photoshop 的粉丝会发现我还没有在这个项目中完成 Lab 颜色或 Web 颜色。对于我自己的项目(我最初为之编写这段代码的项目),我不需要这些功能,但是,我非常欢迎任何人能帮助我完成这些的帮助或建议。我非常愿意在有时间的时候改进这个项目,并且欢迎你提出任何建议。

致谢

  • Bob Powell

    我的 AdobeColors 类是基于我在他的 GDI+ 网站上找到的一个类。在绘制用户控件的渐变时,我还发现他的网站上的其他部分非常有用。他的网站可以在 这里找到。

  • Anna-Carin

    我在一个文章中找到了一个用 VB6 编写的 Adobe Color Picker 克隆,可以在 这里找到。虽然我决定用我的项目采取完全不同的方法,但我确实发现 RGBHSL 的方法非常有用,并且比 Adobe 的方法更准确。

  • Mick Tilbury

    这是我在网上冲浪时偶然发现的另一个网站,它有一个非常简单但优雅的从 RGB 转换为 CMYK 的解决方案,我觉得很有用。该网站可以在 这里找到。

  • Adobe

    没有 Adobe Photoshop,我真的无法制作一个 Adobe Photoshop 颜色拾取器克隆。

历史

  • 2005 年 3 月 28 日:首次发布

许可证

本文未附加明确的许可证,但可能在文章文本或下载文件本身中包含使用条款。如有疑问,请通过下面的讨论区联系作者。

作者可能使用的许可证列表可以在此处找到。

© . All rights reserved.