`
snzipeng
  • 浏览: 22503 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

[转]循序渐进实现仿QQ界面(一):园角矩形与双缓冲贴图窗口

阅读更多

印象里仿QQ界面的程序应该有很多,搜了一下,虽然出来一大堆,排除了重复的,却只有两三个,没我想象的好。经常看到CSDN上有人问,QQ这个功能怎么实现,那个界面怎么实现,归纳了一下,决定写这么一个仿QQ界面程序,实用功能一律不实现,仅仿界面:

异型窗口
贴图界面
界面可调色,换底纹
仿QQ界面上的各种自绘控件

QQ2009界面仔细研究起来,其实还是很复杂的,完全模拟做到一模一样还是很花工夫的,用API实现是个噩梦,因此这里是用RingSDK实现。关于RingSDK,请到这个链接http://blog.csdn.net/ringphone/archive/2008/09/11/2911244.aspx,最新版本请用SVN到svn://svnhost.cn/RingSDK下载。RingSDK的图象库与界面库结合,可以实现一些比较酷的界面。这里就是演示图象库与界面库结合实现QQ2009的界面。OK,Let's go!不过先声明一下,这里只是模仿界面,实际QQ的界面不是这么做的。

QQ2009是园角矩形窗口,不是复杂形状,因此实现起来很简单,CreateRoundRectRgn然后SetWindowRgn就行了。不过窗口可以拖动调整大小,因此不是简单的在开始设定就可以,需要在WM_SIZE消息里随时改变这个RGN:

C/C++ code
RECT rc; GetWindowRect(m_hWnd,&rc); OffsetRect(&rc,-rc.left,-rc.top); if(m_hrgn) DeleteObject(m_hrgn); m_hrgn = CreateRoundRectRgn(rc.left,rc.top,rc.right,rc.bottom,NCB_CORNERSIZE,NCB_CORNERSIZE); SetWindowRgn(m_hWnd,m_hrgn,TRUE); InvalidateRect(m_hWnd,NULL,TRUE); RECT rc; GetWindowRect(m_hWnd,&rc); OffsetRect(&rc,-rc.left,-rc.top); if(m_hrgn) DeleteObject(m_hrgn); m_hrgn = CreateRoundRectRgn(rc.left,rc.top,rc.right,rc.bottom,NCB_CORNERSIZE,NCB_CORNERSIZE); SetWindowRgn(m_hWnd,m_hrgn,TRUE); InvalidateRect(m_hWnd,NULL,TRUE);


然后需要在WM_NCPAINT的时候描边,创建QQ边框颜色的画笔,用RoundRect就可以画个圆角边框。

QQ的标题栏和系统按钮是自绘的,本来应该在WM_NCPAINT消息里绘制,但是发现点击“编辑个性签名”会出现一个编辑框供输入,而标题栏是不能放置控件的,因此主窗口创建时干脆不要标题栏,全部客户区,在客户区上方模拟一个标题栏区域出来。由于要支持调整窗口尺寸,因此创建窗口时窗口类型是WS_POPUPWINDOW|WS_THICKFRAME|WS_MINIMIZEBOX|WS_MAXIMIZEBOX,如此默认的窗口边框并不符合我们的要求,需要在WM_NCCALCSIZE消息里设置一下边框尺寸:

C/C++ code
RINGMAINMSG(WM_NCCALCSIZE) { LPRECT lprc = (LPRECT)param.lParam; lprc->top += WND_BORDER; lprc->left += WND_BORDER; lprc->right -= (WND_BORDER + 1); //右边框需要留出画边框线的位置,1 lprc->bottom -= (WND_BORDER + 1); //同理 return 0; }



设置边框尺寸为2。这里有一个有趣的现象:即使不响应WM_NCCALCSIZE消息,创建的窗口也是没有标题栏的,没有最小/大化,关闭按钮,但是在任务栏上的程序按钮上按鼠标右键,最小化,移动,大小,关闭的选项一个不少,并且窗口也响应这些命令。如果窗口加上WS_EX_TOOLWINDOW的扩展类型,则程序不会出现在任务栏上,就跟QQ的表现一样了,不过目前我们的程序暂时仅实现标题栏的贴图,不支持实际功能,因此暂时不加这个扩展类型,靠在任务栏上的程序按钮上按鼠标右键实现窗口的最小/大化和关闭操作。不过这也太那个了一点,因此还是在系统栏加个图标为上,怎么在系统栏加图标这个应该不成问题了,这里就不解释了,RingSDK对此进行了封装,一句AddInTaskBar(m_hWnd,LoadIcon(GetInstance(),MAKEINTRESOURCE(IDI_QQ)),"仿QQ2009界面");搞定。响应图标的点击弹出菜单这里也不解释了,看代码就知道了。

接下来就是界面贴图,实现QQ的上下两个区域的绘制,这里就要用到界面库了。首先就是要准备图片,QQ资源里没找到,懒得研究,就自己截图搞了,弄了个宽度为1,高95和55的图片平铺做上下两部分的背景,VISTA风格的系统按钮图案,因为是圆角,需要有透明色,就做成了GIF格式。底纹,右边的沙滩海鸥图案抠图没这个本事,另找了一个相似的,做成PNG格式,PS里面加个蒙板就有了ALPHA通道。图象库支持PNG的半透明绘制,只要调用AlphaTo就行。还有用户头像,随便截了一个,把这些素材加入资源,算准坐标进行双缓冲绘制,依次绘制到内存图象就可以了。这里说一下内存图象的创建,是一开始就创建了一个跟屏幕等宽,高95+55的内存图象,这样就不需要在WM_SIZE里频繁释放再创建了。代码如下:

C/C++ code
//先把各素材绘制到内存图象m_dibBanner //背景 m_dibBkg.StretchTo(&m_dibBanner,0,0,rc.right,m_dibBanner.Height(),0,0,m_dibBkg.Width(),m_dibBkg.Height(),FALSE); //标题(“QQ2009”) m_dibCaption.AlphaTo(&m_dibBanner,8,5,0,0); //装饰图案,即QQ所谓的“底纹” m_dibTatoo.AlphaTo(&m_dibBanner,rc.right-m_dibTatoo.Width(),0,0,0); //用户头像 m_dibUser.DrawTo(&m_dibBanner,7,25,0,0,m_dibUser.Width(),m_dibUser.Height()); //用户名及签名 m_dibUserBanner.DrawTo(&m_dibBanner,54,25,0,0,m_dibUserBanner.Width(),m_dibUserBanner.Height()); //系统按钮 //最小化 m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE,yPos,gRcBtn[0].x,gRcBtn[0].y, NCB_MINWIDTH,NCB_HEIGHT); //关闭 m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_CLOSEWIDTH - NCB_SPACE,yPos, gRcBtn[NCB_CLOSENORMAL].x,gRcBtn[NCB_CLOSENORMAL].y,NCB_CLOSEWIDTH,NCB_HEIGHT); //最大化/还原 if(IsZoomed()) { m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_RESTORENORMAL].x,gRcBtn[NCB_RESTORENORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } else { m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_MAXNORMAL].x,gRcBtn[NCB_MAXNORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } //绘制到窗口 //标题栏区域 m_dibBanner.Draw(hdc,0,0,0,0,rc.right,NCB_TITLEHEIGHT,rc.right,NCB_TITLEHEIGHT); //底栏区域 m_dibBanner.Draw(hdc,0,rc.bottom - NCB_BOTTOMHEIGHT,0,NCB_TITLEHEIGHT,rc.right, NCB_BOTTOMHEIGHT,rc.right,NCB_BOTTOMHEIGHT); 先把各素材绘制到内存图象m_dibBanner //背景 m_dibBkg.StretchTo(&m_dibBanner,0,0,rc.right,m_dibBanner.Height(),0,0,m_dibBkg.Width(),m_dibBkg.Height(),FALSE); //标题(“QQ2009”) m_dibCaption.AlphaTo(&m_dibBanner,8,5,0,0); //装饰图案,即QQ所谓的“底纹” m_dibTatoo.AlphaTo(&m_dibBanner,rc.right-m_dibTatoo.Width(),0,0,0); //用户头像 m_dibUser.DrawTo(&m_dibBanner,7,25,0,0,m_dibUser.Width(),m_dibUser.Height()); //用户名及签名 m_dibUserBanner.DrawTo(&m_dibBanner,54,25,0,0,m_dibUserBanner.Width(),m_dibUserBanner.Height()); //系统按钮 //最小化 m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE,yPos,gRcBtn[0].x,gRcBtn[0].y, NCB_MINWIDTH,NCB_HEIGHT); //关闭 m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_CLOSEWIDTH - NCB_SPACE,yPos, gRcBtn[NCB_CLOSENORMAL].x,gRcBtn[NCB_CLOSENORMAL].y,NCB_CLOSEWIDTH,NCB_HEIGHT); //最大化/还原 if(IsZoomed()) { m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_RESTORENORMAL].x,gRcBtn[NCB_RESTORENORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } else { m_dibBtnRc.DrawTo(&m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_MAXNORMAL].x,gRcBtn[NCB_MAXNORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } //绘制到窗口 //标题栏区域 m_dibBanner.Draw(hdc,0,0,0,0,rc.right,NCB_TITLEHEIGHT,rc.right,NCB_TITLEHEIGHT); //底栏区域 m_dibBanner.Draw(hdc,0,rc.bottom - NCB_BOTTOMHEIGHT,0,NCB_TITLEHEIGHT,rc.right, NCB_BOTTOMHEIGHT,rc.right,NCB_BOTTOMHEIGHT);


至此贴图窗口完成,看一下程序截图:






目前的这个程序可拖动,可调整大小,双击可最大化,系统栏图标按右键可弹出仿QQ的菜单,不过仅“打开主面板”和“关闭”命令有效。界面上的按钮只是贴图,并不会响应鼠标动作。下一步会实现界面按钮的三态和功能响应,添加其他功能,下一篇再说了。

补充说明:界面库是支持MFC的,程序中的贴图代码基本可以照搬到MFC的程序,只需要包含"ringdib.h"即可。不过需要先编译libsrc\freelib下的zlib,png库,想支持JPG还需编译JPG库。

程序下载地址:http://d.download.csdn.net/down/1974639/ringphone

 

分享到:
评论

相关推荐

    循序渐进实现仿QQ界面(一):

    序渐进实现仿QQ界面(一):园角矩形与双缓冲贴图窗口 - CSDN论坛 - CSDN.NET.mht

    循序渐进实现仿QQ界面

    ### 循序渐进实现仿QQ界面:关键技术点解析 #### 一、园角矩形与双缓冲贴图窗口 为了实现仿QQ界面中的园角矩形效果,开发者需要掌握如何利用Windows API来创建园角矩形区域。具体做法如下: 1. **使用...

    24灯十字旋转LED蓝牙版制作资料

    POV系列-24灯十字旋转LED,资料有原理图、PCB丝印图、 改字软件 以及单片机固件,如果有单片机基础完全可以制作参考制作

    大创项目_24.zip

    大学生创业项目源码

    B端安全网关的简单实现#Java#Springboot源码分享

    已实现http协议下的请求转发。支持GET,POST请求以及文件上传,支持IP白名单、apiKey配置。

    【毕业设计】基于uniapp微信小程序电影院选座订票系统设计【源码+论文+答辩ppt+开题报告+任务书】.zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    weixin056基于微信小程序的购物系统+php(文档+源码)_kaic

    weixin056基于微信小程序的购物系统+php(文档+源码)_kaic

    使用mingw编译的openssl-3.4.1,有需要的自取吧

    使用mingw编译的openssl-3.4.1,有需要的自取吧

    Oracle19c netca.rsp

    Oracle19c netca.rsp

    前端小白必看!HTML、CSS、JavaScript 基础全解析

    本资源聚焦前端三剑客基础。课程从 HTML 构建网页结构开始,深入 CSS 样式美化,再到 JavaScript 实现交互逻辑。无论你是零基础小白,还是想巩固基础的学习者,都能通过学习,具备搭建静态网页与简单交互页面的能力,轻松迈进前端开发领域。

    Invoke-WmiCommand.zip

    Invoke-WmiCommand

    (转载)五子棋python

    python五子棋 转载的!!!

    基于springboot框架的Javaweb学科竞赛管理系统(完整源码+数据库sql文件+项目文档+Java项目编程实战+编程练手好项目).zip

    关键词:学科竞赛管理,Java语言,MYSQL数据库,Vue框架 摘 要 I ABSTRACT II 1绪 论 1 1.1研究背景 1 1.2设计原则 1 1.3论文的组织结构 2 2 相关技术简介 3 2.1Java技术 3 2.2B/S结构 3 2.3MYSQL数据库 4 2.4Spring Boot框架 4 2.5Vue框架 5 3 系统分析 6 3.1可行性分析 6 3.1.1技术可行性 6 3.1.2操作可行性 6 3.1.3经济可行性 6 3.1.4法律可行性 6 3.2系统性能分析 7 3.3系统功能分析 7 3.4系统流程分析 8 3.4.1注册流程 8 3.4.2登录流程 9 3.4.3添加信息流程 10 4 系统设计 11 4.1系统概要设计 11 4.2系统结构设计 11 4.3 系统顺序图 12 4.4数据库设计 14 4.4.1 数据库实体(E-R图) 14 4.4.2 数据库表设计 16 5 系统的实现 19 5.1学生功能模块的实现 19 5.1.1 学生注册界面 19 5.1.2 学生登录界面 20 5.1.3 赛项详情界面 21 5.1.4 个人中心界

    大创项目go后台.zip

    大学生创业项目源码

    基于Wav2Lip384的AI主播项目整合包

    开源项目整合包 更多内容可以查阅 项目源码搭建介绍: 《我的AI工具箱Tauri+Django开源git项目介绍和使用》https://datayang.blog.csdn.net/article/details/146156817 图形桌面工具使用教程: 《我的AI工具箱Tauri+Django环境开发,支持局域网使用》https://datayang.blog.csdn.net/article/details/141897682

    智慧园区解决方案-16PPT(21页).pptx

    智慧园区,作为未来城市发展的重要组成部分,正逐步从传统园区向智能化、高效化转型。这一转型不仅提升了园区的运营管理水平,更为入驻企业和民众带来了前所未有的便捷与高效。智慧园区的总体设计围绕现状分析、愿景规划、设计理念及六位一体配套展开。传统园区往往面临服务体系不完善、智慧应用面不广、信息资源共享能力不足等问题,而智慧园区则致力于打破这些壁垒,通过物联网技术、大数据分析等手段,构建起一个完整的运营服务体系。这一体系不仅覆盖了企业成长的全周期,还通过成熟的智慧运营经验,为产业集群的发展提供了有力支撑。智慧园区的愿景在于吸引优秀物联网企业和人才入驻,促进产业转型,提高社会经济效应,并为民众打造更安全、高效的智慧生活方式。 在智慧园区的服务体系及配套方面,园区围绕“1+1+1”(学院+创客+基地)、“两中心”(园区指挥中心+金融中心)、“三平台”(成果展示+招商+政府)等核心配套,辅以日常生活各方面的配套,真正实现了从人才培养、研发、转化、孵化、加速到发展的六位一体示范园区。园区服务体系包括园区运营管理体系、企业服务体系和产业社区服务体系。园区运营管理体系通过协同办公、招商推广、产业分析等手段,打破了信息数据壁垒,构建了统一园区运营服务。企业服务体系则提供了共享智能展厅、会议室预定、园区信息服务、办事大厅等一系列便捷服务,助力企业快速成长。产业社区服务体系则更加注重周边生活的便捷性,如物联网成果展示平台、智慧物流、共享创客空间等,为入驻企业和民众提供了全方位的生活配套。这些服务体系不仅提升了园区的整体竞争力,还为入驻企业创造了良好的发展环境。 智慧园区的场景应用更是丰富多彩,涵盖了智慧停车、智慧访客、公共服务、智慧楼宇、智慧物业等多个方面。智慧停车系统通过车牌识别、车位引导、缴费等子系统,实现了停车场的智能化管理,极大提升了停车效率。智慧访客系统则通过预约、登记、识别等手段,确保了园区的安全有序。公共服务方面,智慧照明、智慧监控、智慧充电桩等设施的应用,不仅提升了园区的整体品质,还为民众带来了更加便捷、安全的生活环境。智慧楼宇和智慧物业系统更是通过智能化手段,实现了楼宇和园区的统一化管理,提升了运营效率和居住舒适度。此外,智慧园区还通过O2O平台、医疗系统、综合服务系统等手段,将线上线下资源有机整合,为入驻企业和民众提供了全方位、便捷的服务体验。这些场景应用不仅展示了智慧园区的智能化水平,更为读者提供了丰富的想象空间和实施方案参考。 综上所述,智慧园区作为未来城市发展的重要方向,正以其独特的魅力和优势吸引着越来越多的关注。通过智能化手段的应用和服务体系的完善,智慧园区不仅提升了园区的整体竞争力和运营效率,还为入驻企业和民众带来了前所未有的便捷与高效。对于写方案的读者来说,智慧园区的解决方案不仅提供了丰富的案例参考和实践经验,更为方案的制定和实施提供了有力的支撑和启示。

    成熟STM32直流电压电流采集与检测方案:包含PCB设计、KEIL源码及原理图与详细设计说明,完备STM32直流电压电流采集与检测解决方案:PCB、KEIL源码、原理图、设计说明,lunwen复现新型

    成熟STM32直流电压电流采集与检测方案:包含PCB设计、KEIL源码及原理图与详细设计说明,完备STM32直流电压电流采集与检测解决方案:PCB、KEIL源码、原理图、设计说明,lunwen复现新型扩展移相eps调制,双有源桥dab变器,MATLAB simulink仿真 ,核心关键词:lunwen复现; 新型扩展移相eps调制; 双有源桥dab变换器; MATLAB simulink仿真;,复现新型扩展移相EPS调制:DAB双有源桥变换器在MATLAB Simulink中的仿真研究

    大创项目——考古土方运输车小程序端.zip

    大学生创业项目源码

    清华大学 deepSeek 三部曲全集

    清华大学deepseek三部曲PDF

    蓝桥杯算法实战详解:编程界‘奥林匹克’的技术提升之路

    内容概要:本文介绍了蓝桥杯编程竞赛的历史背景及其重要意义,强调其作为编程领域中‘奥林匹克’的地位。文章全面解析了蓝桥杯中涉及的不同类型的赛题,如数学计算、字符串处理、排序算法、图论算法、动态规划、模拟题等,通过实例详细讲解这些算法的设计思路及其实现方式。还分享了在比赛过程中应掌握的实际技巧,包括如何选择恰当的算法、优化代码性能,以及调试技巧等,旨在全面提升编程能力。 适合人群:对编程感兴趣的在校生及初学者、想要提升编程能力的从业者。 使用场景及目标:帮助读者了解并掌握蓝桥杯的比赛内容和技术要点;培养解决复杂编程问题的能力;激发编程兴趣并为参赛做准备。 其他说明:文中穿插成功案例——小乐同学的经历,展现如何从零基础成长为优秀程序员,并通过自身努力在全国比赛中获奖的例子来鼓励读者积极参与此类活动以提升自我价值。最后号召更多编程爱好者参与到蓝桥杯当中,在实践中锻炼和成长。

Global site tag (gtag.js) - Google Analytics