您现在的位置:首页 >> 界面报表 >> 界面报表 >> 内容

使用Delphi实现图片界面换颜色

时间:2011/9/3 15:24:27 点击:

  核心提示:准备 首先我用eXeScrope打开了WMP9和MSN6的相关可执行文件和动态链接库,没找到有关界面的资源,晚辈才疏学浅,猜想可能它们的界面是实时计算出来的吧。QQ2004和Winamp5就比较直观了...
< 准备 >
    首先我用eXeScrope打开了WMP9和MSN6的相关可执行文件和动态链接库,没找到有关界面的资源,晚辈才疏学浅,猜想可能它们的界面是实时计算出来的吧。QQ2004和Winamp5就比较直观了,一个是直接用BMP文件的,另一个采用的是PNG格式。
    BMP文件没什么好说的,关于PNG格式我这里略说两句。PNG(Portable Network Graphics)是为了适应网络数据传输而设计的一种图像格式,用于取代格式较为简单、专利限制严格的GIF图像文件格式。PNG格式大致具有以下优点:高压缩率、支持Alpha通道(全透明、全不透明、可变透明)、提供Gamma(图像亮点)校正机制、提供二维交叉存取机制、支持真彩/灰度/颜色索引的图像。
    分析了一下Winamp5的图形界面布局,他许多漂亮的阴影、渐变效果可不是BMP通过指定颜色透明能做到的;另外考虑到一个程序使用图片皮肤的话文件都会比较多,BMP的话一般都至少有几百K的总大小;所以我觉得PNG图片更适合来做绚丽的界面皮肤。
    Delphi默认是不支持PNG格式的图片的,只能去下载第三方控件了。到DFW论坛里去搜了很多终于让我找到了PNGImage这么个好东东,带源代码、帮助文件,无需安装,支持PNG透明。呵呵,这样我们就可以开工了!

< 动手 >
    我先看了一下PNGImage的帮助文件,里面的《Example 3: Drawing png over other formats》是一个将一幅指定的PNG图片读入后覆盖到一幅JPG图片上的示例,我尝试了一下能很好的支持带透明的PNG文件。因为是要拿这些PNG文件来作程序界面的,所以我首先打算要把这个PNG图片画到窗体上去:
uses
  ..., pngimage;  // 加上这个
procedure TForm1.FormPaint(Sender: TObject);
var
  Png: TPngObject;
  Rect: TRect;
begin
  Png := TPngObject.Create;
  Png.LoadFromFile(’1.png’);
  Rect.Left := 0;
  Rect.Top := 0;
  Rect.Right := Rect.Left + Png.Width;
  Rect.Bottom := Rect.Top + Png.Height;
  Png.Draw(Canvas, Rect);
  Png.Free;
end;
以上代码实现了将1.png文件读入后画到窗体上去,这张图片是Winamp5的默认主界面,其中右下角有一块凹入的是透明部分,怎么样,效果出来了吧(如图1)。

    说了这么多,现在该考虑我们的重点内容“换肤色”了。我考虑的基本原理是:先将所有界面相关的图片都做成灰阶PNG图片,可以做出颜色渐变、立体等各种效果;然后用指定的色彩“蒙”到灰阶图片上去。想起来简单,可实际动起手来发现还是碰到了好多问题。因为对RGB颜色和位图只了解一点,一开始便胡乱猜想是不是拿灰阶图片中的某一点像素的RGB值去和指定颜色的RGB值做逻辑与运算(呵呵,让人笑话了),编了点代码试了试,对于几种颜色(黑、白、红、绿、蓝、黄、桃红)的确能“蒙”出正确颜色来(通过和做图软件中得出的效果进行比较),可其他的比如渐变色、非常规色等,就拿刚才前面用到的Winamp5主界面的图片,转出来后变成了大花脸。。。唉,别偷懒,还是好好分析一下吧。

< 动脑 >
    以“浅色-深色”渐变图片为例,假设我们要将所有含“深色”色的像素转成指定色彩,也就是要转成类似白-红、浅黄-深黄渐变的效果。我们知道TColor其实是用一定范围的十六进制数值来表示的,从低位到高位每个字节分别保存红、绿、蓝的值。对于灰阶色来说,每一种“灰色”其R、G、B的三值是相等的,从黑(RGB(0,0,0))到白(RGB(255,255,255))。经过一段时间的琢磨,我发现对某一像素点的色彩转换大致的思路应该是:
该点目标色离白色的“距离”(之间的值差,姑且这样称呼吧)/指定彩色离白色的“距离” = 该点灰色离白色的“距离”/最深色离白色的“距离”
这里的“距离”其实分别是该种颜色的R、G、B三值和255的差的绝对值。有点昏了是吧?呵呵,其实应该是比较好理解的,直观一点的原始公式(分别计算R、G、B三值)是:
(255 - 目标色R值) / (255 - 指定色R值) = (255 - 灰色R值) / (255 - 最深色R值)
移项后可得解:
目标色R值 = 255 - (255 - 灰色R值) * (255 - 指定色R值) / (255 - 最深色R值)
同理可得目标色的G、B值。现在你可以拿一个指定色(一种浅红)(RGB(153,0,0))和一种灰(RGB(204,204,204))算一下,分别四舍五入后得出的结果RGB(235,204,204),拿到做图软件里去对比一下吧,和做图软件里产生的彩色渐变出来的效果基本看不出区别了!
    既然算法已经找到了,转成代码就再轻松不过了:
procedure TForm1.Button2Click(Sender: TObject);
var
  i, j: Integer;
  R, G, B, RGBTemp: Cardinal;
  t1, t2: Cardinal;
  Png: TPngObject;
  Rect: TRect;
begin
  Png := TPngObject.Create;
  Png.LoadFromFile(’2.png’);
  t1 := GetTickCount;
  for i := 0 to Png.Width - 1 do
  begin
    for j := 0 to Png.Height - 1 do
    begin
      RGBTemp := Png.Pixels[i, j];
      R := GetRvalue(RGBTemp);
      G := GetGvalue(RGBTemp);
      B := GetBvalue(RGBTemp);
      { 计算公式:目标色R/G/B值 = 255 - (255 - 灰色R/G/B值) * (255 - 指定色R/G/B值) / (255 - 最深色R/G/B值) }
      Png.Pixels[i, j] := RGB(255 - (255 - R) * (255 - 153) div 255, // 按公式计算当前像素的 R 的值
                              255 - (255 - G) * (255 - 0) div 255,   // 计算 G 值
                              255 - (255 - B) * (255 - 0) div 255);  // 计算 B 值
    end;
  end;
  Rect.Left := 448;
  Rect.Top := 152;
  Rect.Right := Rect.Left + Png.Width;
  Rect.Bottom := Rect.Top + Png.Height;
  Png.Draw(Canvas, Rect);
  t2 := GetTickCount - t1;
  ShowMessage(IntToStr(t2));
  Png.Free;
end;

作者:网络 来源:转载
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • 盒子文章(www.2ccc.com) © 2022 版权所有 All Rights Reserved.
  • 沪ICP备05001939号