DUILib经典教程(实例)
Duilib经典实例教程1基本框架
一个简单的Duilib程序一般是下面这个样子的:
// Duilib使用设置部分
#pragma once
#define WIN32_LEAN_AND_MEAN
#define _CRT_SECURE_NO_DEPRECATE
#include
#include
#include "..\DuiLib\UIlib.h"
using namespace DuiLib;
#ifdef _DEBUG
# ifdef _UNICODE
# pragma comment(lib, "..\\bin\\DuiLib_ud.lib")
# else
# pragma comment(lib, "..\\bin\\DuiLib_d.lib")
# endif
#else
# ifdef _UNICODE
# pragma comment(lib, "..\\bin\\DuiLib_u.lib")
# else
# pragma comment(lib, "..\\bin\\DuiLib.lib")
# endif
#endif
// 窗口实例及消息响应部分
class CFrameWindowWnd : public CWindowWnd, public INotifyUI
{
public:
CFrameWindowWnd() { };
LPCTSTR GetWindowClassName() const { return _T("UIMainFrame"); };
UINT GetClassStyle() const { return UI_CLASSSTYLE_FRAME | CS_DBLCLKS; };
void OnFinalMessage(HWND /*hWnd*/) { delete this; };
void Notify(TNotifyUI& msg)
{
if( msg.sType == _T("click") ) {
if( msg.pSender->GetName() == _T("closebtn") ) {
Close();
}
}
}
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if( uMsg == WM_CREATE ) {
m_pm.Init(m_hWnd);
CControlUI *pButton = new CButtonUI;
pButton->SetName(_T("closebtn"));
pButton->SetBkColor(0xFFFF0000);
m_pm.AttachDialog(pButton);
m_pm.AddNotifier(this);
return 0;
}
else if( uMsg == WM_DESTROY ) {
::PostQuitMessage(0);
}
LRESULT lRes = 0;
if( m_pm.MessageHandler(uMsg, wParam, lParam, lRes) ) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
public:
CPaintManagerUI m_pm;
};
// 程序入口及Duilib初始化部分
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CPaintManagerUI::SetInstance(hInstance);
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CFrameWindowWnd* pFrame = new CFrameWindowWnd();
if( pFrame == NULL ) return 0;
pFrame->Create(NULL, _T("测试"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
pFrame->ShowWindow(true);
CPaintManagerUI::MessageLoop();
return 0;
}
可以看出,这个程序分三个部分:
●Duilib使用设置部分,这个部分都是一些使用Duilib所需要的头文件和自动链接到相应
的Duilib库,一般来说基本上不用改动。
●窗口实例及消息响应部分,基本的窗口实现类和简单的消息响应,需要重点关注的是
void Notify(TNotifyUI& msg)中的事件处理,这是Duilib程序最重要的部分。
●程序入口及Duilib初始化部分,Duilib初始化和窗口创建。
编译这个程序,出现如下效果:
点击红色区域的任意位置,窗口会立即关闭。这样我们就完成了最简单的一个Duilib程序编写,虽然这个例子还不能展现Duilib的强大,但也算是麻雀虽小,肝胆俱全了。
因为很多美观的界面都不使用系统的标题栏和边框这些非客户区绘制,我们也把这掉,修改CFrameWindowWnd:: HandleMessage为:
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if( uMsg == WM_CREATE ) {
m_pm.Init(m_hWnd);
CControlUI *pButton = new CButtonUI;
pButton->SetName(_T("closebtn"));
pButton->SetBkColor(0xFFFF0000);
m_pm.AttachDialog(pButton);
m_pm.AddNotifier(this);
return 0;
}
else if( uMsg == WM_DESTROY ) {
::PostQuitMessage(0);
}
else if( uMsg == WM_NCACTIVATE ) {
if( !::IsIconic(m_hWnd) ) {
return (wParam == 0) ? TRUE : FALSE;
}
}
else if( uMsg == WM_NCCALCSIZE ) {
return 0;
}
else if( uMsg == WM_NCPAINT ) {
return 0;
}
LRESULT lRes = 0;
if( m_pm.MessageHandler(uMsg, wParam, lParam, lRes) ) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
编译运行,我们得到如下效果:
2编写界面xml
为了使用xml进行界面布局,需要把前面的Duilib程序框架中的HandleMessage稍微改动一下:
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if( uMsg == WM_CREATE ) {
m_pm.Init(m_hWnd);
CDialogBuilder builder;
CControlUI* pRoot = builder.Create(_T("test1.xml"), (UINT)0, NULL, &m_pm);
ASSERT(pRoot && "Failed to parse XML");
m_pm.AttachDialog(pRoot);
m_pm.AddNotifier(this);
return 0;
}
else if( uMsg == WM_DESTROY ) {
::PostQuitMessage(0);
}
else if( uMsg == WM_NCACTIVATE ) {
if( !::IsIconic(m_hWnd) ) {
return (wParam == 0) ? TRUE : FALSE;
}
}
else if( uMsg == WM_NCCALCSIZE ) {
return 0;
}
else if( uMsg == WM_NCPAINT ) {
return 0;
}
LRESULT lRes = 0;
if( m_pm.MessageHandler(uMsg, wParam, lParam, lRes) ) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
灰色部分表示改动的部分。
然后我们来编写一个简单的xml:
把以上xml保存为test1.xml,主要保存格式为utf-8(不要使用windows自带的记事本保存,可以使用ultraedit、editplus之类具备xml编辑能力的编辑器保存)。然后运行程序,可以看到如下效果:
好像还不是太难看,不过按钮好像看起来不大像按钮,那就给贴个图把,将一下这行加入到Window标签下:
然后将button_nor.bmp、button_over.bmp、button_down.bmp(可在Duilib发行包中找到)放到exe目录下,运行程序,可以看到:
可以看到按钮的显示已经改变了,我们继续将Richedit换个背景,将Richedit的背景色改成bkcolor="#FFF2F5FA" bkcolor2="#FFA0A000" bkcolor3="#FFF2F5FA",我们得到下面的结果:
继续修改这个xml,我们通过设置xml中控件的属性,可以很简单的实现自由调整界面。
3响应事件
Duilib中的事件响应有两种方式:
在事件处理类(一般使用窗口类)中实现INotifyUI接口,然后在Notify函数中处理事件,这种方式比较简单常用。示例如下:
class CLoginFrameWnd : public CWindowWnd, public INotifyUI
{
public:
// ……
void Notify(TNotifyUI& msg)
{
if( msg.sType == _T("click") ) {
if( msg.pSender->GetName() == _T("closebtn") ) { PostQuitMessage(0);
return; }
else if( msg.pSender->GetName() == _T("loginBtn") ) { Close(); return; } }
else if( msg.sType == _T("itemselect") ) {
if( msg.pSender->GetName() == _T("accountcombo") ) {
CEditUI* pAccountEdit = static_cast
if( pAccountEdit ) pAccountEdit->SetText(msg.pSender->GetText());
}
}
}
}
●使用代理机制处理事件
class CLoginFrameWnd : public CWindowWnd, public INotifyUI
{
public:
// ……
bool OnAlphaChanged(void* param) {
TNotifyUI* pMsg = (TNotifyUI*)param;
if( pMsg->sType == _T("valuechanged") ) {
m_pm.SetTransparent((static_cast
}
return true;
}
void OnPrepare()
{
CSliderUI* pSilder = static_cast
if( pSilder ) pSilder->OnNotify += MakeDelegate(this, &CFrameWindowWnd::OnAlphaChanged);
}
}
OnPrepare函数需要在控件创建完成之后调用。
4贴图描述
Duilib的表现力丰富很大程度上得益于贴图描述的简单强大。Duilib的贴图描述分为简单模式和复杂模式两种。
简单模式使用文件名做为贴图描述内容,在这种方式下,此图片将会以拉伸方式铺满控件。
复杂模式使用带属性的字符串表示贴图方式,既支持从文件中加载图片,也可以从资源中加载,具体如下:
●如果是从文件加载,设置file属性,如file='XXX.png',不要写res和restype属
性
●如果从资源加载,设置res和restype属性,不要设置file属性
●dest属性的作用是指定图片绘制在控件的一部分上面(绘制目标位置)
●source属性的作用是指定使用图片的一部分
●corner属性是指图片安装scale9方式绘制
●mask属性是给不支持alpha通道的图片格式(如bmp)指定透明色
●fade属性是设置图片绘制的透明度
●hole属性是指定scale9绘制时要不要绘制中间部分
●xtiled属性设置成true就是指定图片在x轴不要拉伸而是平铺,ytiled属性设
置成true就是指定图片在y轴不要拉伸而是平铺:
5类html文本描述
Duilib使用一种经过简化的类html格式文本来描述复杂的图文格式。使用<>或{}符号来标识语法标签,支持标签嵌套,如
●text表示text的内容使用粗体
●
值
●
●text表示text内容使用斜体
● 表示此次插入图片,x表示图片名称,y表示此图片包含几张字图片(可
不填,默认值1),z表示当前使用的字图片id(可不填,默认值0)
●text表示text内容有链接功能,x表示链接地址(可不填),用法如
app:notepad or http:https://www.360docs.net/doc/1013714496.html,,此字符串需要在用户程序中解析处理。
●
●
text
表示text内容是一个段落(从这里开始换行),x表示此段落文字水平距离(可不填)
●
●text表示text内容被选中(显示选中的背景颜色)
●text表示text内容使用下划线
●
●
使用标签功能需要把控件的showhtml属性设置为true。
6动态换肤
Duilib是一个以贴图为主要表现手段的界面库,实现换肤非常简单,可以通过给控件设置不同的图片来实现换肤,比如给需要换肤的控件调用CControlUI::SetBkImage。但是针对换肤功能,Duilib提供了更为简单的方法,即使用CPaintManagerUI::ReloadSkin。
假设我们给程序创建了两套皮肤,分别打包成skin1.zip和skin2.zip,在程序运行的时候,执行:
CPaintManagerUI::SetResourceZip(_T("skin2.zip")); // 或者skin1.zip
CPaintManagerUI::ReloadSkin();
这样简单的两行代码,就实现了全部窗口从skin1皮肤到skin2皮肤的切换。你也可以随时再次调用上面两行代码,把皮肤切换回去。
7Dll插件
Duilib支持使用外部dll来扩展控件:
●在dll中,只需要实现一个接口CreateControl,如
extern "C" __declspec(dllexport) CControlUI* CreateControl(LPCTSTR pstrType)
{
if( _tcscmp(pstrType, _T("ButtonEx")) == 0 ) return new CButtonExUI;
return NULL;
}
●在使用程序中,需要在WinMain函数把插件dll使用CPaintManagerUI::LoadPlugin
加载进来,然后就可以和内置控件一样使用了。
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CManager::SetInstance(hInstance);
CManager::SetResourcePath(CManager::GetInstancePath());
CManager::LoadPlugin(PLUGINNAME);
// ……
}
8资源打包
Duilib使用资源打包功能非常简单,在程序开发完成后只需做两个步骤即可:
●进入资源目录,然后使用具备zip压缩功能的软件(如winrar、winzip、7zip等)把
布局xml和图片等资源压缩到一个zip文件包里。
●在WinMain函数中CPaintManagerUI::SetInstance(hInstance)的后面加入
CPaintManagerUI::SetResourceZip(_T("xxx.zip")),如
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CManager::SetInstance(hInstance);
CManager::SetResourcePath(CManager::GetInstancePath());
CPaintManagerUI::SetResourceZip(_T("xxx.zip"));
// ……
}
这样就完成了资源打包功能,发布程序只需要把exe、dll和zip文件带上就行了。
有时为了需要,也可以修改.zip为其他扩展名,比如.dat。
9Duilib在MFC或WTL程序中的应用
MFC和WTL依托强大的Windows Common Controls实现和十多年的发展,在传统软件界面领域占了统治地位,很多的现有软件代码都是使用MFC(或WTL,下同,不再特别注明)写的。所以对于一个界面库来说,兼容MFC和WTL显的非常重要。
如果一个软件希望从MFC界面转换到Duilib,或者打算使用Duilib做界面,但是又希望使用MFC的其他功能,这时Duilib和MFC混合使用就派上用场了。
在MFC中使用Duilib,可以按以下步骤操作:
●在BOOL CXXXApp::InitInstance()函数中,添加
DuiLib::CManager::SetInstance(CWinAppEx::m_hInstance);
DuiLib::CManager::SetResourcePath(DuiLib::CManager::GetInstancePath());
注意需要添加在MFC窗口创建之前。
●创建Duilib窗口类
c lass CDuiWn
d : public DuiLib::CWindowWnd, public DuiLib::INotifyUI
{
public:
CDuiWnd();
LPCTSTR GetWindowClassName() const;
UINT GetClassStyle() const;
void Notify(DuiLib::TNotifyUI& msg);
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam);
public:
DuiLib::CPaintManager m_manager;
};
●在MFC窗口类中创建Duilib窗口
m_duiWnd.Create(*this, NULL, UI_WNDSTYLE_CHILD, 0, 0, 0, 642, 520);
m_duiWnd.Init();
m_duiWnd是MFC窗口类的成员变量。
示例:绿色框内是Duilib窗口,外层是MFC对话框。
电脑平面设计基础与实例教程教案
目录 第一篇 Photoshop CS篇 第1章基础知识与基本操作 (1) 一、电脑平面设计的有关知识 (1) 二、图形输出、打印和印刷 (1) 三、Photoshop CS的基本操作 (3) 四、显示控制 (3) 五、使用标尺、参考线和网格.......................... 错误!未定义书签。 六、取消和恢复操作步骤 (4) 七、思考与练习题................................................................................................. 第2章图像的选取与应用.. (5) 一、选框工具 (5) 二、套索工具 (5) 三、魔术棒工具…………………………………………………… 四、色彩范围选择………………………………………………………… 五、建立精确的选择区域…………………………………………………….. 六、调整选择区域………………………………………………………………. 七、思考与练习题……………………………………………………………… 第3章调整图像色彩 (5) 一、色阶调整 (6) 二、自动调整图像 (6) 三、曲线调整………………………………………………………… 四、色彩平衡………………………………………………… 五、亮度/对比度调整………………………………………………… 六、色相/饱和度调整……………………………………………………… 七、去色……………………………………… 八、替换颜色……………………………………………………. 九、阙值调整…………………………… 十、渐变映射……………………….
平面设计毕业论文范例鉴赏(共4篇).docx
平面设计毕业论文范例鉴赏(共4篇)随着我国改革开放以来的快速发展,很多具有中国特色的传统文化需要我们继续发扬光大。如今,我国平面设计前景一片光明,为我国经济的发展注入了活力。目前阶段,平面设计在社会生活中的重要作用逐渐突显出来,特别是计算机的普及应用以及不同类型平面设计软件的全面开发利用背景下,平面设计也逐渐被应用在生产与生活实践当中。一旦提及平面设计,其创意性与实用性特点是最突出的,但需要注意的是,平面设计同样能够为人们带来极强的审美享受。 第1篇:计算机平面设计创新教学措施分析 中职学校教师队伍素质参差不齐,有很多教授计算机平面设计课程的教师属半路出家,专业能力有限,加之缺乏专业的培训及提升,自身素质很难得到提升。很多中职学校的教师认为具备一定的教学经验,掌握了一定的计算机平面设计的操作技巧,就可以胜任计算机平面设计教学工作。殊不知在信息技术日益发展的今天,如果不注重现代信息的收集、不及时更新和学习新的知识、不提升自身的专业技术水平,教与学就会严重脱节,培养出的学生与企业的要求相去甚远,不符合社会对技能人才的需求。 一、计算机平面设计教学存在的问题 1.注重理论知识的传授 计算机的平面设计就是能够将实际的物体以图片的形式进行描绘,进而向人们展示美的事物。随着社会的不断发展,对平面设计师的要求也在逐渐提高。但是目前我国很多的中职学校在对学生进行平面设计教学时,依然采用传统的教学模式,教师以传授理论知识为主,都以自身为中心对学生展开教学。这样的教学模式不仅课堂效率不高,更无法激发学生对专业的学习兴趣。 2.教学方法陈旧 计算机平面设计的教学,主要是培养学生的设计灵感以及设计能力。而当下的很多学校却忽略了学生的实际操作培训,基本上都是教师在主机上进行相关步骤的演示,演示结束后,便让学生进行练习。这样学生一直处于被动接受知识的状态,一是限制了学生自由发挥的空间,二是限制了学生思维的发散和创新能力的培养。因此,教学方法的改进势在必行。 3.忽略学生创新能力的培养 在实际教学中,一定要注重培养学生的创新能力以及创新思维。但很多中职学校在平面设计教学中,只注重对学生专业技能的培养,忽略了对学生创新能力及思维的培养,使学生的思维受到约束,对于某一概念,只是循规蹈矩的按照惯用的方法进行设计,没有新的突破与创新。
平面设计教程大全
平面设计分类 目前常见的平面设计项目,可以归纳为十大类:网页设计、包装设计、DM 广告设计、海报设计、平面媒体广告设计、POP广告设计、样本设计、书籍设计、刊物设计、VI设计。 平面设计的相关学习软件 现在平面设计软件有Photoshop、CorelDRAW、IIIustator、Freehand、PageMaker、Photolmpact、AutoCAD、InDesign、After Effects、Premiere等。。。其中最为常用的软件是Photoshop、Illustrator 、CorelDRAW. Photoshop是点阵设计软件,由像素构成,分辨率越大图像越大, Photoshop 的优点是丰富的色彩及超强的功能,无人能及;缺点是文件过大,放大后清晰度会降低,文字边缘不清晰。 Illustrator是矢量设计软件,可以随意放大缩小而清晰度不变。 Illustrator最大的优点是放大到任何程度都能保持清晰,特别是标志设计、文字、排版特别出色;MAC和PC均可应用。 CorelDRAW是矢量设计软件,可以随意放大缩小而清晰度不变。CorelDRAW最大的优点是放大到任何程度都能保持清晰,特别是标志设计、文字、排版特别出色; MAC应用不多,多见于PC。 平面设计入门知识 培养目标:以培养平面设计专业人才为目标。通过本专业的系统学习,学员可在短期内掌握相关的设计原理、Photoshop位图处理软件、CorelDRAW矢量图形软件等制图技术;以及平面设计基础理论、思维方式、模块训练、课题设计研究等实践课程。毕业后,学员能成为平面设计公司、营销策划公司等当前人才市场急需的人才。 一、平面设计基础理论: 1.平面设计概论:什么是平面设计、平面设计的应用范围、平面设计要素 2.平面设计基础:透视、构图、色彩基础、平面构成 3.美术作品欣赏:当代优秀视觉作品、当代优秀创意作品、世界优秀美术作品 二、Photoshop基础: 1.工作界面与基本工作原理:photoshop基本工作界面布局、预设工作界面、
《Photoshop+CoreIDRAW平面设计实例教程》—教学教案
《Photoshop+CoreIDRAW平面设计实例教程》 教学教案 第1讲
第2讲 课时内容标志设计授课时间90分钟课时2 教学目标?在Photoshop软件中制作标志图形的立体效果。?在CorelDRAW软件中制作标志和标准字。 教学重点?在CorelDRAW中添加网格制作标志,添加并编辑文字节点制作标准字。?在Photoshop中为标志添加样式,制作标志的立体效果。 教学难点在CorelDRAW中,使用文字工具和形状工具制作标准字。 教学设计1、教学思路:(1)通过对课堂实训案例的讲解掌握电影公司标志设计的方法和技巧; (2)最后通过课后综合演练消化所学软件知识,提高标志设计的能力。 2、教学手段:(1)通过课堂实训案例熟悉设计理念和软件功能;(2)通过课后综合演 练提高学生的实际应用能力。 3、教学资料及要求:在网上或现实生活中找一些简单的标志设计进行制作,来加深学 员对知识点的理解和提高实际应用能力。 教学内容 讨论问题:1、在CorelDRAW中,绘制标志的常用工具有哪些? 2、制作祥云科技标志设计时,通常使用哪些元素和色彩?内容大纲:具体可结合本项目的PPT课件进行配合讲解。 2.1 电影公司标志设计 2.1.1 绘制标志底图 2.1.2 绘制标志文字 2.1.3 制作立体效果 2.2 课后习题——橄榄球标志设计 小结1、掌握标志的设计思路。 2、掌握标志的绘制方法和技巧。 作业 2.2 课后习题——橄榄球标志设计 习题知识要点 在Photoshop中,使用图层样式命令制作标志的立体效果。 在Corel-DRAW中,使用贝塞尔工具、编辑锚点命令和移动工 具制作标志外围线框,使用轮廓图工具、拆分轮廓图群组命令