flex圆形进度条

Question

我正在尝试做一个圆形进度条，但是我被卡住了。

我在绘制彩色圆圈时没有任何问题，但是我不知道如何删除中心的颜色以及如何删除代表缺失百分比的小部分。

实际的解决方案是在背景中使用图片，我将每张图片替换为5％。 它可以工作，但是又笨又笨拙，如果我需要更改圆圈的颜色，则必须重新绘制所有20张图片。

有什么解决方案可以让我动态地画出这个“进度圈”吗？

Answer 1

这比我想像的要复杂得多。

您需要使用Alpha蒙版在圆上打孔。 很难弄清楚，因为关于如何正确执行的文档很少，但是一旦弄清楚就相对容易了。 您需要创建一个blendMode为“ layer”的Group ，并将cacheAsBitmap设置为true。 然后，您可以使用Ellipse创建形状，并创建一个blendMode为“ erase”且cacheAsBitmap设置为true的Group（ 必须在其下方）。 在该组中，绘制要用于在父形状上打孔的形状。

例：

<s:Group cacheAsBitmap="true" blendMode="layer">
    <s:Ellipse id="background" width="84" height="84" >
        <s:fill>
            <s:SolidColor color="0"/>
        </s:fill>
    </s:Ellipse>

    <s:Group id="backgroundMask" horizontalCenter="0" verticalCenter="0" blendMode="erase" cacheAsBitmap="true">
        <s:Ellipse width="64" height="64" >
            <s:fill>
                <s:SolidColor color="0"/>
            </s:fill>
        </s:Ellipse>
    </s:Group>
</s:Group>

这是直接从我最近构建的应用程序中获取的，因此我可以验证其是否有效。 这将创建一个直径为84px的圆，中间有一个64px的孔。

编辑：正如RIAStar在评论中指出的那样，您实际上可以轻描淡写地完成此操作，而不是我费解的方法。

从他的评论：

<s:Ellipse width="74" height="74">
    <s:stroke>
    <s:SolidColorStroke weight="10"/>
    </s:stroke>
</s:Ellipse>

要进行实际的进度，您需要做一些尝试。 不幸的是，没有（没有我所知道的）没有贝塞尔曲线的方法就无法做到这一点。 因此，您基本上可以创建一个Path对象，并在进度更新中重绘其data 。 这将是实际圆的蒙版。

您还需要基于象限绘制它，因此它甚至更加复杂。 基本上，您从顶部居中开始，向下绘制到圆心，绘制到进度中的当前点，然后绘制到该象限的角，然后再绘制到每个先前的角，最后回到顶部中间。

我无法提供绘制实际路径的代码（不是通用代码，可以在任何地方找到它，而我的NDA阻止我这样做），但是我可以向您展示如何获得当前进展的重点。 您可能必须根据圆的属性来填充该点，但是无论如何应该使用它作为一个良好的起点。

var halfHeight:Number = this.background.height / 2;
var halfWidth:Number = this.background.width / 2;
var angle:Number = -this.progress * 2 * Math.PI - Math.PI / 2; (uses negative progress to indicate counter-clockwise direction)
var pointOnCircle:Point = new Point(halfWidth * Math.cos( angle ) + halfWidth, halfWidth * Math.sin( angle ) + halfWidth);

pointOnCircle应该位于上面绘制的圆的外边缘上。 this.progress是介于0和1之间的数字。请确保将其限制在该范围内。 如果我没记错的话，如果超出了这些范围，这种做法就会中断。

希望有帮助。 再说一遍，我不能给您展示更多的东西，但是它足以让您入门

Answer 2

谢谢你们

最后，我有来自http://flassari.is/2009/11/pie-mask-in-as3/的 Josh的代码和脚本

我使用了flassari中的代码来绘制和更新圆（已编辑为在还原模式下从100％更改为0％），并使用Josh的方法在圆的中心制作了一个孔。

这是我使用的主要代码：

private function init():void
{
    // Store sprites
    var container:UIComponent = new UIComponent();
    gr.addElementAt(container, 0);

    // Draw the full circle with colors
    circleToMask.graphics.beginGradientFill(GradientType.RADIAL, [0x000000, 0x000000], [0, 1], [80, 130]);
    circleToMask.graphics.drawCircle(0, 0, 50);
    circleToMask.graphics.endFill();

    // Add the circle
    container.addChildAt(circleToMask, 0);

    // Add the mask
    container.addChild(circleMask);

    Set the position of the circle
    circleToMask.x = (circleMask.x = 14);
    circleToMask.y = (circleMask.y = 14);
    circleToMask.mask = circleMask;

    // Draw the circle at 100%
    renderChart(1);
}
private function renderChart(percentage:Number):void
{
    circleMask.graphics.clear();
    circleMask.graphics.beginFill(0);

    // Draw the circle at the given percentage            /------ set the begin at the middle top
    drawPieMask(circleMask.graphics, percentage, 100, -1.57, 8);
    circleMask.graphics.endFill();
}

// Function from flassari (a little simplified)
private function drawPieMask(graphics:Graphics, percentage:Number, radius:Number = 50, rotation:Number = 0, sides:int = 6):void {
    radius /= Math.cos(1/sides * Math.PI);
    var lineToRadians:Function = function(rads:Number):void {
        graphics.lineTo(Math.cos(rads) * radius + x, Math.sin(rads) * radius + y);
    };
    var sidesToDraw:int = Math.floor(percentage * sides);
    for (var i:int = 0; i <= sidesToDraw; i++)
        lineToRadians((i / sides) * (Math.PI * 2) + rotation);
    if (percentage * sides != sidesToDraw)
        lineToRadians(percentage * (Math.PI * 2) + rotation);
}

在这里，mxml：

<s:Group verticalCenter="0" horizontalCenter="0">
    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0xcccccc"/>
        </s:fill>
    </s:Rect>
    <s:Label id="lab" verticalCenter="0" horizontalCenter="0" text="test"/>
    <s:Group id="gr" cacheAsBitmap="true" blendMode="layer" verticalCenter="0" horizontalCenter="0">
        <s:Group verticalCenter="0" horizontalCenter="0" blendMode="erase" cacheAsBitmap="true">
            <s:Ellipse width="30" height="30">
                <s:fill>
                    <s:SolidColor color="0"/>
                </s:fill>
            </s:Ellipse>
        </s:Group>
    </s:Group>
</s:Group>

谢谢你们的帮助