Question

我正在尝试制作一个计时器，我想要一个始终显示的圆圈。它开始是绿色的。随着时间的推移，一个正在增长的红色馅饼切片开始占据越来越多的圆圈，直到整个圆圈变红。这有意义吗？

限制是我不能使用精灵，因此必须使用UIComponent或其他格式。另外，我不能使用degrafa。我使用的SDK不支持这些方法。

更新：甜蜜！谢谢你的代码。它就像一个冠军。我唯一的阻碍是我使用的SDK不支持旋转，但我认为我可以完成所有工作。非常感谢！！对于其他不能使用精灵的人，只需替换精灵所在的UIComponent。

关注：我非常确定旋转是唯一的方法，但它是否可以让它从12点位置开始而不旋转？

Answer 1

使用另一个Shape作为遮罩来执行显示。

用于扩展饼形的代码示例

实例化你的精灵：

sp = new Sprite();
sp.graphics.beginFill(0xC3C3C3);
drawWedge(sp, 50, 150, 150, ang, 0);
sp.graphics.endFill();
addChild(sp);

绘制楔形码：

private function drawWedge (obj:Sprite, r:Number, x:Number,
                            y:Number, angle:Number, rotation:Number):void {
    // start at 0,0 so rotation will be around the point of the wedge

    obj.graphics.moveTo(0, 0);
    obj.graphics.lineTo(r, 0);

    var TO_RADIANS:Number = Math.PI/180;


    // calculate 30-degree segments for accuracy
    var nSeg:Number = Math.floor(angle/30);   // eg 2 if angle is 80
    var pSeg:Number = angle - nSeg*30;        // eg 20 if angle is 80

    // draw the 30-degree segments
    var a:Number = 0.268;  // tan(15)
    for (var i:Number=0; i < nSeg; i++) {
        var endx:Number = r*Math.cos((i+1)*30*TO_RADIANS);
        var endy:Number = r*Math.sin((i+1)*30*TO_RADIANS);
        var ax:Number = endx+r*a*Math.cos(((i+1)*30-90)*TO_RADIANS);
        var ay:Number = endy+r*a*Math.sin(((i+1)*30-90)*TO_RADIANS);
        obj.graphics.curveTo(ax, ay, endx, endy);   
    }

    // draw the remainder
    if (pSeg > 0) {
        a = Math.tan(pSeg/2 * TO_RADIANS);
        endx = r*Math.cos((i*30+pSeg)*TO_RADIANS);
        endy = r*Math.sin((i*30+pSeg)*TO_RADIANS);
        ax = endx+r*a*Math.cos((i*30 + pSeg-90)*TO_RADIANS);
        ay = endy+r*a*Math.sin((i*30 + pSeg-90)*TO_RADIANS);
        obj.graphics.curveTo(ax, ay, endx, endy);
    }
    obj.graphics.lineTo(0, 0);

    // rotate the wedge to its correct location in the circle
    obj.rotation = rotation;
    obj.x = x;
    obj.y = y;
}

然后在你的动画代码中使用它：

if (ang > -1) {
    sp.graphics.clear();
    sp.graphics.beginFill(0xC3C3C3);
    drawWedge(sp, 50, 150, 150, ang, 0);
    ang--; //angle to decrease
}

在ActionScript中为圆形填充设置动画

1 个答案: