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. 
Tags: actionscript, arc, circle, circle segment, flex
