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

November 24, 2014 at 11:21 am |

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.

November 24, 2014 at 4:25 pm |

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!