clayui - 博客园

2012年2月8日

一个正在开发中的网页渲染库

目前已经可以比较正常的渲染网页了，由于是在clayui界面框架的基础上开发的，所以生成的网页，其实也就是一个界面，因为本来最初的打算，就是想为clayui开发一个能支持html/css的控件。

目前支持html4的一部分标签，css2的一部分属性，css3的animation和transition，clayui本来就支持动画，所以支持CSS3的动画还比较容易。

下面是一些截图：

QQ主页，门户网站的网页写得都比较中规中矩，所以解析和渲染还比较正常

随便点一条新闻：

往下拉

新浪博客：

韩老师的博客，呵呵

博客园：

nga论坛...

nga一如既往的火爆，看看有什么帖子：

血DK目前依然是个BUG...

淘宝（天猫？）

新浪读书

往下翻翻

小说馆

很有名的...

posted @ 2012-02-08 12:18 clayui 阅读(171) 评论(0) 编辑

2011年11月9日

我就是要做UI

摘要: 其实，我只是想做一个UI，一个大家都能用，而且用得很开心的UI......我们，自己的UI......阅读全文

posted @ 2011-11-09 21:28 clayui 阅读(2769) 评论(11) 编辑

2011年9月25日

使用clayui实现的翻页效果

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

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

posted @ 2011-09-25 17:18 clayui 阅读(262) 评论(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;
        pIcon->UnlockBits(&bmpData);

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

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

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

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

posted @ 2011-08-03 15:35 clayui 阅读(1444) 评论(0) 编辑

2011年7月19日

使用clayui实现具有动态切换效果的Cover Flow

           预览，一共有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 15:20 clayui 阅读(1029) 评论(4) 编辑

2011年6月28日

在C#里实现各种窗口切换特效，多达13种特效

摘要: 预览：下载这次clayui给大家带来了比较实用的东西，因为时间比较仓促，就先放出C#版，目前只有13种特效，如果大家对这个比较喜欢的话，请推荐一下，让更多的人能分享到这个，我也会继续更新添加更多特效。先说明一下，因为本人对C#也不是特别了解，所以可能会出现一些BUG，请大家能够反馈给我。由于演示程序里只是添加了普通的C#控件，目前不是很清楚其他的C#控件，或者一些换肤的东西放上去会不会有问...阅读全文

posted @ 2011-06-28 12:40 clayui 阅读(7280) 评论(65) 编辑

2011年6月20日

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

摘要: 预览：工程下载 3D界面的工程为：CLAYUIEXP3，执行程序为：CLAYUIEXP3.exe 例子里使用的字体是微软雅黑，如果你的机器上没有这个字体，那么所有的文字将不会被显示。三维变换现在暂不支持点阵字体的显示，所以这里使用了雅黑字体。这次进行3D界面展示的例子由以前的仿讯雷界面工程修改而来，下面我会以这个工程为例讲解如何使用clayui实现三维变换，而仿讯雷界面这个例子我是写有教程的，请访问本博客内的教程，关于clayui的其它教程，各位可以去百度一下:clayui。好的，那么这次clayui的版本更新到0.1.0.5了，修改了一些BUG，增加了一个比较大的功能：所有窗口都支持.阅读全文

posted @ 2011-06-20 14:41 clayui 阅读(2637) 评论(3) 编辑

2011年6月8日

clayui界面库系列教程之六：仿讯雷7界面（包括动态效果）

摘要: 预览图如下：工程下载 DEMO对应的工程是CLAYUIEXP3，对应运行程序为CLAYUIEXP3.exe 呵呵，不是讯雷的主界面，是讯雷的配置界面。配置界面里的动态效果基本都是按钮变色，淡入淡出的效果，再就是放大缩小，其中的一个难点是有一个发绿光的框会在你选中的焦点控件之间跳来跳去，这些效果在此次DEMO里都有包含，下面我会慢慢给大家讲解如何制作这些效果。前面有同学反映CLAYUI只能使用雅黑字体，其他字体会有报错现象，这主要是由于CLAYUI还未加入对点阵字体的支持。现在，CLAYUI支持了点阵字体，WINDOWS里的大部分字体都可以用了，当然，可能有少数字体仍然会出现问题。说点题.阅读全文

posted @ 2011-06-08 10:55 clayui 阅读(746) 评论(0) 编辑

2011年5月31日

clayui界面库系列教程之五：仿QQ2010登录下拉框的动画效果

摘要: 预览图如下：例子工程下载这次的例子工程是CLAYUIEXP2，与以前的苹果风格按钮是一个工程，所以在本教程里，关于初始化之类的就不详细解说了，有疑问的请查看本博客内的其他教程好的，教程开始了。首先，在MFC对话框里添加一个对下拉框初始化的函数：CreateComboBox，在里面，我们对下拉框进行初始化： CMyComboBox* combo = new CMyComboBox(); combo->Init(m_mainframe, m_graphics.m_draw, 0); combo->SetLayout(1, 0, "combobox"); m阅读全文

posted @ 2011-05-31 17:27 clayui 阅读(2659) 评论(2) 编辑

2011年5月25日

在direct3d中使用clayui

摘要: 先上预览图：工程下载这里借用了direct3d sdk samples里的例子Tut05_Textures 例子里创建了101个透明的combobox，效率还可以。我使用的direct3d sdk版本是一个早期的版本，因为direct3d版本比较多，每个版本里的函数又有所不同，例子工程有可能在您的机器上编译不通过关于clayui的使用，请继续关注我的博客阅读全文

posted @ 2011-05-25 17:29 clayui 阅读(283) 评论(0) 编辑

仅列出标题下一页