如何动态地填写的Flex / ActionScript中的进度条？ [英] How to dynamically fill a progress bar in Flex/Actionscript?

问题描述

我想创建一个进度条，其中它的％填充有不同颜色的基础上的一些变量。例如33％的人会填充不同颜色的进度条的33％，然后40％将同样，填充它的40％。什么是做到这一点的ActionScript和Flex 3的最佳方式是什么？

I want to create a progress bar of which a % of it is filled in with a different color based on some variable. For example 33 % would fill 33 % of the progress bar with a different color and then 40 % would likewise, fill 40 % of it. What is the best way to do this in Actionscript and Flex 3?

推荐答案

就是我已经在过去这样做是创建一个自定义进度栏皮肤，然后设置填充是一个梯度，这个梯度推移的整个长度酒吧（即使酒吧的一小部分真正被绘制。）听起来很奇怪使用渐变的东西，有难停的颜色，但它实际上是pretty的方便。您可以设置止损下一种颜色旁边结束止为previous颜色。下面是一个例子，从绿色的颜色变成红色的中间点：

The way I've done this in the past is to create a custom progress bar skin, then set the fill to be a gradient that goes the entire length of the bar (even though a smaller portion of the bar actually gets drawn.) Sounds strange to use a gradient for something that has hard stops to the colors, but it's actually pretty easy. You set the stop for the next color right next to an end stop for the previous color. Here's an example where the color changes from green to red at the mid point:

package some.package.skins
{
    import flash.display.GradientType;
    import flash.geom.Matrix;

    import mx.core.UIComponent;
    import mx.skins.halo.ProgressBarSkin;

    public class ColoredProgressBarSkin extends ProgressBarSkin
    {
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w, h);
            graphics.clear();

            var fullWidth:int = w;
            if (parent != null && (parent as UIComponent).mask != null)
                fullWidth = (parent as UIComponent).mask.width;

            var matrix:Matrix = new Matrix();
            matrix.createGradientBox(fullWidth, h);
            var colors:Array = [0x00ff00, 0x00ff00, 0xff0000, 0xff0000];

            this.graphics.lineStyle();
            this.graphics.beginGradientFill(GradientType.LINEAR, colors, [1,1,1,1], [0,128,128,255], matrix);
            this.graphics.drawRoundRect(2, 2, w - 4, h - 4, h - 4); 
        }

    }
}

您则可以用这个皮肤的barSkin风格上的进度条，无论是在CSS或在您使用进度条的标签。

You then set this skin to the barSkin style on your progress bar, either in CSS or in the tag where you use the progress bar.

希望有所帮助。

这篇关于如何动态地填写的Flex / ActionScript中的进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！