actionscript-3 - 如何跨线段绘制一系列圆弧段

Question

我正在尝试绘制一个“倒计时”圆圈，它会产生一个视觉时钟，但不喜欢生成的形状，因为它不光滑。当变量“numberOfSides”足够大时，下面的代码绘制并填充了一系列近似于圆形的三角形，但这既低效又会产生难看的“圆”。我想做的是在线段上画一系列弧线，但我不知道该怎么做。谁能给我一个正确方向的建议？

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" frameRate="100" creationComplete="init()">
<mx:Script>
    <![CDATA[
        private var numberOfSides:int = 10;
        private var angle:Number = 0;
        private var lineLength:int = 100;
        private var xStartingPos:int = 300;
        private var yStartingPos:int = 300;
        private var i:int = 90;//Start the drawing  at 0 to 360;
        private var speed:int = 100;
        private var timer:Timer  
        private function init():void{
            //uic.graphics.lineStyle(1);
            uic.graphics.moveTo(xStartingPos,yStartingPos);
            uic.graphics.beginFill(0xffff00);
            timer = new Timer(speed, numberOfSides + 1);
            timer.addEventListener(TimerEvent.TIMER,cont);
            timer.start()
        }
        private function cont(event:TimerEvent):void{
                angle = (Math.PI / numberOfSides * 2) * i;
                var xAngle:Number = Math.sin(angle);                 
                var yAngle:Number = Math.cos(angle);
                var xResult:int = xAngle * lineLength;
                var yResult:int = yAngle * lineLength;
                uic.graphics.lineTo(xStartingPos + xResult, yStartingPos + (yResult*-1));
                i++
        }
    ]]>
</mx:Script>
<mx:Canvas  id="uic"/>
</mx:Application>

Answer 1

这可以通过使用 nl.funkymonkey.drawing.DrawingShapes 绘制楔形来完成:

绘制楔形函数:

public static function drawWedge(target:Graphics, x:Number, y:Number, radius:Number, arc:Number, startAngle:Number=0, yRadius:Number=0):void
{
    if (yRadius == 0)
        yRadius = radius;

    target.moveTo(x, y);

    var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number;

    if (Math.abs(arc) > 360)
        arc = 360;

    segs = Math.ceil(Math.abs(arc) / 45);
    segAngle = arc / segs;
    theta = -(segAngle / 180) * Math.PI;
    angle = -(startAngle / 180) * Math.PI;
    if (segs > 0)
    {
        ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;
        ay = y + Math.sin(-startAngle / 180 * Math.PI) * yRadius;
        target.lineTo(ax, ay);
        for (var i:int = 0; i < segs; ++i)
        {
            angle += theta;
            angleMid = angle - (theta / 2);
            bx = x + Math.cos(angle) * radius;
            by = y + Math.sin(angle) * yRadius;
            cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
            cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
            target.curveTo(cx, cy, bx, by);
        }
        target.lineTo(x, y);
    }
}

示例实现，动画倒数计时器:

var value:Number = 0;

addEventListener(Event.ENTER_FRAME, frameHandler);

function frameHandler(event:Event):void
{
    var g:Graphics = graphics;
    g.clear();

    value += 0.01;

    g.lineStyle(1, 0x0000ff, 0.25);
    g.beginFill(0x123456, 0.25);
    drawWedge(g, 100, 100, 50, (360 * value) % 360);
    g.endFill();
}

可以使用任何图形线条样式或填充；或者，填充可以用作 mask 。