Question

I need to draw concentric circles in my Flex application. I am trying to do this using graphics util. The problem im facing is centering the two circles. Any one has a suggestion or know how to go about this? please help.

Thanks

Anji

Answer 1

Use Graphics.drawCircle() method (documentation) where you should pass the same center points (two starting parameters).

To fill circles with different colors use the following code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
    <![CDATA[
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);

            var centerX:Number = unscaledWidth / 2;
            var centerY:Number = unscaledHeight / 2;

            var g:Graphics = circleHolder.graphics;
            g.clear();
            g.beginFill(0xFF00FF);
            g.drawCircle(centerX, centerY, 300);
            g.endFill();
            g.beginFill(0x0000FF);
            g.drawCircle(centerX, centerY, 200);
            g.endFill();
            g.beginFill(0x000000);
            g.drawCircle(centerX, centerY, 100);
            g.endFill();
        }
    ]]>
    </fx:Script>
    <mx:UIComponent left="0" right="0" top="0" bottom="0" id="circleHolder" />
</s:Application>