文档文库

手机版

投诉建议

首页 > 专注界面开发

专注界面开发

发布时间：2012-07-20 11:36:48 来源：文档文库

小中大

字号：

手机查看

FLEX? WPF? C++? 快来体验下clayui编辑系统吧

羡慕FLEX，WPF的界面效果？

现在不用羡慕了，有了clayui以及界面编辑系统，可以很方便的为界面添加互动动画效果，clayui是用纯C++编写的，可以用于任何支持C++的系统。

clayui现在支持windows，wince，android ，linux，并且提供了纯软件渲染，Directx3D，opengl es，三种渲染方式。

这次放出的clayui编辑系统，以及稍候放出的windows-纯软件渲染版本的开发库是完全免费的，可用于任何商业或非商业应用。

如果对clayui开发库或者编辑系统有任何问题，可以加入QQ群：174738354 来讨论，请注明：clayui。clayui编辑系统和开发库的更新也会首先在QQ群里发布。

好，不多说了，下面来体验下clayui的界面编辑系统。

下载

1. 首先启动 clayui界面设计器，点击皮肤库标签，在皮肤栏里点击“打开”，载入 “皮肤.cncskin”，如下图：

2. 然后点击布局库标签栏，在布局栏里点击“打开”，载入 “布局.cnclayoutedit” ，如下图：

3. 点击“窗体设计”，如下图：

4. 点击“清空并打开”，载入 “2D动画”文件夹下的 “1.平移.cncwork”，如下图：

5. 准备工作完毕，现在点击“测试”按钮，如果一切顺利的话，将会看到如下图所示的场景：

这是一个平移动画的演示，可以点击下方的“线性”，“平方”等按钮观看动画效果。

clayui编辑器目录里有“2D动画”，“3D动画”，“基本控件”，“遮罩特效”4个目录，里面都是一些基本的例子，可以重复第4-5步来打开并测试每个例子。

接下来介绍一下编辑系统的基本操作

1. 启动编辑器，载入皮肤与布局后，点击左上角的添加按钮，如下图，添加一个窗体：

2. 现在在窗体设计标签下的编辑区，会有一个红色方框，以及一些小方框，如下图：

可以使用鼠标左键来拖动这个窗体，如果左边的标签栏是属性，就可以看到在拖动过程中，X，Y属性是在不断变化的

上图里的1-9数字边的小方框都是拖拽点，其中1，3，6，8是改变窗体的高宽，5，7是缩放，4是旋转。

使用鼠标右键可以拖动编辑区，滚轴缩放编辑区。

3. 新创建的窗体是空的，什么都没有，现在我们为这个窗体添加一个皮肤，点击“皮肤库”标签，如下图：

先确保编辑区的窗体处于选中状态，图形列表选择“rect.swf"，下面的下拉框里再选”rectfill"，将是否绑定皮肤大小勾上，然后点击“添加皮肤到当前窗口”，如果操作正确，就可以看到编辑区的窗体上已经添加了一个皮肤。

这里提示一下，由于编辑区可以存在多个窗体，所以在进行参数编辑之前，一定要选中一个窗体，作为当前编辑窗体。

4. 为刚创建的窗体添加子窗口，点击“控件”标签，如下图所示：

同前面一样，确保编辑区窗体处于选中状态，然后点击控件栏里的”勾选框“，可以看到编辑区的窗体里出现了一个小方框，这个就是一个勾选框控件，同样也是处于”裸体“状态中......，如果添加错了，可以选中子窗体，点键盘上的"delete"按键删除掉。

5. 为刚创建的勾选框添加一个布局，让它成为真正的”勾选框“，先选中刚创建的”勾选框“子窗体，点击属性标签，如下图：

将属性列表往下拖，直到出现上图里的”是否使用布局“，勾选上这个，然后在布局名列表里选择"check1"，这时，可以看到编辑区里勾选框的样子变成了一个”按钮“，”按钮“？为什么不是”勾选框“呢？

在clayui里，布局就相当于是窗体的衣服，你可以给一个“勾选框”换上editbox，combox等其他的衣服，但特定的控件，只有在特定的布局下才能发挥其功能，如果一个勾选框上穿的是combox的衣服，那它是变不成一个combox的。只有穿上符合勾选框特定条件的布局，才能发挥勾选框的功能，关于布局的细节，会在后面慢慢介绍。

在这里因为勾选框本身就是一个按钮，所以它穿上”按钮“的衣服，就能发挥按钮的作用，当然，你也可以在布局名里选择”check2"，这是一个勾选框的布局，这时，它就成为一个真正的“勾选框”了。

可以点击“测试”，试试效果。

6. 修改窗体属性，在左边属性标签栏里，可以修改当前选中的窗体的各种信息，需要注意的是，直接在编辑框里输入数值后，不会立即生效，需要点一下属性标签栏其他的地方，让编辑框失去焦点后，才会生效果。

修改窗体颜色是在透明度一栏里，点击后，出现滚动条，可以实时调节颜色，如下图：

按钮，勾选框，文本，编辑框，单选框这几个控件上的文字属性，在属性栏的最下方调整，如下图：

文字颜色受到窗体颜色的影响，如上图，文字本来是黑色的，但是窗体的色调变了，文字颜色也会随之改变。

7. 接下来介绍一下动画的创建方式，选中刚创建的勾选框，按住键盘上的shift键，然后拖动勾选框，会拖出来一个蓝色方框包裹的勾选框，松开shift键，此时，左边的属性栏会切换成动画属性，如下图：

这时，可以点“测试”看下效果，可以看到勾选框有一个很快的平移动画，并且移动到了蓝色方框所在位置，可以随意调整下蓝色方框的坐标，然后“测试”看效果。

蓝色方框是一个动画对象，代表动画结束时勾选框的状态，选中动画对象后，左侧属性栏里的x，y坐标，缩放系数，透明度，Z旋转角度即代表动画结束时的窗体的基本状态。

将属性栏往下拖，可以设置各种缓动效果，如下图：

有时候可能只想缩放或者旋转，不想要位移，这时可以将忽略位移勾上，这时就不会发生平移动画了。

8：连续动画。如果有同学用过FLASH的，可能会觉得这里的动画对象就相当于FLASH里的关键桢，但FLASH里可以建立多个关键桢，来达到连续的动画效果，当然，clayui里也支持。

还是接着刚才的，使用shift拖出3个动画对象，如下图：

然后选中第一个动画对象，将持续时间修改为2000，选中第二个动画对象，将动画标识修改为 frame0ai1 ,并将持续时间修改为2000，等待时间修改为2000，选中第三个动画对象，将动画标识修改为 frame0ai2 ,并将持续时间修改为2000，等待时间修改为4000，如下图：

可以看到，clayui是用3个动画对象，利用等待时间来完成连续动画。

好的，这次先介绍到这里，后面会陆续放出关于添加编辑皮肤，布局，消息响应的介绍，下次见：）

posted @ 2011-11-07 15:41 clayui 阅读(1837) | 评论 (8) | 编辑收藏

2011年9月25日

使用clayui实现的翻页效果

尝试使用clayui实现了翻页效果，每页都是一个窗口。clayui是支持遮罩的，而且支持的是alpha遮罩。搞程序的可能对遮罩不是很了解，但没有遮罩的话，翻页效果是很难实现的。借助遮罩，可以做出很多动画效果，比如毛笔写字，高光闪过等。

这个效果还没整理到clayui库中，所以这次就没放出工程了，只是展示一下而已。

posted @ 2011-09-25 17:21 clayui 阅读(184) | 评论 (0) | 编辑收藏

2011年8月3日

仿苹果工具栏完美解决图标毛边（黑边）

预览：

工程下载

这个是clayui界面库的一个最新的示例，是参照objectDock做的，主要的动态效果都比较完美的实现了,使用方法也一样，直接将桌面上的图标拖进去就可以了。

先来说说图标毛边的问题吧，这个可能部分同学比较感兴趣。

当使用Gdiplus::Bitmap::FromHICON载入一个图标对象时，Gdiplus会丢失掉图标的alpha信息，导致绘制时出现毛边（黑边），我个人觉得这应该是一个BUG，下面给出解决方案

虽然Gdiplus::Bitmap::FromHICON有问题，但是Gdiplus::Bitmap::FromHBITMAP却可以正常工作，不会丢失alpha信息，那么可以先使用GetIconInfo得到图标的ICONINFO，在ICONINFO这个结构里包含有 hbmColor，hbmMask这2个HBITMAP对象，hbmColor其实就是图标的图象了，hbmMask是遮罩，得到了这2个 HBITMAP，那么就可以根据图标的绘制原理自己加上alpha信息了，具体代码如下：

ICONINFO icInfo = { 0 };

if (!::GetIconInfo(hicon, &icInfo))

return ;

BITMAP bitmap;

GetObject(icInfo.hbmColor, sizeof(BITMAP), &bitmap);

BITMAP bmmask;

GetObject(icInfo.hbmMask, sizeof(BITMAP), &bmmask);

//得到遮罩的图象缓存

BYTE* maskbits = new BYTE[bmmask.bmWidthBytes * bmmask.bmHeight];

::GetBitmapBits(icInfo.hbmMask, bmmask.bmWidthBytes * bmmask.bmHeight, maskbits);

//先从hbmColor创建出Bitmap对象

Gdiplus::Bitmap *pIcon = Bitmap::FromHBITMAP(icInfo.hbmColor, NULL);

BitmapData bmpData;

Rect rect(0,0,pIcon->GetWidth(),pIcon->GetHeight());

//得到Bitmap的图像缓存，这样就可以根据遮罩来自己加入alpha信息了

pIcon->LockBits(&rect, ImageLockModeRead, pIcon->GetPixelFormat(), &bmpData);

BYTE* temp = (bmpData.Stride>0)?((BYTE*)bmpData.Scan0):((BYTE*)bmpData.Scan0+bmpData.Stride*(bmpData.Height-1));

int stride = abs(bmpData.Stride);

//根据遮罩的图象缓存来还原图标原本的alpha信息

for ( int i = 0; i < bmpData.Height; i++)

{

BYTE* Bits = temp + i * stride;

unsigned char* MaskBits = maskbits + (bmpData.Height - 1 - i) * bmmask.bmWidthBytes;

int bitoffset = 0;

for ( int j = 0; j < bmpData.Width; j++ )

{

unsigned char Alpha = ( (*MaskBits << bitoffset ++) & 0x80 )?0:255;

if(Alpha)

{

if(!Bits[j * 4 + 3])

Bits[j * 4 + 3] = Alpha;

}

else

Bits[j * 4 + 3] = 0;

if ( ! (bitoffset % 8) )

{

bitoffset -= 8;

MaskBits++;

}

delete [] maskbits;

Bitmap* tp = new Bitmap(pIcon->GetWidth(),pIcon->GetHeight(), abs(bmpData.Stride), PixelFormat32bppARGB, temp);

pIcon->UnlockBits(&bmpData);

delete pIcon;

最后这个tp就是含有alpha信息的图标图象了。

然后是动态效果，这个大家看工程里的代码吧，主要的实现方面的也就200多行，都在CIconFrame里，我简单说一下要点吧：

1. 在CIconFrame::OnMM里，根据鼠标与窗口的间距计算窗口的大小，这个也就是窗口随着鼠标移动而改变大小的核心所在了

2. 在CIconFrame::Update里，按照从左到右方式排列窗口，这样做窗口就会紧紧的靠在一起了

posted @ 2011-08-03 15:17 clayui 阅读(2276) | 评论 (15) | 编辑收藏

2011年7月19日

clayui之可以变形的CoverFlow

预览，一共有12种效果，这里贴上其中的3种：

工程下载

使用鼠标左键拖拽，鼠标右键切换FLOW，切换的时候，我想起了正在热播的大片：变形金刚，不知道大家有没有这个感觉。

这2个星期真是忙得昏天暗地，先是帮淘奇桌面改善了一下界面，增强了用户体验，有兴趣看效果的可以到这里下载试试看。然后又有一个android的需求，于是将clayui移植到了android下，当然，android有自己的界面体系，而且已经很完善，效果也很好，基本是没必要用clayui的，这里clayui主要是用在android里的opengl es开发里，使用cayui的界面框架，利用opengl es来渲染界面，使得opengl es程序能很方便的制作界面。

好的，那么这次clayui给大家带来了Cover Flow效果，clayui使用自己的窗口体系封装了一个CLAYUI_FrameFlow类，作为一个Cover Flow的容器，使用这个容器，可以很方便的创建各种各样自定义的Cover Flow效果，另外，由于cover flow里一般是多个图片的切换，所以这次clayui里增加了一个D3D的皮肤接口，使用D3D来渲染窗口的皮肤，也就是这些图片了。

首先是初始化，在InitClayui函数里，除了常规的clayui的初始化外，关于Cover Flow的初始化如下：

//CMCFlow是一个自定义的CLAYUI_FrameFlow子类

CMCFlow* flow = new CMCFlow();

flow->Init(mainframe, g_graphics.m_draw, 0);

mainframe->AddCustomFrame(0, "flow", 0, 0, 100, 100, 100, flow);

//设置图片文件夹路径

flow->SetPath(szBuf);

//设置Cover Flow总共显示的图片个数，从-20到20，一共41张图片。

flow->SetFlowInfo(1, -20, 20);

//设置图片高宽

flow->SetFlowItemWH(g_picwidth * 2, g_picheight * 2);

//设置窗口按Z排序

flow->SetFrameFlags(CLAYUI_USE_Z_SORT, 1);

然后是设置Cover Flow里图片排列的规律，这个应该是Cover Flow里最核心的了，在ChangeFlow函数里，ChangeFlow里一共设置了12种排列方式，下面以其中一种来讲解下：

//先是清除老的排列方式

flow->ClearPrjLine();

float z = CLAYUI_Get3DZ();

float zadd = 120;

//创建一个排列方式

CLAYUI_FL_PrjLine* prjline = new CLAYUI_FL_PrjLine;

//添加坐标的排列

AddToPrjLine(prjline, -g_picwidth, cheight, z, -20, 0);

AddToPrjLine(prjline, g_picwidth + 50, cheight, z, -19, 1);

AddToPrjLine(prjline, g_picwidth + 200, 0, z - zadd * 10, -9, 0);

AddToPrjLine(prjline, cwidth, cheight, z - zadd * 19, 0, 1);

AddToPrjLine(prjline, g_picwidth + 400, cheight * 2, z - zadd * 10, 10, 0);

AddToPrjLine(prjline, cwidth * 2 - g_picwidth - 50, cheight, z, 19, 0);

AddToPrjLine(prjline, cwidth * 2 + g_picwidth, cheight, z, 20, 0);

flow->AddPrjLine_Pos(prjline);

//添加角度的排列

CLAYUI_FL_PrjLine* prjangle = new CLAYUI_FL_PrjLine;

prjangle->AddPos(0, 0, -90, -5, 0);

prjangle->AddPos(0, 0, 0, 0, 0);

prjangle->AddPos(0, 0, 90, 5, 0);

flow->AddPrjLine_Angle(prjangle);

//将Cover Flow从老的排列切换到新的排列

flow->ExcAnimation();

CLAYUI_FL_PrjLine是一个将Flow里所有子窗口从Cover Flow的坐标系映射到3D坐标系下的类，Cover Flow的坐标系是一个一维的坐标系，从负无穷到正无穷，每个子窗口之间按间距1排列，AddToPrjLine(prjline, -g_picwidth, cheight, z, -20, 0)这句表示Cover Flow坐标系下坐标为-20的子窗口在3D里坐标为(-g_picwidth, cheight, z)，AddToPrjLine最后一个参数0表示这个坐标是贝塞尔曲线还是直线，如果为1（贝塞尔曲线）的话，则需提供3个点的坐标映射。这里只需要提供几个关键点的映射，其余的坐标会由插值得到。角度映射也是一样的， prjangle->AddPos(0, 0, -90, -5, 0)这句表示Cover Flow坐标系下坐标为-5的子窗口的角度为-90。

设置完Cover Flow的图片排列规律后，然后就是需要让整个Cover Flow能平滑的移动，上面已经说过了，Cover Flow只是一个一维的坐标系，所以只需要移动它的X坐标，那么整个Cover Flow就会按照排列规律自动移动了，下面的代码演示了让Cover Flow往前移动5个单位：

float x, y, z;

CMCFlow* flow = (CMCFlow*)mainframe->GetChildFrame("flow");

//得到当前坐标

flow->GetTrans(x, y, z);

//设置往前5个单位

flow->MoveTo(x + 5, y, z);

在演示里，是使用鼠标拖拽的，大家可以在消息响应函数MsgProc里看到，当接收到WM_MOUSEMOVE消息时，有如下代码：

float fx, fy, fz;

flow->GetTrans(fx, fy, fz);

fx += (x - g_oldpt.x) * 0.01;

flow->MoveTo(fx, fy, fz);

每当鼠标移动x - g_oldpt.x个像素时，Cover Flow的X坐标就前进 (x - g_oldpt.x) * 0.01个单位，这样就实现拖拽了。

当Cover Flow切换时，会有一个动画切换的效果，这个的实现在CMCFlow类的ExcAnimation函数里，利用clayui的动画对象给每个子窗口加一个动画就可以了。

好了，Cover Flow的几个要点都介绍完了，大家可以试着在工程里修改，创建自己的Cover Flow。

posted @ 2011-07-19 14:57 clayui 阅读(1975) | 评论 (7) | 编辑收藏

2011年6月20日

使用clayui界面库实现3D界面

预览：

工程下载

3D界面的工程为：CLAYUIEXP3，执行程序为：CLAYUIEXP3.exe

例子里使用的字体是微软雅黑，如果你的机器上没有这个字体，那么所有的文字将不会被显示。三维变换现在暂不支持点阵字体的显示，所以这里使用了雅黑字体。

这次进行3D界面展示的例子由以前的仿讯雷界面工程修改而来，下面我会以这个工程为例讲解如何使用clayui实现三维变换，而仿讯雷界面这个例子我是写有教程的，由于搬运太麻烦，就不搬运到这里来了，有需要的可以去百度下：clayui，就可以找到关于clayui的教程了。

好的，那么这次clayui的版本更新到0.1.0.5了，修改了一些BUG，增加了一个比较大的功能：所有窗口都支持3维变换了。

首先介绍下clayui里的3维坐标系

clayui的三维坐标系与D3D是差不多的，都是Z轴从屏幕向外，但clayui为了与窗口坐标系保持一致，也为了让同学们不为坐标转换而头疼，就让Y 轴垂直向下了，并让绘图区域左上角的坐标是（0, 0, z), 然后把摄像机的up向量定为(0, -1, 0)，eye定在(0, 0, -1)这个平面上，那么，现在只需要设置eye的x，y，与绘图区的z值，就可以确定整个clayui三维系统的投影变换了。

使用CLAYUI_Set3DLookat(float x, float y, float z)这个函数来设置eye的x, y，与绘图区的Z值

使用CLAYUI_Get3DZ()来得到绘图区的Z值

关于三维方面，就介绍到这里了，可能说得比较简单，不过这足够了，即使你没看懂，也没关系，因为clayui的三维系统是一个简化的三维系统，在下面的讲解里，你会看到，实现例子里的效果，是很简单的。

好，现在来看一下例子里的三维变换，主窗口有一个水平翻转与垂直翻转的动画，这个动画属于旋转动画，所以，当然就要用到CLAYUI_ROTATE_ANIM这个类了。

在MFC主对话框的OnInitDialog函数里

......

m_bframe->AddCustomFrame(0, "exp3", 0, 0, 500, 400, 100, exp3frame);

......

exp3frame->SetIs3D(1); //设置exp3frame支持窗口3D变换

exp3frame->MoveTo(100, 100, 1 * CLAYUI_Get3DZ());

提示：如果你设置了一个窗口支持窗口3D变换后，如果想让这个窗口与2维时保持一致，就将Z设为CLAYUI_Get3DZ()

然后设置exp3frame的变换中心为窗口的中心点

exp3frame->SetOri(250 << 16, 200 << 16, 0);

接下来，为exp3frame加一个旋转动画就行了：

CLAYUI_ROTATE_ANIM* rotate = new CLAYUI_ROTATE_ANIM();

rotate->Init(0, 0, 0, 0, 180, 0, 600, m_bframe);

rotate->SetTarget(exp3frame);

rotate->SetIdname("rot0");

m_bframe->AddAnimation(rotate);

rotate->SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Linear,

CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);

rotate->Play();

因为是绕着Y轴旋转，所以设置yanglefrom为180，yangleto为0，这样就让窗口绕着Y轴从180度转到0度，形成一个水平翻转的动画，垂直翻转的动画就是绕着X轴旋转了，大家可以试着修改下看看效果。

然后是属性窗口有一个3D盒的翻转效果。

首先在CEXP3FRAME的LoadFromMem里，将xlframe设置为支持3D变换，并将变换中心设置到3D盒子的中心，3D盒的中心其实就是xlframe的中心点沿Z轴向里平移一段距离（xlframe本身宽度的一半）

xlframe->SetIs3D(1);

xlframe->SetOri((353 / 2) << 16, (327 / 2) << 16, -(353 / 2) << 16);

要达到3D盒翻转的效果，需要将当前窗口沿着变换中心的Y轴向里旋转90度，并把要显示的窗口沿变换中心从90度旋转到0度，首先是当前窗口：

在“//销毁前一个xlframe”注释的下面，加上一个旋转动画：

1 CLAYUI_ROTATE_ANIM* rotate1 = (CLAYUI_ROTATE_ANIM*)GetAnimation("dier0");

2 if(rotate1)

3 {

4 rotate1->End();

5 rotate1->SetTarget(frame);

6 rotate1->Init(0, 0, 0, 0, 0, -90, 1000, this);

7 }

8 else

9 {

10 rotate1 = new CLAYUI_ROTATE_ANIM();

11 rotate1->Init(0, 0, 0, 0, 0, -90, 1000, this);

12 rotate1->SetTarget(frame);

13 rotate1->SetIdname("dier0");

14 AddAnimation(rotate1);

15 }

16 rotate1->SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Sinusoidal,

17 CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);

18 rotate1->SetFinishDelete(1);

19 rotate1->Play();

这个旋转动画将窗口沿Y轴从0旋转到-90度。

由于当前窗口在动画播放完之后需要被销毁，所以给旋转动画加上一个需要销毁的标志：rotate1->SetFinishDelete(1);，这样，让动画播放完之后，窗口就自动被销毁了。

然后在创建新的属性窗口这里“if(file.Open(m_exepath + framename, CFile::modeRead))”下面，加上如下代码：

1 CLAYUI_ROTATE_ANIM* rotate = (CLAYUI_ROTATE_ANIM*)GetAnimation("r0");

2 if(rotate)

3 {

4 rotate->SetTarget(xlframe);

5 rotate->End();

6 rotate->Init(0, 0, 0, 0, 90, 0, 1000, this);

7 }

8 else

9 {

10 rotate = new CLAYUI_ROTATE_ANIM();

11 rotate->Init(0, 0, 0, 0, 90, 0, 1000, this);

12 rotate->SetTarget(xlframe);

13 rotate->SetIdname("r0");

14 AddAnimation(rotate);

15

16 }

17 rotate->SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Sinusoidal,

18 CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);

19 rotate->Play();

这个旋转动画将窗口从90度旋转到0度

这样，就实现了例子里的3维变换效果了，是不是很简单呢。

关于clayui里的3维变换，今天就简单介绍到这里了，以后会带给大家更多好看华丽的界面效果，请大家继续关注。

posted @ 2011-06-20 14:09 clayui 阅读(2518) | 评论 (19) | 编辑收藏

2011年6月9日

献丑做了个C++界面库，大家来评评吧

自己做了一个界面库，纯C++的，在这里献个丑，大家看看吧。

下载

贴2个效果图

目前界面库暂命名为clayui，意思是”黏土UI“，为什么要叫黏土UI呢，因为我的想法是让clayui能方便的插入到各种开发环境中，比如，它可以与MFC混着一起用，也可以在D3D或者OPENGL中变成一个HUD，当然，你愿意的话，把它放到QT中也是可以的，当然当然，肯定没人会这么做......

那么，clayui是如何做到这一点呢？其实很简单，clayui有自己的绘图库，负责界面上所有图形要素的绘制，把他们绘制到一个图形缓冲区中，这个缓冲区其实就是一个32位的带alpha通道的BMP图像，使用者只需要得到这个BMP图象缓冲，就可以把它像贴图一样贴到任何地方，甚至你愿意的话，在这上面绘制自己的图形也是可以的。

我的目标是将clayui做成一个C++版的 Flex/WPF/Silverlight，因为，Flex/WPF/Silverlight的一个共同之处就是能编写出具有华丽效果的界面，然而，要想在C++里使用他们，是比较困难的。当然，你可以在MFC里放上一个FLASH Activex控件，然后”宣称“C++里也是可以用的，但是，这种用法，我个人觉得用起来很憋屈。Flex那是肯定只能使用Flex Builder来进行开发的，而WPF/Silverlight，可能是我使用得不多，或者孤陋寡闻，确实不知道如何在C++里使用，只知道可以用C#来做开发，可能也可以使用托管c++来做，这方面我的知识比较缺乏，就不继续说了。

然后，可以使用C++来实现这些效果的，我知道的，就是大名鼎鼎的QT了，QT的确是个好东西，不过我没用过。曾经，有一个机会摆在我的眼前，那次我本可以和QT结缘的，当时整个项目使用的是MFC，有个界面BOSS要求界面要好看，要华丽，要IPhone一些，于是我想到了QT，不过在翻阅众多资料之后，始终没有找到如何在MFC里插入一个QT界面的完美的解决方案，由于时间紧迫，最后，我还是可耻的使用了FLASH Activex控件，这个界面也被公司里的Flex开发人员包揽了，记得好象是用FSCommand传递的消息，当时，看着BOSS在会议上夸那个用 Flex的人，我心里真的很不是滋味。当然，如果MFC里能很方便的插入一个QT开发的界面的话，今天就不会有clayui了。

还有其他界面库，例如CEGUI，这个也用过，但是要用好，还是挺难的，其他的，比如GTK，MINIGUI，wxwidgets之类的，就没缘分去使用他们了

这里，还要提一下scaleform，这个号称是硬件加速的FLASH界面开发库，玩过游戏大作的，肯定多多少少都知道这个，像质量效应，星际2就用的这个，甚至虚幻引擎都把它集成进来了，当然，它的表现力确实不是吹的，效果很好，不过我没有使用过，当年BOSS开会时对我发彪，界面能不能搞得像星际2一样好看，我说，可以的，买人家的专业界面库，星际2的界面就是用这个做的，BOSS斜着眼睛瞄着我，多少钱，几千几万？如果能达到那个效果，就让财务去买好啦，我说，听说好象要7，8万美金，BOSS顿了一下，那好，那你先去研究下，看到底怎么样。然后我去scaleform的官网申请了下，后来，scaleform没有鸟我，BOSS也再没提这个事，这事就这样，结了。

scaleform的老总据说是adobe的老总的弟弟，不知道是不是真的，但是不管是不是真的，sclaeform应该是获得了flash的支持的，但是他本身是从gameswf发展而来，从gameswf一个开源flash播放器发展到现在三千多万被autodesk收购，真的是很不简单。 scaleform的具体开发流程我不是很了解，能不能使用C++来开发更是不得而知，网上关于这方面的资料少之甚少，如果园子里有人用过，不妨说一下。

还有就是国内的几个换肤库，在baidu里搜”界面库“，第一页都是那几个换肤库打的广告，还有direct ui，我个人觉得这是在概念炒作，我个人也下载了direct ui的例子，但是，效果跟flex/silverlight/wpf比起来，还差了好远。这几个换肤库，说实话，还是很好用的，只需要少量代码，就可以换个漂亮的皮肤，用很少的工作量获取不错的效果，这个性价比是蛮高的，我刚工作时就看过APPFACE的广告贴，到现在，他已经由一个老总，一个程序员，一个美工的小工作室，变成了一个公司，据说已经获得投资，可以说，走上了正轨，还听说，VS的下一个版本中将集成他的换肤库，这个消息，个人觉得有点假，但是不管怎样，这也是人家努力的成果，希望他以后发展越来越好。

再就是国内几个大软件的界面，QQ，讯雷做得是很不错的，QQ还有个WPF的概念版，如果C++能实现WPF的效果，估计QQ的会做得更好，个人觉得讯雷 7的界面比QQ的更加动态一些。其他软件，比如类似115的一些下载客户端，360，都是实现的换肤，几乎看不到华丽的透明，或者动态效果。还有最近比较热的开源界面框架，chrome和金山卫士的，通过这些开源界面框架，我们能学到很多知识，也能做出好看的界面，但是比较遗憾的是缺乏一个完善的界面编辑器，而一个比较完善的界面编辑器的开发难度，我个人觉得不在开源框架之下，所以，这方面，还是有很多工作需要去完善的，也期待研究这些框架的大牛们能带给我们更多的惊喜。

好，以上就是个人对界面方面的一些乱弹，现在，还是来说说自己的clayui吧，clayui作为一个界面库，也实现了窗口裁剪，消息传递等基本功能，并提供了几个自带的控件，就是上图里看到的那些了。clayui是免费使用的，但是目前暂时不开源，如果你有任何关于clayui的使用问题，请PM我，我会不遗余力的帮助你。