eui进度条

遇到一个任务的精度条，不知道怎么来做，下面是我的项目图： 这是我想要实现的效果图，而我自己做了一个eui皮肤，后面的显示数字我是用了一个Label来显示：，现在不知道如何把label显示的数据作为进度条，显示进程 ，由于刚接触不久还不是熟悉，请大神们给小弟指点一下

遮罩

熊猫少女 发表于 2019-1-10 09:19
遮罩

精辟

你 label显示的数据的比例就是你的进度条长度的比例啊，，

熊猫少女 发表于 2019-1-10 09:19
遮罩

那我应该如果去设置遮罩呢？

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();
    }是的，但是进度条没反应啊

我用过改 Xscale 的方案来做，不过这种方案只适合做那种长方形纯色的进度条；

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

要让进度条右边也是圆头，需要用到九宫格图片，然后根据数据来拉伸。九宫格我没用过，具体怎么用就要去看文档了。

chaopeng 发表于 2019-1-10 10:55
private createView():void{
        this.welfareItemBar.labelFunction = this.progressLabelFunc;
   ...

你都没有改变长度怎么能有反应

那你还是用eui的组件吧     有个ProgressBar

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

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