分享一下EMWIN自定义按钮和透明图标的制作

wcyingdream · 发表于 2017-8-10 15:23:59

最近在研究Emwin时，想打算做个漂亮的界面，但是当做按钮的时候，发现了emwin自带的按钮效果很一般，不能很好的融入到界面里，于是在网上找了些资料，研究了下emwin自定义的按钮效果，分享给大家，希望大家也能做出更漂亮的界面。
先来个效果图：

由于大家都是程序员，所以不推荐自己制作图标，可以去 http://www.easyicon.net/ 下载图标，里面有各种各样的图标，选择png格式的。
然后用emwin小工具 BmpCvt.exe来转换成C语言。具体步骤如下：

但是，说的就是这个但是，有的png图片用BmpCvt打开是这样的，

这样的图片转换成c文件后贴到emwin里是这样的

这肯定不是我们想要的效果。那么如何让这种图片的背景变成透明的呢，继续教大家

这几步完成后，就另存图片为png格式，或者bmp格式都行，bmp的要存成32位的。而且bmp图片可以用在没有emwin的项目里作为贴图，具体参考原子哥的例程，这里不做讲解，只讲emwin部分
然后再用bmpCvt打开，我们想要的图片效果就出来了。

接下来就是按钮自定义了，效果见第一张图，如果没有自定义按钮的效果，仅仅只是给按钮贴了个图，那么按钮的样子就会是第一张图的第三种效果。
具体怎么弄就不讲解了，直接贴代码给大家看。

代码和工具.zip (154.07 KB, 下载次数: 1448)

candylife9 · 发表于 2019-2-26 20:08:34

光做图标有什么用，让UI去做.我就问你你用emwin的png相关API可以显示出透明的png图片吗。

罗马的猫 · 发表于 2017-8-10 19:37:10

大恩不言谢，@wcyingdream

guosheng5688 · 发表于 2017-8-10 22:11:58

怎么没人点赞，不错的方法，楼主知道如果选择成光标聚焦的时候怎么做吗

wcyingdream · 发表于 2017-8-11 09:46:11

罗马的猫发表于 2017-8-10 19:37
大恩不言谢，@wcyingdream

希望能帮到你

wcyingdream · 发表于 2017-8-11 09:47:09

guosheng5688 发表于 2017-8-10 22:11
怎么没人点赞，不错的方法，楼主知道如果选择成光标聚焦的时候怎么做吗

这个还没研究过

Crime毛豆 · 发表于 2017-8-11 09:51:33

楼主好人呀！~~~最近正在弄这个，越看越觉得按钮比较丑，一下子有希望改变了hahha

wcyingdream · 发表于 2017-8-11 10:31:29

Crime毛豆发表于 2017-8-11 09:51
楼主好人呀！~~~最近正在弄这个，越看越觉得按钮比较丑，一下子有希望改变了hahha

到时候做个漂亮的界面也来论坛发个帖子

黯夜泡沫 · 发表于 2017-8-29 22:16:02

楼主怎么在位图上添加按钮，按钮不是需要一个窗口吗，这样不会吧位图覆盖了吗，还是说按钮可以单独使用啊

longshengma · 发表于 2017-9-17 21:14:56

谢谢分享

王建峰 · 发表于 2017-9-17 21:31:23

赞一个~

wcyingdream · 发表于 2017-9-18 09:29:39

黯夜泡沫发表于 2017-8-29 22:16
楼主怎么在位图上添加按钮，按钮不是需要一个窗口吗，这样不会吧位图覆盖了吗，还是说按钮可以单独使用啊

是在按钮上添加位图

modu8888 · 发表于 2018-5-18 10:28:53

希望能帮我。

xyzjacky · 发表于 2018-6-4 15:16:55

请教楼主，我现在显示底色为透明的ICON图标，但是实际结果是，图标下面始终有底色怎么办呢？（我两个ICON图标都不需要底色，要透明）
代码如下：
case WM_INIT_DIALOG:
……
            hItem = WM_GetDialogItem(pMsg->hWin, ID_ICONVIEW_1);
            //pData = _GetImageById(ID_ICONVIEW_0_IMAGE_0, &FileSize);
            //ICONVIEW_AddStreamedBitmapItem(hItem, pData, "");
            ICONVIEW_SetIconAlign(hItem, ICONVIEW_IA_TOP);
            //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_UNSEL, GUI_BLUE);
            //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_SEL, GUI_GREEN);
            //ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_UNSEL, GUI_BLUE);
            ICONVIEW_SetFrame(hItem, GUI_COORD_X, 0);//设置图标到IconView边框的间距
            ICONVIEW_SetFrame(hItem, GUI_COORD_Y, 0);
            ICONVIEW_SetFont(hItem, GUI_FONT_8_1);
            ICONVIEW_AddBitmapItem(hItem, &bmwindtype_M, "");//添加图标项

            hItem = WM_GetDialogItem(pMsg->hWin, ID_ICONVIEW_2);
            ICONVIEW_SetIconAlign(hItem, ICONVIEW_IA_TOP);
            //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_UNSEL, GUI_BLUE);
            //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_SEL, GUI_GREEN);
            ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_SEL, GUI_BLUE);
            ICONVIEW_SetFrame(hItem, GUI_COORD_X, 0);//设置图标到IconView边框的间距
            ICONVIEW_SetFrame(hItem, GUI_COORD_Y, 0);
            ICONVIEW_SetFont(hItem, GUI_FONT_8_1);
            ICONVIEW_AddBitmapItem(hItem, &bmWifi32_X, "");//添加图标项

在模拟器上的执行结果如图：

请问版主，这里初始化时的代码该怎么写呢，才能使图标的背景为透明。
现在作ICON的图片是.png格式且透明的，是用BmpCvtST工具取的.C文件。

wcyingdream · 发表于 2018-6-5 09:14:35

xyzjacky 发表于 2018-6-4 15:16
请教楼主，我现在显示底色为透明的ICON图标，但是实际结果是，图标下面始终有底色怎么办呢？（我两个ICON图 ...

按照我的步骤来，应该没问题的，你把我代码下载下来看看

xyzjacky · 发表于 2018-6-5 09:39:01

wcyingdream 发表于 2018-6-5 09:14
按照我的步骤来，应该没问题的，你把我代码下载下来看看

你的代码打不开，压缩包里面的maintask.c文件是坏的。

wcyingdream · 发表于 2018-6-6 09:05:57

xyzjacky 发表于 2018-6-5 09:39
你的代码打不开，压缩包里面的maintask.c文件是坏的。

不会啊，我试了是好的，你用好压解压看看

xyzjacky · 发表于 2018-6-7 15:56:43

wcyingdream 发表于 2018-6-6 09:05
不会啊，我试了是好的，你用好压解压看看

你的代码我打开了，但是你的用法和我的不一样，我是用的iconview方式

LRW · 发表于 2018-9-2 20:26:12

谢谢楼主分享！刚好用到

h418452224 · 发表于 2018-9-3 16:30:53

楼主，您好，我仿真了您的C文件，发现是黑屏的。。

douxiaolingyun · 发表于 2018-10-7 09:50:33

mark 一下

fanwei326 · 发表于 2018-12-30 16:48:58

谢谢分享，太有用了。

lxj19901115 · 发表于 2019-1-7 11:59:56

感谢楼主，很实用，

秋天 · 发表于 2019-1-7 15:02:06

谢谢分享

大付付付 · 发表于 2019-3-25 15:19:59

感谢楼主分享，满满的干货！！！

y309976659 · 发表于 2019-5-30 08:54:20

非常有用，mark一下。

渡渡 · 发表于 2019-6-14 08:27:24

代码和工具，谢谢老妹

okyihu · 发表于 2019-6-19 15:39:46

楼主，能否把头文件也上传一下，谢谢

yconnor · 发表于 2019-9-3 08:50:35

很不错的一种方法。学习了学习了。

yconnor · 发表于 2019-9-3 08:51:52

非常不错的方法，学习了学习了！

五月爸爸 · 发表于 2019-9-5 15:53:57

非常棒，感谢楼主分享！！！

windriver · 发表于 2020-2-28 23:51:09

很不错，感谢楼主分享！！！

jinniuxing · 发表于 2020-8-25 16:55:44

感谢分享，学习一下

dirsn · 发表于 2020-9-11 15:56:03

h418452224 发表于 2018-9-3 16:30
楼主，您好，我仿真了您的C文件，发现是黑屏的。。

增加一行
GUI_Init(); //初始化emWin/ucGUI

沉陌 · 发表于 2021-1-18 13:48:31

666666

帐号		自动登录	找回密码
密码			立即注册

分享一下EMWIN自定义按钮和透明图标的制作

原子哥极力推荐 /2