硬汉嵌入式论坛

 找回密码
 立即注册
查看: 6908|回复: 11
收起左侧

[emWin] emWin以skinning方式实现BMP图片位图皮肤的源代码

  [复制链接]

4

主题

21

回帖

33

积分

新手上路

积分
33
发表于 2016-6-3 09:52:51 | 显示全部楼层 |阅读模式
  emWin的控件显示是由默认的控件绘制函数完成,但emWin凭借其skinning功能可以非常方便的实现自定义控件绘制函数,利用自定义控件绘制函数我们可以非常方便的实现所有控件的BMP位图皮肤,而且支持整幅图片贴图,不需要对整幅图片进行切片分解,功能非常强大。
image001.png


  如上图所示,(x0,y0)为整幅图片的显示坐标,(x1,y1)(x2,y2)emWin为控件自动生成的剪切显示坐标,我们只需要调用GUI_DrawBitmap()函数在(x0,y0)显示整幅图片即可,emWin会自动剪切显示出该控件的位图皮肤,非常便捷。
  以整幅图片实现emWin位图皮肤可以大大减轻控件贴图的工作量,非常的方便;如果把每个控件对应的图片先切片分解下来,然后再转换成C文件,最后再贴图到控件上面去,那样工作量将是非常恐怖的;保守估计贴图工作效率提高10倍以上。
image003.png


image005.png


附件里面的SKIN_xxxx.cemWin的自定义控件绘制函数,也就是绘制出什么样的控件完全是靠这个函数,可以根据自己的需要修改代码:
demo_emwin_skinPRJ_V530noOS_CodeBlocks_v116.rar (4.13 MB, 下载次数: 3575)
精美、便捷的emWin界面设计-GLCD
回复

使用道具 举报

1万

主题

6万

回帖

10万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
106913
QQ
发表于 2016-6-3 10:19:53 | 显示全部楼层
非常感谢楼主奉献,置酷[s:151] [s:151]
回复

使用道具 举报

5

主题

578

回帖

593

积分

版主

Rank: 7Rank: 7Rank: 7

积分
593
发表于 2016-6-14 22:28:00 | 显示全部楼层
很强大,楼主发贴不多,但是技术含量很高啊
回复

使用道具 举报

4

主题

21

回帖

33

积分

新手上路

积分
33
 楼主| 发表于 2016-6-19 11:31:05 | 显示全部楼层

回 myxiaonia 的帖子

myxiaonia:很强大,楼主发贴不多,但是技术含量很高啊 (2016-06-14 22:28) 
[s:151]  多谢支持!
精美、便捷的emWin界面设计-GLCD
回复

使用道具 举报

6

主题

10

回帖

6

积分

新手上路

积分
6
发表于 2016-6-30 17:22:23 | 显示全部楼层
学习了,正好用到翻页小工具的换肤
回复

使用道具 举报

22

主题

96

回帖

162

积分

初级会员

积分
162
发表于 2017-12-28 14:28:22 | 显示全部楼层
楼主这工程用什么软件打开的呢?
回复

使用道具 举报

1万

主题

6万

回帖

10万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
106913
QQ
发表于 2017-12-28 14:43:54 | 显示全部楼层
crazymcu 发表于 2017-12-28 14:28
楼主这工程用什么软件打开的呢?

使用CodeBlocks、
回复

使用道具 举报

22

主题

96

回帖

162

积分

初级会员

积分
162
发表于 2017-12-29 10:46:06 | 显示全部楼层

嗯嗯,可以了,我一直以为只有Button这类型的控件可以自定义的,看他们的Demo,PROGBAR这种控件也能自定义啊
回复

使用道具 举报

13

主题

38

回帖

77

积分

初级会员

积分
77
发表于 2018-12-25 16:10:50 | 显示全部楼层

eric2013您好:

請問g_lcd大大分享的這個修改小工具的方法,使用整幅圖片的方式,將未按下、按下、焦點的圖分開,這是否代表小工具在位圖上的位置不能改變呢? 必須在原來的位置上。謝謝~  
回复

使用道具 举报

36

主题

2040

回帖

2148

积分

至尊会员

积分
2148
发表于 2018-12-26 10:45:43 | 显示全部楼层
victor0726 发表于 2018-12-25 16:10
eric2013您好:

請問g_lcd大大分享的這個修改小工具的方法,使用整幅圖片的方式,將未按下、按下、焦 ...

只要你能区分开,位置可以改。
Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better.
回复

使用道具 举报

13

主题

38

回帖

77

积分

初级会员

积分
77
发表于 2018-12-26 11:03:18 | 显示全部楼层
本帖最后由 victor0726 于 2018-12-26 11:05 编辑
byccc 发表于 2018-12-26 10:45
只要你能区分开,位置可以改。

byccc 您好:

不太明白您的意思。
我想請教的是,如果原來按鍵未按下的圖在位圖a的(0,0,30,30)。按鍵按下的圖在位圖b的(0,0,30,30)。
可是我真正想顯示的位置是在(50,30,30,30)的位置,能做的到嗎? 也就是按鍵於位圖上的座標和真正要顯示於LCD上的座標不同。 感謝你的回覆
回复

使用道具 举报

13

主题

38

回帖

77

积分

初级会员

积分
77
发表于 2018-12-26 15:24:28 | 显示全部楼层
victor0726 发表于 2018-12-26 11:03
byccc 您好:

不太明白您的意思。

試出來了。 只要預先定義好整幅位圖上所有小工具的座標,就可以嶞意的新增小工具於指定的位置了。樓主真是利害。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|Archiver|手机版|硬汉嵌入式论坛

GMT+8, 2024-5-9 19:41 , Processed in 0.375241 second(s), 28 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表