Drawing Circle Segment using Flex / AS3

I was working on an application which required to draw a circle using three different circular segment. First it seemed to be easy, but later found out that I needed to learn by trigonometry books again to achieve this. So here it is drawing a circle segment. You need to know the start point and end point of the arc, the center cordinates and the radius.

public function drawSegment(holder:Sprite,  startAngle:Number, endAngle:Number, segmentRadius:Number, xpos:Number, ypos:Number, step:Number, lineColor:Number, fillColor:Number):void {
     //holder-display object, xpos and ypos-center
     holder.graphics.lineStyle(2, lineColor);
     holder.graphics.beginFill(fillColor);

     //If we need to draw a segment from greater angle to smaller angle, split it at 360 degrees and draw two times
     var originalEnd:Number = -1;
     if(startAngle > endAngle){
          originalEnd = endAngle;
          endAngle = 360;
     }
     var degreesPerRadian:Number = Math.PI / 180;
     var theta:Number;
     startAngle *= degreesPerRadian;
     endAngle *= degreesPerRadian;
     step *= degreesPerRadian;

     // Draw the segment
     holder.graphics.moveTo(xpos, ypos);
     for (theta = startAngle; theta < endAngle; theta += Math.min(step, endAngle – theta)) {
          holder.graphics.lineTo(xpos + segmentRadius * Math.cos(theta), ypos + segmentRadius * Math.sin(theta));
     }
     holder.graphics.lineTo(xpos + segmentRadius * Math.cos(endAngle), ypos + segmentRadius * Math.sin(endAngle));

     if(originalEnd > -1){ // Start angle was greater than end angle and drawing the second segment
          startAngle = 0;
          endAngle = originalEnd * degreesPerRadian;
          for (theta = startAngle; theta < endAngle; theta += Math.min(step, endAngle – theta)) {
               holder.graphics.lineTo(xpos + segmentRadius * Math.cos(theta), ypos + segmentRadius * Math.sin(theta));
          }
          holder.graphics.lineTo(xpos + segmentRadius * Math.cos(endAngle), ypos + segmentRadius * Math.sin(endAngle));
     }
     holder.graphics.lineTo(xpos, ypos);
     holder.graphics.endFill();
     }

From the updateDisplayList method you can call the drawSegment method like this :

drawSegment(this, 270, 30, radius, uw/2, uh/2, 2, 0xEEEEEE, 0x003da8);

The idea is very simple. First draw line from the centre point to the starting point of the arc. Then keep on finding the next point in the circumference through which our arc will be passing. Then draw lines between these points until the end point is reached. After that draw the last line from the end point of the arc to the centre point.

The method considers horizontal point to the right side as angle 0. If we need to draw the line between say, angles 270 and 120, we will split this into two arcs. One from 270 to 360 and second from 0 to 120. We can tune it further to create simpler methods.

That’s it guys. Happy Coding. 🙂

Advertisements

Tags: , , , ,

2 Responses to “Drawing Circle Segment using Flex / AS3”

  1. Wilheim Says:

    Cheers! Just used this in a stopwatch project, worked a treat!

    One comment though: this code seems to result in an arc that goes anticlockwise. I ended up having to use a negative angle to get it looking like a clock.

    • Anoop Says:

      Thanks Wilheim, good to know that my code, which i did years before, come to use for someone. Yeah it gives an arc in anticlockwise, coz it was my requirment. Cheers! Happy Coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: