如何在 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?

推荐答案

我过去这样做的方法是创建一个自定义进度条皮肤，然后将填充设置为一个渐变的整个长度条(即使条的一小部分实际上被绘制.)对于颜色难以停止的东西使用渐变听起来很奇怪，但实际上很容易.您将下一种颜色的停止点设置在前一种颜色的结束停止点旁边.以下是颜色在中间点从绿色变为红色的示例:

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 中动态填充进度条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！