软件换肤技术在 BCB 中的实现

作者：吴康彬来源：网上收集发布时间：2007-3-27 10:17:28

软件换肤技术在 BCB 中的实现

作者：吴康彬

下载源代码

　　看一个软件是否优秀，除了功能健全、性能稳定、容易操作之外，软件界面的美观越来越受到人们的关注。人们不满足于传统的矩形windows窗体，不规则窗体的软件到处可见，更进一步发展到软件界面由用户根据自己的爱好自由控制，真正实现了软件对用户的友好性。而要实现这一功能，软件换肤技术就是基础。下面我就介绍一种简单明了的方法来制作一个登陆对话框，本程序编程环境C++Builder：
　　首先由程序员根据功能要求定义界面元素（控件）,特别值得注意的是控件的名字。如下图：

图一：元素界面

　　其次，美工人员根据该界面元素画图。程序员和美工之间的桥梁是通过一个xml描述文件，也就是说美工每画好一幅图后就要填写一个xml文件。该xml文件需要包括的内容有：每个界面元素在该图中的坐标、元素的尺寸、元素在窗体中的坐标、当鼠标放上、按下、弹起以及普通、失效等效果图在整个图片中的位置。如下图：

图二：美工制作的登陆窗口元素图

　　接下去填写xml描述文件，如下：

<?xml version = "1.0" encoding="UTF-8"?>  <root> <control> <ctrlName>BMin</ctrlName>  //控件名称 <size>                    //控件尺寸 <height>18</height>    //控件高度 <width>18</width>      //控件宽度 </size> <formPos>                //控件在窗体中的位置 <left>302</left>     //x坐标 <top>2</top>         //y坐标 </formPos> <action>                //事件效果图片位置 <normal> //普通              <left>0</left>//x坐标              <top>268</top>  //y坐标 </normal> <mouseUp> //鼠标放上              <left>0</left>              <top>291</top> </mouseUp> <mouseDown>//鼠标按下              <left>0</left>              <top>314</top> </mouseDown>
         <disable/>     //失效
        <focus/>       //获取焦点 </action> </control> <control> <ctrlName>BClose</ctrlName> <size> <height>18</height> <width>18</width> </size> <formPos> <left>327</left> <top>2</top> </formPos> <action> <normal>             <left>28</left>             <top>268</top> </normal> <mouseUp>             <left>28</left>             <top>291</top> </mouseUp> <mouseDown>             <left>28</left>            <top>314</top> </mouseDown> </action> </control>
 ...    //省略了其它的一些元素"<controls/>"
</root>

　　到此美工人员的任务就算大功告成了。(其实程序员和美工可以同步进行，程序员不必去考虑界面元素的布局，因为整个软件最终的效果都是有美工控制，程序员要实现的只是解析xml数据，使界面元素按照给定的参数显示就可以。)
　　如果程序中每次动态的去解析xml文件，然后安置控件，有可能会比较慢，特别是当界面元素比较多的时候，频繁的读和解析xml会有明显的停顿。所以我的做法是这样的：首先定义一个结构体，获取所有的界面元素。分析xml文件把所有的控件元素信息一次性解析完。这样速度快很多。

typedef struct Ctrls    {   String ctrlName; //控件名称    TPoint formPos; //控件在窗体中的位置 int width; //控件宽度 int height; //控件高度 bool hasNormal; //是否有普通效果图片 bool hasMouseUp; //是否有鼠标放上效果图片 bool hasMouseDown; //是否有鼠标按下效果图片 bool hasDisable; //是否有失效效果图片
 bool hasFocus; //是否有得到焦点时效果图片 TPoint normal; //普通效果图片在整个图片中的位置 TPoint mouseUp; //鼠标放上效果图片在整个图片中的位置
 TPoint mouseDown; //鼠标按下效果图片在整个图片中的位置
 TPoint disable; //控件失效效果图片在整个图片中的位置
 TPoint focus; //控件获得焦点效果在整个图片中的位置
    }m_ctrls;

创建不规则窗体代码如下：

    register int x,y;    int l,r;    POINT *a;    bool lb,rb;    HRGN WndRgn,TempRgn,tepRgn;    this->LoginDlgBG->Left = 0;    this->LoginDlgBG->Top  = 0;    Graphics::TBitmap *bitmap0 =new Graphics::TBitmap;    bitmap0->LoadFromFile(".\\login\\Login_Bg.bmp");    this->LoginDlgBG->Picture->Bitmap = bitmap0;    TColor baseColor = LoginDlgBG->Canvas->Pixels[0][0];    if((a=(POINT *)malloc(LoginDlgBG->Width*2*(sizeof(POINT))))==NULL)    {          ShowMessage("动态分配内存失败!");          exit(0);    }    Width=LoginDlgBG->Width;    Height=LoginDlgBG->Height;    Repaint();    l=0;r=LoginDlgBG->Height*2-1;    WndRgn=CreateRectRgn(0,0,LoginDlgBG->Width,LoginDlgBG->Height);    for(y=0;yHeight;y++)    {       lb=true;       for(x=0;xWidth;x++)       if(LoginDlgBG->Canvas->Pixels[x][y]!=baseColor)       {           a[l].x=x+1;           a[l].y=y;           lb=false;           break;       }       if(lb) a[l]=a[l-1];        l++;       rb=true;       for(x=LoginDlgBG->Width-1;x>=0;x--)          if(LoginDlgBG->Canvas->Pixels[x][y]!=baseColor)             {                a[r].x=x;                a[r].y=y;                rb=false;                break;             }        if(rb) a[r]=a[r+1];         r--;    }   r=LoginDlgBG->Height*2-1;   for(y=0;yHeight;y++){   for(x=a[y].x;xCanvas->Pixels[x][y]==baseColor)       {          tepRgn=CreateRectRgn(x,y,x+1,y+1);          CombineRgn(WndRgn,WndRgn,tepRgn,RGN_XOR);          DeleteObject(tepRgn);       }         r--;     }   TempRgn=CreatePolygonRgn(a,LoginDlgBG->Height*2,ALTERNATE);   CombineRgn(WndRgn,WndRgn,TempRgn,RGN_AND);   DeleteObject(TempRgn);   free(a);   SetWindowRgn(Handle,WndRgn,true);   //该段代码借鉴网络发表的文章，不做解释   SetWindowPos(Handle,HWND_TOP,0,0,0,0,SWP_NOMOVE|SWP_NOSIZE);

　　获取窗体的所有控件，并解析xml，在此不做累述，详见工程文件，在程序里提供了一个很好的xml解析类。不过在这里有一个技巧性的问题不得不提一下：在 C++Builder中要对按钮进行绘图和制作不规则按钮始终不是件容易的事，一开始我用TSpeedButton,该类按钮可以很好的绘图，但是我没有办法获取到它的句柄，它继承了TGraphicControl，所以要制作一个不规则的按钮就没有什么办法了。（不知道有没有高手愿意告诉我怎么获取，在此谢过），我用了投机取巧的方法，就是用TImage类来代替了TButton类，因为TImage类可以使用异或等运算使前景色和背景色抵消，而且对美工人员来说，画好图后，把不规则按钮，直接复制下来就方便的多了。下面是我的BCB中的创建按钮代码：

void __fastcall TForm1::createButtonCtrl(TImage *image ,String ctrlName ,String actionName){   int i,picX ,picY;   for(i =0 ; i < this->ControlCount ; i++)   {      if(controls[i].ctrlName == ctrlName)   //循环查找，找到ctrlName控件      {         break;      }   }  image->Width = controls[i].width;  image->Height = controls[i].height;  image->Left = controls[i].formPos.x;  image->Top = controls[i].formPos.y;   //设置按钮的位置 和 大小  if(actionName == "normal")     //判断当前需要获取的事件按钮  {     if(!controls[i].hasNormal)        return;     picX = controls[i].normal.x; //获取普通按钮效果图在整个图片的位置     picY = controls[i].normal.y;  }  else if(actionName =="mouseUp")  {     if(!controls[i].hasMouseUp)        return;      picX = controls[i].mouseUp.x;     picY = controls[i].mouseUp.y;  }  else if(actionName == "mouseDown")  {      if(!controls[i].hasMouseDown)        return;       picX = controls[i].mouseDown.x;     picY = controls[i].mouseDown.y;  }  else if(actionName == "disable")  {      if(!controls[i].hasDisable)        return;        picX = controls[i].disable.x;     picY = controls[i].disable.y;  }  else  {      if(!controls[i].hasFocus)        return;     picX = controls[i].focus.x;     picY = controls[i].focus.y;  }   ////获取图片   TRect rect0,rect1;      //在整个图片中获取指定的效果图   rect0.left = picX;   rect0.top = picY;   rect0.right = image->Width + picX;   rect0.Bottom = image->Height + picY;   rect1.left = 0;   rect1.top = 0;   rect1.right = image->Width ;   rect1.Bottom  = image->Height;   image->Picture->Bitmap->Height = image->Height;   image->Picture->Bitmap->Width = image->Width;   //通过内存拷贝获取   image->Picture->Bitmap->Canvas->CopyRect(rect1,this->LoginDlgBG->Canvas,rect0);  }

　　上面的代码很简单，同时也很好的说明了一个问题，图片是可以代替按钮来使用的，主要有几种情况：当按钮为普通的状态时，只要获取标识为"normal"的效果图片，当鼠标放在按控件上时就获取

标识为"mouseUp"的效果图片，当鼠标按下时

就获取标识为"mouseDown"的效果图片,等等，根据自己的需要可以定义很多的事件图片，就是这么简单。完成后的效果图：

图三：完成后的效果图

　　至于换肤，那只是美工人员的事情了，多做一些皮肤吧！（小弟刚学不久，这也是我第一篇发表的文章，让大家见笑了。）