CODEWITHSUNDEEP
actionscript-3flashdynamiccolorsshapes
user3351024
user3351024

Reputation: 5

Drawing dynamic figure, then filling it with color (AS3)

I wanted to make a piechart using ONLY Flash AS3. I made a code that draws segmented circles, so I could use these to indicate the different parts.

MY PROBLEM: I do have the code to create as many pies as I want to, but I need a code to fill color into the different segments. (make segment 1 blue, segment 2 red, etc.)

my code follows:

/**
 * Draw a segment of a circle
 * @param target    <Sprite> The object we want to draw into
 * @param x         <Number> The x-coordinate of the origin of the segment
 * @param y         <Number> The y-coordinate of the origin of the segment
 * @param r         <Number> The radius of the segment
 * @param aStart    <Number> The starting angle (degrees) of the segment (0 = East)
 * @param aEnd      <Number> The ending angle (degrees) of the segment (0 = East)
 * @param step      <Number=1> The number of degrees between each point on the segment's circumference
 */
function drawSegment(target:Sprite, x:Number, y:Number, r:Number, aStart:Number, aEnd:Number, step:Number = 1):void {
        // More efficient to work in radians
        var degreesPerRadian:Number = Math.PI / 180;
        aStart *= degreesPerRadian;
        aEnd *= degreesPerRadian;
        step *= degreesPerRadian;

        // Draw the segment
        target.graphics.moveTo(x, y);
        for (var theta:Number = aStart; theta < aEnd; theta += Math.min(step, aEnd - theta)) {
            target.graphics.lineTo(x + r * Math.cos(theta), y + r * Math.sin(theta));
        }
        target.graphics.lineTo(x + r * Math.cos(aEnd), y + r * Math.sin(aEnd));
        target.graphics.lineTo(x, y);
};

graphics.lineStyle(2,0x000000)
drawSegment(this,100,100,100,0,130,3);
drawSegment(this,100,100,100,130,200,3);
drawSegment(this,100,100,100,200,360,3);

Upvotes: 0

Views: 574

Answers (1)

Vesper
Vesper

Reputation: 18747

It's pretty easy. You add beginFill() and endFill() calls to your drawSegment function using provided colors. Add a parameter for that, of course.

function drawSegment(target:Sprite, x:Number, y:Number, r:Number, aStart:Number, aEnd:Number, color:uint=0x0, step:Number = 1):void {
        // More efficient to work in radians
        var degreesPerRadian:Number = Math.PI / 180;
        aStart *= degreesPerRadian;
        aEnd *= degreesPerRadian;
        step *= degreesPerRadian;

        // Draw the segment
        target.graphics.beginFill(color,1); // second parameter is alpha
        target.graphics.moveTo(x, y);
        for (var theta:Number = aStart; theta < aEnd; theta += Math.min(step, aEnd - theta)) {
            target.graphics.lineTo(x + r * Math.cos(theta), y + r * Math.sin(theta));
        }
        target.graphics.lineTo(x + r * Math.cos(aEnd), y + r * Math.sin(aEnd));
        target.graphics.lineTo(x, y);
        target.graphics.endFill();
};

In fact, you should eventually make a "PieChart" class out of this function, so that it'll have a common center position, radius, elliptic properties, line style, and also its own Shape to draw on, instead of using a function to draw somewhere somehow. Say public class PieChart extends Sprite {...} and draw on this.graphics.

Upvotes: 1

Related Questions