开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Win32API不规则窗口制作

简介:
+关注继续查看

一、前述
也许您在其他软件中经常看到下面这样的界面,除了感叹视觉设计的绚丽外,也注意到了和其他软件的不同,窗口不是正规的正方形。这就是传说中的非规则窗体,也叫多边形窗口、不规则窗体(=。=名字够俗的)
 


最初找这方面的资料,学习制作一个类似程序,结果发现很多资料都是说的不是很明白,或者是UI控件之类的东东,有一些范例程序还都运行不起来,经过一番折腾,发现一个共同特点,大都是MFC,对MFC印象不是很好,”虽然 MFC 非常强大,但它也有很多缺点,比如它只是 Win32 API 外的一层薄薄的面板,并且对于很多程序员来说,它太过复杂,很难有效地使用。——MSDN”,另外编译出来的东西太臃肿了,一个普通的程序就要1M,事实上,我们仅仅用到了不到200K的部分。
本文中将教会您如何使用Win32 API来创建一个不规则窗体结构,以及附加漂亮的皮肤效果。
二、实现方式
在本文中将以SetWindowRgn创建一个不规则的窗口。
关于SetWindowRgn,在很多教程中都有提到,但是有一个共同特点就是作者们喜欢使用一个矩形或者圆形来创造一个不规则的窗体,也许您读完那些代码,但是却不能找到结果,难道每一个部分都要自己拼么?本文中通过颜色加上SetWindowRgn来解决您的问题,期望您读完有所收获,这正是我所希望的:)。

三、具体实施

1. 准备2张图像
这两张图像分别为mask.bmp和shik.bmp,
mask.bmp :镂空的蒙板文件,一般来讲这个图像是由2个颜色组成的,您需要指定一个颜色来判断那些部分是需要去掉的,而另外一个则是保留的部分。 
skin.bmp :皮肤文件,这个文件将会盖住留下的区域让这个窗体呈现需要的效果。
图像格式您可以使用任何可以读取的图像格式,若您对这2张图像的制作仍然存有疑问,您可以学习一下PhotoShop类似的软件,或者咨询一下视觉设计师。
 

 


2. 创建一个程序
 


为了方便学习起见,我们并不推荐您创建一个空工程从头作起,直接创建一个win32项目的实例还是比较好的。
3. 添加需要的变量
 


关于命名的方式,这取决您的习惯,在这里没有使用指针,清爽的编码较容易学习,也许您可以更好的组织代码,但这并不是本文所关心的事情:)
4. 读取皮肤和蒙板
 


这部分的代码添加位置在显示窗口之前。
通过LoadImage加载bmp图像,也许您有更好的读取图像的方法,但值得注意的是蒙板文件一定要使用没有损伤的单色图像格式,这对颜色判断非常有用,例如bmp、gif等,在这里我们使用了的是一个bmp的图片。
5. 最后的准备
 


写上一些应用变量,在代码我已经写好了注释。
6. 具体实现代码片断
 


实现方式为,判断蒙板图像的每一个点,如果这个点是需要镂空的颜色,那么就将它创建成为一个RNG(多边形),并且使用CombineRgn组合到整合的多边形中,最后使用SetWindowRgn来设置整合多边形为窗口区域。
在这里值得一提,这部分还可以优化,您知道,一般来讲镂空的都是一个区域而不是一个点,那么,我们或许可以做一点什么东西就可以让程序少执行几次CombineRgn^_^
7. show一下效果
 


这就是依据蒙板创建出来的特殊窗口,上图的效果为用鼠标拖动时候的效果,您会发现:
标题栏是存在的
菜单栏也是存在的
窗口的大小仍然存在问题
下一步来解决这个问题
8. 解决上面的问题
第一步,移动创建窗口代码片断到实际实现代码的下面,让我们先将镂空区域设定好
 


第二步,修改CreateWindow特定参数,请阅读注释说明
 

 


第三步,将窗口的菜单参数设置为空,这样就可以去掉了菜单栏
 


最终效果:
 


现在可以看到这个窗口已经变成了我们需要的样子,下面就要为它画上皮肤,值得注意的是,此时,您需要使用alt+F4来关闭窗口。
9. 为窗口画上图像
添加如下代码到WM_PAINT消息处理中
 


绘制的代码位置您可以自定,例如您自己的循环逻辑上,现在只是将图片显示到窗体的hdc上而已。
10. 运行一下效果看看
 


哈哈,我们得到了一个漂亮的图像,简直和真正的手机一样悬浮在您的桌面上面,好了,从现在开始您可以套用上面的方法,为自己开发开发一个特别效果的界面。
11. 如何拖动
您或许已经发现了仍然存在的重大问题,就是这个窗口没有标题栏,怎么才能拖动呢,总不能让它永远放在一个地方,那么我们下面就来解决这个问题。
解决的方法并不难,请在参照下面的代码,添加WM_LBUTTONDOWN消息,并增加一行SendMessage函数。
 


作用为,当点击鼠标左建时发送一个使Windows认为鼠标在窗口标题上WM_NCHITTEST消息给窗口,窗口处理WM_NCHITTEST来解决移动问题。
您可以在WM_LBUTTONDOWN作一些判断,这样,程序会依据您的设定才可以移动——例如指定一个被点击区域才可以移动的if
12. 完成
好了,您可以运行一下程序,并且到处拖动一下,怎么样?不错吧,其实花里胡哨的软件界面制作就是这么简单。

 点击下载例子文件



本文转自nowpaper 51CTO博客,原文链接:http://blog.51cto.com/nowpaper/712620

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Win系统 - 这样清理C盘,一下子多出几十个G(一)
Win系统 - 这样清理C盘,一下子多出几十个G(一)
41 0
CVPR oral解读:医疗AI最新进展,可媲美人类医师推理能力的图像检测算法
疫情让大众更加关注医疗健康。而在刚刚过去的CVPR2020中,也有很多医学方面的研究工作。深睿医疗就有四篇论文入选,其中三篇为oral,其论文涵盖了医疗图像识别,姿态估计等多个主题,在医疗AI方面取得了优异的成绩。
57 0
使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程01)
使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)
63 0
MySQL 超新手入门(5) JOIN 与 UNION 查询
在「world」资料库的「country」表格中,储存世界上所有的国家资料,其中有一个栏位「Capital」用来储存首都资料,不过它只是储存一个编号;另外在「city」表格中,储存世界上所有的城市资料,它主要的栏位有城市编号和城市的名称:
71 0
阿里云物联网平台IoT Studio调用数据分析API示例
本文主要介绍如何在IoT Sudio Web可视化和服务开发中如果调用数据分析API。
688 0
阿里云物联网平台IoT Studio调用数据分析API示例
前面在博客阿里云物联网平台数据分析API调用介绍了如何使用SDK调用数据分析开发的API,本文主要介绍如何在IoT Sudio Web可视化和服务开发中如果调用数据分析API。
2043 0
23704
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载