Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1220603
  • 博文数量: 950
  • 博客积分: 10000
  • 博客等级: 上将
  • 技术积分: 13070
  • 用 户 组: 普通用户
  • 注册时间: 2008-08-04 09:23
文章分类

全部博文(950)

文章存档

2011年(1)

2008年(949)

我的朋友

分类: C/C++

2008-08-04 09:34:33

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

  看一个软件是否优秀,除了功能健全、性能稳定、容易操作之外,软件界面的美观越来越受到人们的关注。人们不满足于传统的矩形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"的效果图片,等等,根据自己的需要可以定义很多的事件图片,就是这么简单。 完成后的效果图:


图三:完成后的效果图

  至于换肤,那只是美工人员的事情了,多做一些皮肤吧!(小弟刚学不久,这也是我第一篇发表的文章,让大家见笑了。) 下载本文示例代码
阅读(619) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~