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

下载本文示例代码
下载源代码

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


图一：元素界面

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


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

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

  

 

 BMin  //控件名称

                     //控件尺寸

 18    //控件高度

 18      //控件宽度

 

                 //控件在窗体中的位置

 302     //x坐标

 2         //y坐标

 

                 //事件效果图片位置

  //普通 

             0//x坐标 

             268  //y坐标

 

  //鼠标放上 

             0 

             291

 

 //鼠标按下 

             0 

             314

 
              //失效
               //获取焦点

 

 

 

 BClose

 

 18

 18

 

 

 327

 2

 

 

  

            28 

            268

 

  

            28 

            291

 

  

            28

            314

 

 

 
 ...    //省略了其它的一些元素""

　　到此美工人员的任务就算大功告成了。(其实程序员和美工 可以同步进行，程序员不必去考虑界面元素的布局，因为整个软件最终的效果都是有美工控制，程序员要实现的只是解析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"的效果图片,等等，根据自己的需要可以定义很多的事件图片，就是这么简单。 完成后的效果图：


图三：完成后的效果图

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

输入您的搜索字词 提交搜索表单