clayui界面库系列教程之一：做一个苹果风格的按钮

先上预览图：

     

      例子工程下载          本教程对应的工程为：CLAYUIEXP2

      好的，教程开始了......

---

      如果您下载了例子工程，可以看到，这是一个MFC对话框工程，首先，我们来进行clayui的初始化。

      按照MFC的惯例，初始化一般是写在OnInitDialog里的，您在主对话框的OnInitDialog，可以看到

clayui的初始化代码，下面，我们来逐一进行说明。

      首先，我们初始化一下clayui的环境：CLAYUI_Init(); 

      提示：在使用clayui前，必须要调用CLAYUI_Init()进行初始化

      然后，我们要创建一个clayui的绘图设备，先创建一个CRect对象：

      m_clayuirect = CRect(0, 0, 300, 300);

      这表示我们将把clayui输出的图象绘制到窗口DC的（0，0，300，300）处

      接着，创建clayui绘图设备

      CDC* pDC = GetDC();
      int width = m_clayuirect.Width();
      int height = m_clayuirect.Height();
      m_graphics.Create(width, height, this, pDC, 0);

      ReleaseDC(pDC);

         m_graphics是一个CMFC_GRAPHICS对象，CMFC_GRAPHICS这个类并不属于clayui，而是一个为了将clayui输出的图象绘制到DC上的辅助类。CMFC_GRAPHICS类创建了一个32位的位图缓冲区和一个DC对象，并把位图缓冲区的指针传递给clayui，clayui将把界面绘制在这个指针所指向的位图缓冲区。

      设置背景色

      m_graphics.SetClearColor(236, 233, 216, 255);

      这个颜色与MFC对话框的颜色相同

      接下来，设置clayui所使用的默认字体，在这里，我使用的是雅黑字体，如果您想使用其他字体，可

以在这里进行更改

      char syspath[256];
      GetWindowsDirectory(syspath, 256);
      CString sys_path(syspath);
      sys_path += CString("//fonts//MSYH.TTF");
      CLAYUI_SetDefaultTextName(sys_path.GetBuffer(0));

      接着创建一个clayui的主窗口，在这里，我新建了一个CEXP2Frame类，派生自CLAYUI_BFRAME

      说明一下：clayui里的窗口基类是CLAYUI_FRAME，而CLAYUI_BFRAME相当于一个“富/父”窗

口，它可以容纳多个CLAYUI_FRAME子窗口

      m_mainframe = new CEXP2Frame();
      m_mainframe->m_gitemframe = m_mainframe;
      m_mainframe->Init(NULL, m_graphics.m_draw, FALSE);

      m_gitemframe表示一个图形存储容器，在这里，m_mainframe的图形存储容器就是它本身。

      然后，读取并创建一个swf图形对象，这里的swf文件就是苹果样式的按钮。

      CString swfpath = exepath + CString("//macbutton.swf");
      HL_GITEM swfitem = CLAYUI_CreateSwfItem(swfpath.GetBuffer(0), 0);

 

      提示：clayui目前仅支持简单的swf文件，不支持swf中的遮罩，滤镜，AS脚本，增强笔刷，位图

      HL_GITEM是一个clayui的图形对象，接下来得到swf对象的高度和宽度

      int gw, gh;
      CLAYUI_GetGItemWH(swfitem, gw, gh);

      然后将图形对象交给m_mainframe管理，当然，您也可以自己管理。该图形对象在m_mainframe

销毁时会被自动销毁

      m_mainframe->AddGraphicsItem(swfitem);

      接着创建一个子窗口

      CLAYUI_FRAME* frame = m_mainframe->AddFrame(0, "test1", 50, 50, gw, gh, 100);

     

      说明一下AddFrame的各个参数：

 

---

 

      BOOL iscreateIndex：暂时没用的参数，设为0

      char* framename：子FRAME的标识，必须在m_mainframe里是唯一的，否则不能创建并返回NULL

       int x：

       int y：子FRAME的坐标，子FRAME的中心点默认是左上角，所以，这个坐标是子FRAME的左上角在m_mainframe中的位置，m_mainframe默认的坐标是（0，0）

       int width：

       int height：子FRAME的宽度和高度，设置为与swf对象的高宽一致

       INT64 life：子FRAME的生命值，这是clayui的一个比较特别的地方，当子FRAME的生命值为0时，子FRAME会被自动销毁

 

---

 

       接下来，将swf对象设置为子FRAME的皮肤

       frame->AddFrameItem(swfitem, NULL, 0, 0, 0, 1, 1, 1);

       CLAYUI_FRAME对象可以使用AddFrameItem添加多个图形对象作为自己的皮肤，在这里我只使用一个swf对象作为子frame的皮肤

       对AddFrameItem的参数说明：

---

       HL_GITEM gitem：clayui的图形对象

       GRAPHICS_EXTINFO* gextinfo：图形参数的扩展，这里对swf对象无用，设为NULL

       int x：

       int y：图形对象在子FRAME窗口中的坐标，同样的，以左上角为基准

       int angle：

       float xscale：

       float yscale：

       float alpha：图形对象的旋转角度，缩放系数，透明度

---

       下面，我们可以对子FRAME进行一些修改：调整颜色，旋转角度，缩放系数

       将颜色改为蓝色

       frame->SetColorTrans(100, 100, 100, 100, 0, 0, 0, 200);

 

       提示：颜色改变公式为：dest = src * mult + add，mult取值范围为0-100，add取值范围为0-255

      

       缩放为原来的1.2倍
       frame->ScaleTo(1.2, 1.2);

       旋转到-10度
       frame->RotateTo(-10);

 

       我们可以给子FRAME加一个滤镜效果，目前，clayui只支持阴影滤镜

 

       frame->SetBmpEffect(TYPE_BMPEFT_SHADOW, 8, 5, 5, 0, 0, 0, 255);

 

       参数比较简单：阴影的模糊半径，阴影与原图形对象的位移，颜色

 

       主窗口创建完以后，还要把主窗口与绘图设备进行绑定

 

       m_rootframe_wrapper.InitRootFrame(m_mainframe);
       m_graphics.AttachToRootFrame(m_rootframe_wrapper.m_rootframe);

 

       同样的，m_rootframe_wrapper也是一个辅助对象，封装了一些API，方便使用，绑定以后，m_mainframe对象由m_rootframe_wrapper负责销毁

 

       由于clayui是一个包含有动画效果的界面库，所以需要不断更新，在这里，我创建了一个定时器，在OnTimer里进行clayui的更新

 

       SetTimer(0, 2, NULL);
       m_timecount = ::timeGetTime();

 

       m_timecount在OnTimer里记录当前时间，让clayui每隔20毫秒刷新一次

 

       在初始化的最后，我们来创建一个初始的动画效果，让刚才创建的标识为“test1"的frame从对话框外面飞到里面，创建动画的代码在CreateInitAnimation里：

 

       首先，把frame移动到窗口外面：

 

       frame->MoveTo(0, -50);

 

       接着，创建一个平移动画对象：

 

       CLAYUI_MOVE_ANIM* move = new CLAYUI_MOVE_ANIM();

 

       给动画对象设置一个标识

 

       move->SetIdname("move0");

 

       初始化一下

 

       move->Init(frame, 50, 50, 1500, m_mainframe);

 

       对Init函数说明：

---

       CLAYUI_FRAME* frame：要产生平移动画的子FRAME

       int xto：

       int yto：目的坐标

       int duration：持续时间，豪秒。duration会最终被换算成桢数，默认按照20桢/秒进行换算

       CLAYUI_BFRAME* bframe：负责管理动画对象的父窗口

---

          动画对象将会以frame当前的位置作为起点，如果要使用固定的起点，请使用

       move->Init(int xfrom, int yfrom, int xto, int yto, int duration, CLAYUI_BFRAME* bframe)

       并使用move->SetTarget(frame)设置要平移的frame对象

 

---

 

       接下来，将动画对象加入到m_mainframe中，由m_mainframe负责管理

 

       m_mainframe->AddAnimation(move);

 

       设置动画的运动方式

 

       move->SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Elastic,
                        CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);

 

       提示：clayui有多种缓动方式，具体可以查看类CLAYUI_MOVETYPE里的定义

 

       最后，播放

 

       move->Play();

 

       接下来，我创建了一个缩放动画，与平移动画大同小异，大家可以试着创建其他的动画试一下

 

       初始化完了之后，还要让clayui获取用户的操作，这样，界面才能与用户进行交互

 

       这里需要重载MFC主对话框的PreTranslateMessage函数，然后添加clayui与用户进行交互的接口，这基本上没什么好说的，我就不讲了，具体看PreTranslateMessage里的代码就可以了

 

       然后，就是将clayui的界面更新，并绘制到DC上了，这段代码在MFC主对话框的ReDraw函数里，也没什么好讲的，主要是这句：

       m_graphics.Draw();   负责clayui界面的更新

 

       最后，我们来尝试一下响应clayui的消息，并写自己的消息处理函数

 

       先在CEXP2Frame类里重载CLAYUI_BFRAME的UserAction函数，这个函数相当于MFC里的PreTranslateMessage函数

 

       我们来响应一下刚才创建的”test1"子FRAME的左键点击消息：

 

           先得到test1的指针

       CLAYUI_FRAME* test1 = GetChildFrame("test1");

 

       然后判断是否是左键点击消息，并且发送消息方是test1

 

       if(msg == CLAYUI_LCLICK && msginfo->GetFrame(this) == test1)

 

       然后，我们得到在CreateInitAnimation里创建的scale0对象，让它进行一个缩放的动画。

 

       好的，这次教程就结束了，下次教程将会对clayui的窗口基类进行详细说明