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

[转]循序渐进实现仿QQ界面(二):贴图按钮的三态模拟

阅读更多

演示程序需要RingSDK库,编译有问题的请看本文的原始链接:http://blog.csdn.net/ringphone/archive/2010/01/10/5171490.aspx,这里就直接进入正题,讲解如何实现贴图按钮的三态模拟。所谓三态,就是按钮的正常状态,鼠标移上去的高亮状态以及按下状态。实际应该还有一个Disable状态,不过这个程序没有不可用的按钮,因此就不实现这个效果了。由于是贴图,不是实际的按钮,因此必须自己处理鼠标消息并进行三种状态的绘制。首先当然要有一个鼠标位置检测函数HitTest,检测鼠标在哪个按钮上面,由于程序的非客户区仅仅是一个尺寸为2的园角矩形框,标题栏是模拟在客户区实现,因此这个HitTest函数是在WM_MOUSEMOVE消息里调用判断,无非是PtInRect进行各个按钮坐标的检测,因此这个HitTest函数的实现这里就不讲解了,看代码就明白了。如果鼠标在按钮区域,该函数返回按钮ID,在系统按钮区域,返回HTMINBUTTON,HTMAXBUTTON,HTCLOSE,方便直接发送系统命令,不在任何按钮,返回HTCAPTION,可以拖动窗口。

如果HitTest返回了按钮ID,用户没按下鼠标,应该绘制按钮的高亮状态。这里有个问题,绘制完了以后,用户继续移动鼠标,但是没移出这个按钮,WM_MOUSEMOVE消息又会检测到需要绘制高亮状态,这样不断绘制就会造成鼠标闪烁,因此需要定义一个m_nCurWhere的成员变量,记录鼠标上一次的HitTest检测值:

C/C++ code
int nWhere = HitTest(...); if(nWhere != m_nCurWhere) { //需要绘制按钮,高亮或恢复原状 if(nWhere != HTCAPTION) CheckAndDrawButtons(nWhere,4); //绘制nWhere按钮的高亮状态 else CheckAndDrawButtons(m_nCurWhere,0); //恢复高亮按钮的原始状态 } m_nCurWhere = nWhere;


这样就保证了各种状态变化,只需要绘制一次。

实现按钮按下状态,需要在WM_LBUTTONDOWN消息里处理,首先当然是进行HitTest检测,这里也要定义一个成员变量m_nCurSysCmd,标记当前是按下了哪个按钮,然后绘制按钮的按下状态。由于用户可能按下了按钮,不松开鼠标进行移动,因此还需要定义一个成员变量m_bInCapture,在WM_LBUTTONDOWN消息里置这个变量为TRUE,SetCapture捕获鼠标,在WM_LBUTTONUP消息里ReleaseCapture释放鼠标,置这个变量为FALSE,这样在WM_MOUSEMOVE里调用的按钮绘制函数就可以根据m_bInCapture判断是该绘制按下状态还是高亮状态。WM_LBUTTONUP消息也可以根据这个标志判断是否该执行按钮动作,否则在别的地方按下鼠标键,移到一个按钮上松开鼠标,执行该按钮功能有点不大对头,应该判断m_bInCapture为TRUE且m_nCurSysCmd与HitTest检测到的按钮相等才执行该按钮的功能。鼠标键按下时的移动,只会对m_nCurSysCmd标记的按钮进行按下状态和正常状态的绘制,其余按钮一概不理。发现QQ2009在这方面没有实现,按下按钮后不松开鼠标键移出按钮,按钮状态不会变化。

按此机制,WM_MOUSEMOVE里的判断应该修改一下了,增加对按钮按下状态的判断:
C/C++ code
RINGMAINMSG(WM_MOUSEMOVE) { int nWhere = HitTest(param); if(m_bInCapture) { //鼠标键按下状态的移动 if(m_nCurSysCmd == nWhere && m_nCurWhere != nWhere) { //鼠标从按钮外移入按钮,绘制按下状态按钮 CheckAndDrawButtons(nWhere,8); } else if(m_nCurSysCmd != nWhere && m_nCurSysCmd == m_nCurWhere) { //鼠标移出按钮,绘制正常状态 CheckAndDrawButtons(m_nCurSysCmd,0); } m_nCurWhere = nWhere; return 0; } else { LRESULT res; if(nWhere != m_nCurWhere) { //需要绘制按钮,高亮或恢复原状 if(nWhere != HTCAPTION) CheckAndDrawButtons(nWhere,4); //高亮状态 else CheckAndDrawButtons(m_nCurWhere,0); //恢复原状 } res = DefaultProc(param); m_nCurWhere = nWhere; return res; } }


至此,鼠标对按钮的检测功能已完成,剩下的就是按钮的绘制工作了。按钮的绘制工作分为3块:系统按钮的绘制,用户头像旁边一个可弹出菜单的按钮和编辑个性签名按钮([我在线上]也是按钮,不过这个与个性签名按钮实现是一样的,这里就省点事,不实现了),以及用户头像下方的工具栏上那一排按钮。系统按钮的绘制采用的是最常见的方法,这里把系统按钮资源图象贴出来大家就知道了,根据需要绘制的状态,只要把图象上相应区域绘制到目标就可以了。如图:



不过这里还是要有个技巧,最下面一排是正常状态按钮,为将来界面调色的需要,处理成了透明的,仅边框和线条是不透明的,这样绘制正常状态按钮的时候就需要恢复背景色,然后透明绘制正常状态的按钮,有点麻烦,因此程序初始化的时候就初始化了系统按钮区域大小的一个内存图片,在WM_PAINT消息里面贴图的时候,顺便就把该正常系统按钮区域的图象绘制到了这个内存图象,这样恢复系统按钮状态只要绘制一遍这个内存图象就可以了。

接下来是绘制工具栏那一排按钮,来看看所需要的资源图片,一共是两幅:




实现的按钮三态效果,第二个是高亮状态,第三个是按下状态:



恩?这个是怎么实现的?关键在第2张资源图片,分为左右两部分,左边是高亮状态,右边是按下状态,每一部分图象是5个像素宽,左右各2像素分别是按钮左右边框,中间1像素是按钮的中间图案,绘制时需要横向拉伸至按钮除去左右边框的宽度。先恢复背景图案,然后绘制高亮状态按钮,最后把整个工具栏图象透明绘制上去就可以了,不会影响已经绘制好的背景。按下状态的绘制稍稍有点不一样,因为需要把按下的按钮图象向右下方偏移1个像素,显得按钮是按下去了,这样就不能一下把整个工具栏图象画上去,需要绘制按下的按钮图象,然后把这个按钮左右边的按钮绘制上去。

用户头像旁边的按钮与工具栏的绘制类似,就不讲解了,看源代码就知道了,代码里面图象的源区域坐标,绘制目的坐标有点绕,需要头脑清楚才不会搞糊涂。需要搞清楚图象库的DrawTo,StretchTo几个函数的参数定义,具体看RingSDK的帮助文件吧。

顺便说一下,图象库的双缓冲绘制操作是直接操作的图象数据,说白了只是一些COLORREF数组数据的搬移,除了绘制文字,根本不需要HDC的参与,因此速度和效率是很高的。

至此贴图按钮的三态模拟完成,还需要实现其他一些功能,工具提示,把工具栏按钮的工具提示加了上去,不过最右边两个“打开消息盒子”和“更改外观”的按钮的工具提示需要额外处理,因为窗口可以调整大小,一改变尺寸原来的坐标就不对了,因此需要动态改变坐标,在哪里改呢,WM_SIZE消息?用户改变窗口尺寸的时候其实是没办法把鼠标移到这两个按钮上的,而且WM_SIZE消息太频繁了,我们只需要在尺寸调整完毕的时候更新一下坐标就行了,这个消息就是WM_EXITSIZEMOVE:

C/C++ code
TOOLINFO ti; CopyRect(&ti.rect,&rc); //rc为更新的坐标 m_tip->SetToolInfo(&ti);



实际程序里的代码要复杂一些。系统按钮的工具提示没加,有兴趣的可以自己完成,需要跟这两个工具栏按钮一样的处理,更新坐标。

还有是按下用户头像旁按钮弹出菜单,QQ2009这个菜单的最后两项与系统栏图标上弹出的菜单是不一样的,这里就不麻烦了,直接弹出了系统栏图标上弹出的菜单。

个性签名按钮,按下后会显示一个编辑框允许编辑签名,这个不难,麻烦的是这个编辑框需要自动隐藏,处理其EN_KILLFOCUS消息并不能完全实现效果,因为界面上没有别的控件可以抢它的焦点,只有程序失去焦点才会有这个消息,因此需要在WM_LBUTTONDOWN里面再加个判断处理,既然收到WM_LBUTTONDOWN消息,说明是在编辑框外按了鼠标,可以隐藏了。可惜这样做还不够,调整窗口尺寸的时候是点击了非客户区,没有WM_LBUTTONDOWN消息,因此需要在WM_ENTERSIZEMOVE消息里再加个判断处理,这样编辑个性签名的功能才算完善。

至此,这个程序已经实现了所有按钮的三态模拟,系统按钮的功能响应,工具栏按钮的工具提示,可编辑个性签名,可弹出菜单。加了WS_EX_TOOLWINDOW的扩展类型,程序不会出现在任务栏上,没加限制只执行一次程序的功能。有个小小BUG,鼠标移到系统按钮区域,系统按钮显示高亮状态,这时把鼠标快速向上移出窗口,按钮状态不会恢复,因为没有了WM_MOUSEMOVE消息,解决这个问题需要TrackMouseEvent,然后在WM_MOUSELEAVE消息里恢复按钮状态,有兴趣的可以自己解决。

最后看看程序截图:



界面下方的工具栏以后会用不同的方法实现,下一篇,将会讲解如何实现一个激动人心的功能:界面调色。大家打开程序资源,可以看到里面已经有更改外观的设置对话框了,以后会讲解如何自绘控件,实现QQ的这个更改外观对话框。

演示程序下载地址:http://download.csdn.net/source/1982937

分享到:
评论

相关推荐

    循序渐进实现仿QQ界面

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

    仿QQ界面程序(2)

    缺头文件的,请到下面文章的地址去看。 循序渐进实现仿QQ界面(二):贴图按钮的三态模拟的配套源码,文章请见:http://blog.csdn.net/ringphone/archive/2010/01/10/5171490.aspx

    deepseek经验分享-陈雄.pptx

    deepseek经验分享-陈雄.pptx

    采用springboot框架的基于Java的家政服务平台的设计与实现(Java项目编程实战+完整源码+毕设文档+sql文件+学习练手好项目).zip

    本家政服务平台就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可以帮助管理人员提高事务处理效率,达到事半功倍的效果。此家政服务平台利用当下成熟完善的Spring Boot框架,使用跨平台的可开发大型商业网站的Java语言,以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。家政服务平台有管理员,雇主,雇员三个角色。管理员功能有个人中心,雇主管理,雇员管理,资料认证管理,项目类型管理,服务项目管理,需求信息管理,服务预约管理,申请预约管理,签订合同管理,雇主评价管理,留言板管理,系统管理。雇主可以发布需求,雇员可以申请预约,雇主支付报酬,雇主和雇员可以签订合同,雇主可以对雇员进行评价。家政服务平台的开发根据操作人员需要设计的界面简洁美观,在功能模块布局上跟同类型网站保持一致,程序在实现基本要求功能时,也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时,也实现了数据信息的整体化,规范化与自动化。 关键词:家政服务平台;Spring Boot框架;MySQL;自动化

    【毕业设计】“跑鸭”微信小程序-一款基于校园跑步的社交小程序【源码+论文+答辩ppt+开题报告+任务书】.zip

    【毕业设计】“跑鸭”微信小程序-一款基于校园跑步的社交小程序(实时里程配速、运动路径、整公里提醒、周榜月榜、打卡分享、热门推荐、线上活动、勋章墙、隐私设置 【源码+论文+答辩ppt+开题报告+任务书】.zip【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    大学生创新创业大赛项目 - 仿 Envato 的电商项目.zip

    大学生创业项目源码

    Python爬虫实例,一个简单的DEMO

    使用requests和BeautifulSoup库爬取豆瓣电影Top250的基本信息

    电动汽车(EV)保有量数据集(232K+记录,17特征)CSV

    数据集文件包含美国各地电动汽车 (EV) 注册的详细记录,其结构便于分析并与数据处理工具集成。它通常以 CSV 格式提供,以确保与各种数据分析平台的兼容性。 关键列和数据属性: 做:电动汽车制造商(例如,特斯拉、日产、雪佛兰)。 型:车辆的特定型号(例如,Model S、Leaf、Bolt)。 车型年份:车辆模型的制造年份。 电动续航里程:每次充电的估计电动行驶里程(以英里为单位)。 EV 类型:将车辆分类为电池电动汽车 (BEV) 或插电式混合动力电动汽车 (PHEV)。 州和县:车辆注册的地理位置,允许进行区域分布分析。 注册人数:每个地区每个车型注册的车辆数量,有助于识别高浓度的 EV 区域。

    施耐德ATV312变频器通过MCGS RTU通讯实现双机监控与控制的触摸屏集成解决方案,无PLC的施耐德ATV312变频器通讯示例:触摸屏控制监控两台变频器,功能多且省成本,改进型可调整步长 P&O

    施耐德ATV312变频器通过MCGS RTU通讯实现双机监控与控制的触摸屏集成解决方案,无PLC的施耐德ATV312变频器通讯示例:触摸屏控制监控两台变频器,功能多且省成本,改进型可调整步长 P&O MPPT(二区MPPT复现),光储系统MPPT 直流负载供电的单级离网光伏系统中,降压转器将太阳能光伏阵列和直流负载连接起来,同时确保最大功率点跟踪(MPPT) 和电池充电控制的良好运行。 在MPPT方面,提出了一种改进的自适应步长扰动观测(P&O)方法,以达到不同天气条件下太阳能光伏阵列的实际最大功率点(MPP),同时减少稳态振荡和功率损耗。 此外,电池充电控制侧使用三级充电控制器 (TSCC) 为铅酸电池站充电。 ,改进型P&O; 复现二区MPPT; 光储系统MPPT; 最大功率点跟踪(MPPT); 步长扰动观测; 降压转换器; 太阳能光伏阵列; 电池充电控制; 三级充电控制器(TSCC); 铅酸电池站。,改进型P&O MPPT技术,光储系统高效能量管理

    基于stm32家庭安全防控系统 (程序+WiFi)

    基于stm32家庭安全防控系统 (程序+WiFi)

    Maxwell电机与Simplorer联合仿真教程:矢量控制SVPWM算法与电路搭建详解,自定义电机模型替换指南,Maxwell电机与Simplorer联合仿真教程:电路搭建及矢量控制SVPWM算法实

    Maxwell电机与Simplorer联合仿真教程:矢量控制SVPWM算法与电路搭建详解,自定义电机模型替换指南,Maxwell电机与Simplorer联合仿真教程:电路搭建及矢量控制SVPWM算法实

    CNN-master.zip

    CNN相关以及垃圾分类数据集

    基于springboot框架的流浪动物救助网站的设计与实现(Java项目编程实战+完整源码+毕设文档+sql文件+学习练手好项目).zip

    互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费力等问题,采用流浪动物救助网站可以有效管理,使信息管理能够更加科学和规范。 流浪动物救助网站在Eclipse环境中,使用Java语言进行编码,使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务,其管理员增删改查动物信息和动物信息资料,审核动物信息预订订单,查看订单评价和评分,通过留言功能回复用户提问。 总之,流浪动物救助网站集中管理信息,有着保密性强,效率高,存储空间大,成本低等诸多优点。它可以降低信息管理成本,实现信息管理计算机化。 关键词:流浪动物救助网站;Java语言;Mysql

    采用springboot框架的基于web的机动车号牌管理系统的设计与实现(Java项目编程实战+完整源码+毕设文档+sql文件+学习练手好项目).zip

    对机动车号牌信息管理的提升,也为了对机动车号牌信息进行更好的维护,机动车号牌管理系统的出现就变得水到渠成不可缺少。通过对机动车号牌管理系统的开发,不仅仅可以学以致用,让学到的知识变成成果出现,也强化了知识记忆,扩大了知识储备,是提升自我的一种很好的方法。通过具体的开发,对整个软件开发的过程熟练掌握,不论是前期的设计,还是后续的编码测试,都有了很深刻的认知。 机动车号牌管理系统通过MySQL数据库与Spring Boot框架进行开发,机动车号牌管理系统能够实现牌照换补申请管理,用户管理,牌照申请管理,牌照转移申请管理,车辆信息管理,公告信息管理等功能。 通过机动车号牌管理系统对相关信息的处理,让信息处理变的更加的系统,更加的规范,这是一个必然的结果。已经处理好的信息,不管是用来查找,还是分析,在效率上都会成倍的提高,让计算机变得更加符合生产需要,变成人们不可缺少的一种信息处理工具,实现了绿色办公,节省社会资源,为环境保护也做了力所能及的贡献。 关键字:机动车号牌管理系统,牌照,车辆信息

    Maxwell电机与Simplorer联合仿真教程:矢量控制SVPWM算法及电路搭建指南,包含详细视频与可复制电机模型替换示范,教程Simplorer与Maxwell电机联合仿真,详细教程包含电路

    Maxwell电机与Simplorer联合仿真教程:矢量控制SVPWM算法及电路搭建指南,包含详细视频与可复制电机模型替换示范,教程Simplorer与Maxwell电机联合仿真,详细教程包含电路

    Python实现基于IBES-ELM基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测 多指标的详细项目实例(含完整的程序,GUI设计和代码详解)

    内容概要:本文档详细介绍了一个名为《Python实现基于IBES-ELM基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测》的项目。该项目旨在通过结合改进的秃鹰搜索优化算法(IBES-EO)和极限学习机(ELM),优化ELM模型以提高其预测精度,尤其针对多指标、高维数据以及噪声数据的处理进行了探讨。项目涵盖了从数据预处理到建模预测的一系列完整流程,并提供了代码案例和GUI界面设计思路。文档详细阐述了模型的工作机制、适用场景及其实现细节。 适合人群:对机器学习有兴趣,特别是对ELM、IBES-EO感兴趣的研究人员、开发人员和技术爱好者。 使用场景及目标:适用于各种回归预测问题,包括但不限于金融预测、气象预测、健康数据分析和智能交通系统等。目标在于提供一种高效的解决方案,提高在大规模复杂数据集中进行回归预测的能力,同时也展示了如何将生物启发式的优化算法运用于改进现有的机器学习模型,为实际应用提供更多可能。 阅读建议:文档按照章节顺序编排,从背景介绍到具体实现再到最终总结。初学者可以从头至尾通读,以掌握全流程概念和技能;有一定经验的读者可以直接跳转至自己感兴趣的环节,例如优化算法的具体设计或者代码实现部分。建议边学习边动手实验,以达到最佳的学习效果,并可通过提供的完整示例代码加深理解和记忆。此外,项目中有关于系统架构设计、API接口搭建等内容也可作为实际工程项目参考。

    AdaBoost分类算法案例

    本案例使用鸢尾花萼长度(sepal length)、花萼宽度(sepal width)、花瓣长度(petal length)和花瓣宽度(petal width)作为特征,采用Adaboost算法将其进行分类。 同学们通过本案例学习Adaboost算法的理论基础以及在分类问题中的应用,同时通过实际操作加深对分类算法和数据分析的理解。更好的掌握机器学习算法,培养对数据科学的兴趣和实践能力。

    【毕业设计】基于微信小程序的农产品扶贫助农系统【源码+论文+答辩ppt+开题报告+任务书】.zip

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

    【毕业设计】基于微信小程序的社区门诊管理系统【源码+论文+答辩ppt+开题报告+任务书】.zip

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

Global site tag (gtag.js) - Google Analytics