in Actionscript 3

ActionScript 3 Wedge Drawing Class

Here is another class that I wrote thanks to this old tutorial. This is similar to the Arc class except that it draws wedges instead. These are great for doing lightweight charting stuff. You can get the code at my Google Code repository. The example below rapidly animates new wedge shapes creating a cool effect. You can click on the image below to check it out.

Below is the source code for the above example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import com.leebrimelow.drawing.*;
import com.leebrimelow.utils.*;

var bmd:BitmapData = new BitmapData(600, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

function createArc():void
{
    var sp:MovieClip = new MovieClip();
    sp.radius = Math2.random(20, 400);
    sp.endAngle = Math2.random(130, 400);
    sp.color = Math.random() * 0xFFFFFF;
    sp.count = 0;
    sp.filters = [new DropShadowFilter(10, 45, 0x000000, 0.5)];
    sp.addEventListener(Event.ENTER_FRAME, loop);
    addChild(sp);
}

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
    var sp:MovieClip = e.target as MovieClip;
    sp.graphics.clear();
    sp.graphics.beginFill(sp.color);
    sp.graphics.lineStyle(5, 0x000000);
    Wedge.draw(sp, 300, 200, sp.radius, sp.count, 0);
    sp.count += 20;
    if(sp.count > sp.endAngle)
    {
        sp.removeEventListener(Event.ENTER_FRAME, loop);
        bmd.draw(sp);
        removeChild(sp);
            sp = null;
        createArc();
    }
}

createArc();

Lee

Write a Comment

Comment

37 Comments

  1. Why is it that ALWAYS when you ask a question, the answer becomes to you? The Wedge is another ClassName for you Arc class. So just rename it to Arc so it can acces the draw dunction in Arc.as

    sorry ;)

  2. @Matt – That’s because it draws the wedge in increments of 20 degrees, and since 90 and 270 are not evenly divisible by 20 you can’t get either angle, you can change the 20 degree draw to 15 if you want it to draw those two angles.

  3. Thanks Ryan. Another thing I noticed is that if the startAngle parameter is changed in the draw method do say, 90, the wedge draws incorrectly. Let’s say I have 4 segments each at 90 degrees. I would then want segment 2’s startAngle the be segment 1’s endAngle, and so on. I am currently working on finding a solution to this…

  4. Here’s a Degrafa example for a wedge

    var solidStroke:SolidStroke = new SolidStroke();
    solidStroke.color = 0xFFFFFF;
    solidStroke.weight = 3;
    solidStroke.alpha = 1;

    var solidFill:SolidFill = new SolidFill();
    solidFill.color = 0xFF0000;

    var ellipticalArc:EllipticalArc = new EllipticalArc( 0, 0, 100, 100, 0, 270, “pie” );
    ellipticalArc.stroke = solidStroke;
    ellipticalArc.fill = solidFill;
    ellipticalArc.draw( graphics, null );

  5. has anyone been able to get the start angle to work? I want to make radial chart using these wedges but unless my start angle is 0 or 180 the thing goes crazy. I have only been working flash for a few days so I can’t figure out what is wrong in the code myself yet. Any help would be greatly appreciated.

  6. I figured out a workaround where to create each wedge I make a second white wedge to cover up the unwanted portion, not too much more work but that seems to be the only way I can get it to do what I need.

  7. This works perfectly:

    function drawWedge(mc,x,y,radius, bA,eA) {

    var degToRad = Math.PI/180;

    if (eA < bA) eA += 360;

    var r = radius;

    var n= Math.ceil((eA-bA)/45);

    var theta = ((eA-bA)/n)*degToRad;
    var cr = radius/Math.cos(theta/2);
    var angle = bA*degToRad;
    var cangle = angle-theta/2;

    mc.graphics.moveTo(x, y);
    mc.graphics.lineTo(x+r*Math.cos(angle), y+r*Math.sin(angle));
    for (var i=0;i < n;i++) {
    angle += theta;
    cangle += theta;
    var endX = r*Math.cos (angle);
    var endY = r*Math.sin (angle);
    var cX = cr*Math.cos (cangle);
    var cY = cr*Math.sin (cangle);
    mc.graphics.curveTo(x+cX,y+cY, x+endX,y+endY);
    }

    mc.graphics.lineTo(x, y);
    }

  8. I doctored this class so it can also draw thick arcs. The start angle can also be anything you like and still draw properly. If anyone is interested, let me know.

  9. Hi Brian,

    Can you let me know how to grab the code via SVN or do you have the updated URL to download the Arc.as class.

    Thanks

  10. Do not use the code from Lee’s wedge drawing class. The start angle has to be 90. Instead use the code that jm has posted here on September 25th, 2008. It works perfectly. You just have to add the type to each variable (mc is a Sprite and the rest are numbers). I’m not sure why he left it out (maybe it’s AS2 code?)

  11. where do i get the Arc.as class and packages
    com.leebrimelow.drawing.*;
    com.leebrimelow.utils.*;

    I am unable to compile this code. Please help