Egret社区

eui进度条

2019-1-9 20:22
67111
20银子
遇到一个任务的精度条,不知道怎么来做,下面是我的项目图: 1547036038(1).png 这是我想要实现的效果图,而我自己做了一个eui皮肤,后面的显示数字我是用了一个Label来显示:,现在不知道如何把label显示的数据作为进度条,显示进程 exml3.png exml (2).png ,由于刚接触不久还不是熟悉,请大神们给小弟指点一下

分享到 :
0 人收藏

11 个回复

倒序浏览
熊猫少女  官方团队 | 2019-1-10 09:19:18
遮罩
haoming  圆转纯熟 | 2019-1-10 10:42:31
dbw  初窥堂奥 | 2019-1-10 10:50:11
你 label显示的数据的比例就是你的进度条长度的比例啊,,
chaopeng  登堂入室 | 2019-1-10 10:50:41

那我应该如果去设置遮罩呢?
chaopeng  登堂入室 | 2019-1-10 10:55:22
dbw 发表于 2019-1-10 10:50
你 label显示的数据的比例就是你的进度条长度的比例啊,,

private createView():void{
        this.welfareItemBar.labelFunction = this.progressLabelFunc;
    }

    private progressLabelFunc(value:number,maximum:number):string{
        return Math.ceil(value/maximum).toString();
    }是的,但是进度条没反应啊
kongao0204  登堂入室 | 2019-1-10 11:14:02
我用过改 Xscale 的方案来做,不过这种方案只适合做那种长方形纯色的进度条;

熊猫少女的方案,是指把进度条的图片默认填满100%,然后用一个遮罩放在上层,向右对齐,长度正好和进度条长度相反;这种方案也可以用 Xscale 来改遮罩长度,Xscale 的百分比 正好和进度条的百分比相反;
这个方案的缺点是进度条的右侧是直接被切掉了,而不是圆头。

要让进度条右边也是圆头,需要用到九宫格图片,然后根据数据来拉伸。九宫格我没用过,具体怎么用就要去看文档了。
dbw  初窥堂奥 | 2019-1-10 11:24:20
chaopeng 发表于 2019-1-10 10:55
private createView():void{
        this.welfareItemBar.labelFunction = this.progressLabelFunc;
   ...

你都没有改变长度怎么能有反应
dbw  初窥堂奥 | 2019-1-10 11:37:29
那你还是用eui的组件吧     有个ProgressBar
steven1041  自成一派 | 2019-1-10 14:08:48
本帖最后由 steven1041 于 2019-1-10 14:14 编辑

这里有一个数值:进度百分比percent,每次更新进度条,你要算出这个值
1. 在皮肤进度条ProgressBar下面或上面拖一个eui.rect组件,宽和高与你设置的进度条一样. 透明度为1,颜色随便
2  当进度百分比改变时,就改变这个rect的宽度= rect的原始宽度*percent; 然后设置ProgressBar.mask=rect.就可以了

上面这个方法柯能不适合你,因为你的进度条二端是椭圆的,所以要换个方法:
1.设置你进度条上面那层图片 的九宫格,   作用:让这个图片,改变宽度时,形状不变.
2. 当percent,变化时,你直接改变度条上面那层图片的宽度=原始宽度*percent
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部