0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

【AWTK使用经验】如何设计立体电池进度条?

ZLG致远电子 2024-04-18 08:25 次阅读

AWTK是基于C语言开发的跨平台GUI框架。《AWTK使用经验》系列文章将介绍开发AWTK过程中一些常见问题与解决方案,例如:如何加载外部资源?如何设计自定义进度条?这些都会在系列文章进行解答。

如何设计立体电池进度条

在AWTK提供的进度条控件默认样式是比较简单的平面进度条,而在实际开发过程中可能用到需要特殊样式的进度条,比如不规则进度条、分段式进度条以及立体进度条等。本章节将以立体电池进度条为例子介绍如何开发其它样式的进度条。

1f7f50a4-fd1a-11ee-9118-92fbcf53809c.png

图1电池进度条效果图

对于上面提到的特殊样式进度条,大多可以直接在progress_bar控件中使用前景图片后景图片结合的方式来实现。
首先要准备一下图片素材,一般准备两张图片素材,一张是进度条值为0的图片,另一张是进度条值为100的图片。注意两张图片尺寸需要一样,图片尺寸会直接影响进度条控件的大小。1f82e462-fd1a-11ee-9118-92fbcf53809c.png图2进度条值为0和100的图片素材

在AWTK Designer中拖拽出一个进度条progress_bar控件,将它的背景颜色bg_color、前景fg_color设置为透明,并且将进度条控件的宽高设置为图片的宽高。1fb26d0e-fd1a-11ee-9118-92fbcf53809c.png图3设置progress_bar控件前背景颜色接着是设置progress_bar控件的前背景图片:将进度条值为0的图片设置成背景图片bg_image;将进度条值为100的图片设置成前景图片fg_image。同时,设置背景图片显示方式bg_image_draw_type与前景图片显示方式fg_image_draw_type都为default显示方式。最终得出的控件效果图如下:1fba7d96-fd1a-11ee-9118-92fbcf53809c.png图4 progress_bar效果图

测试进度条效果

在完成progress_bar控件的设置之后,接下来可以测试一下它的效果。选中progress_bar控件,并为其添加循环播放的值动画,即可看到进度条实际播放的效果。
1fd6476a-fd1a-11ee-9118-92fbcf53809c.png图5 progress_bar动画运行效果图其它样式的进度条如分段式进度条也是可以用类似的办法实现,准备两张进度条值为0与值为100的图片,然后设置到progress_bar控件样式中,最后模拟运行查看效果即可。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 测试
    +关注

    关注

    8

    文章

    5114

    浏览量

    126360
  • 电池
    +关注

    关注

    84

    文章

    10417

    浏览量

    128715
  • awtk
    +关注

    关注

    0

    文章

    41

    浏览量

    215
收藏 人收藏

    评论

    相关推荐

    AWTK使用经验】如何响应物理按键

    AWTK是基于C语言开发的跨平台GUI框架。《AWTK使用经验》系列文章将介绍开发AWTK过程中一些常见问题与解决方案,例如:如何加载外部资源?如何设计自定义
    的头像 发表于 06-06 08:25 731次阅读
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>经验</b>】如何响应物理按键

    关于进度条

    我用的labview8.6,初学者,在那能找到进度条啊!
    发表于 10-28 11:35

    进度条问题

    如何通过编程的方法改变进度条刻度的最大值?
    发表于 02-20 22:55

    请问怎么用进度条显示程序的进度

    怎么用进度条显示程序的进度
    发表于 12-24 10:02

    labview的进度条

    这是一个labview的进度条程序,比较好用
    发表于 08-04 14:30

    第52章 PROGBAR-进度条控件

    转stemwin教程本期教程讲解STemWin支持的进度条控件。 52. 1 进度条控件介绍 52. 2 官方WIDGET_Multipage实例 52. 3 使用GUIBulder建立多页控件
    发表于 10-18 09:32

    精美的进度条

    本帖最后由 yk74110 于 2019-6-20 11:35 编辑 效果非常漂亮的进度条,稍作修改,子vi可运用于实际项目。
    发表于 12-21 16:18

    labview进度条

    我用labview2017做了一个文件解压和复制的vi,解压过程中不知道真实的解压进度,怎么才能做一个真实的进度条,要真是的,不是自己规定的,求助!!!
    发表于 04-26 09:10

    labview实现进度条

    进度条
    发表于 03-25 17:06

    怎么设置进度条

    RT!比如 我创建一个随意长度的进度条然后我知道一个文件的大小 当把这个文件里的数据读完后进度条也跟着完毕请问那位弄过?我搞了下随意创建 有问题有事候进度条会超出 边框那么一点点!
    发表于 08-22 04:35

    HarmonyOS实战——ProgressBar进度条组件基本使用

    【鸿蒙专栏,从入门到实战系列】:https://bbs.elecfans.com/user/4697363/posts/1. ProgressBar进度条组件组件说明:常见app中,下载进度条
    发表于 09-22 23:31

    C#教程之弹出模式窗口显示进度条

    C#教程之弹出模式窗口显示进度条,很好的C#资料,快来学习吧。
    发表于 04-20 10:49 7次下载

    广州大彩VisualTFT组态控件教程(三)进度条控件

    电子发烧友网站提供《广州大彩VisualTFT组态控件教程(三)进度条控件.pdf》资料免费下载
    发表于 10-13 17:40 0次下载

    大彩串口屏控件教程15 - 圆形进度条控件应用

    大彩串口屏控件教程15-圆形进度条控件应用
    发表于 04-29 12:57 3次下载

    AWTK使用经验】如何播放视频或摄像头画面

    AWTK是基于C语言开发的跨平台GUI框架。《AWTK使用经验》系列文章将介绍开发AWTK过程中一些常见问题与解决方案,例如:如何加载外部资源?如何设计自定义
    的头像 发表于 07-04 08:25 555次阅读
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>经验</b>】如何播放视频或摄像头画面