8 Replies Latest reply on Feb 7, 2008 4:43 PM by nephish

    how to dray circle newbie

    nephish
      Greetings there all,
      i am brand new to flash and flex programming, and just started going through some tutorials for flex buillder 2 .
      What i cannot seem to find is any tutorials on how to draw shapes. I need to be able to draw a circle, and modify how the circle appears ( size, color, position, etc.. ) based on data that i will pass to it.
      So, do i need to install extra components? Or can i do all of this from what is existant in the flex builder 2?
      And, if anyone has some link to some how-to sites that cover this sort of thing, i would much appreciate it.
      thanks.
        • 1. Re: how to dray circle newbie
          peterent Level 2
          Keep this in mind: FLEX is the MXML files and ActionScript classes in the mx.* packages while FLASH is the runtime environment. The Flex compiler produces Flash code in the form of a SWF. I think it is important for you to understand what's going on so it makes more sense.

          Flex has no drawing functions - drawing is purely a Flash feature. Nearly every Flex control and container is capable of displaying Flash graphics - that's really what you see when you look at Flex buttons, links, and so forth.

          To draw a circle in the Flex application you need to access the Flash Graphics object of the control or container. Let's say you'd like to draw your circle in a Flex Canvas:

          <mx:Canvas xmlns:mx="...">
          <mx:Script><![CDATA[
          override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ) : void
          {
          super.updateDisplayList( unscaledWidth, unscaledHeight );

          // always clear the graphics before drawing into it
          graphics.clear();

          // set your line style if you want the circle to have a border:
          graphics.lineStyle( thickness, color, alpha ); // eg: (1, 0xff0000, 1 ); - a red line

          // set your fill.
          graphics.beginFill( color, alpha ); // eg (0x00ff00, 0.5); - a translucent green

          // draw your circle
          graphics.drawCircle( unscaledWidth/2, unscaledHeight/2, 100 ); // center circle with radius 100

          // always end the fill
          graphics.endFill();
          } // end of updateDisplayList
          ]]></mx:Script>
          </mx:Canvas>

          You should do your drawing in a Flex control/container by overriding updateDisplayList. This function is called automatically by the Flex framework whenever the component needs to refresh its graphics.

          When you use a container's graphics to do your drawing it will always fall below any children components. For example, if you add a <mx:Label> to this canvas the circle will be below that.

          You can learn more about drawing in Flash by looking at the documentation for the flash.display package.

          HTH
          • 2. Re: how to dray circle newbie
            nephish Level 1
            Peter,
            Thanks very much for the steps in the right direction.
            I appreciate it very much.
            Shawn
            • 3. Re: how to dray circle newbie
              gary_a_mason
              I too am new to all this, and have been fighting with the same issue.
              When I tried this code, the circle drew itself in the top left of the web browser (just a quarter circle centred at 0,0)
              and not in the Canvas.
              Any suggestions as to what could be wrong ?
              thx in advance.
              • 4. Re: how to dray circle newbie
                peterent Level 2
                From your description it sounds like the Canvas is at (0,0) - the graphics should be relative to the canvas.
                • 5. Re: how to dray circle newbie
                  gary_a_mason Level 1
                  Thank you for your reply. I'm afraid I have changed the code so much in the interim trying to get something to work, that I have lost the code that was almost working. So I've started over with the code provided earlier in the thread.
                  I am totally unable to draw anything in the canvas, and was hoping I might be able to post my code and perhaps get some feedback on it. Any assistance gratefully appreciated.
                  This is my whole mxml file (I know it says use &quot;attach code&quot; but I can't find that feature):
                  ------------------------------------------------------
                  &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
                  &lt;mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml&quot; layout=&quot;absolute&quot; width=&quot;693&quot;&gt;

                  &lt;mx:Canvas x=&quot;99&quot; y=&quot;41&quot; width=&quot;311&quot; height=&quot;310&quot; id=&quot;Can&quot; label=&quot;Can&quot; visible=&quot;true&quot; enabled=&quot;true&quot; borderColor=&quot;#008000&quot; backgroundColor=&quot;#000080&quot;&gt;
                  &lt;mx:Script&gt;&lt;![CDATA[
                  override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ) : void
                  {
                  super.updateDisplayList( unscaledWidth, unscaledHeight );
                  graphics.clear();
                  graphics.lineStyle( 1, 0xff0000, 1 );
                  graphics.beginFill( 0x00ff00, 0.5 );
                  graphics.drawCircle( unscaledWidth/2, unscaledHeight/2, 10 );
                  graphics.endFill();
                  }
                  ]]&gt;&lt;/mx:Script&gt;
                  &lt;/mx:Canvas&gt;
                  &lt;/mx:Application&gt;
                  • 6. Re: how to dray circle newbie
                    peterent Level 2
                    As you can see there's something messed up with pasting in code (we're looking into it). From what I can tell you have a single file with Application as the root tag and a Canvas child. When you override updateDisplayList it override the function for the root tag - Application. In order to do this for a Canvas, you must create a new MXML file using Canvas as the root tag, including the Script block with the override of updateDisplayList in it, then put that component into the main Application file in place of the Canvas.
                    • 7. Re: how to dray circle newbie
                      gary_a_mason Level 1
                      Many thanks... that worked like a charm !
                      • 8. Re: how to dray circle newbie
                        nephish Level 1
                        you know whats funny, is my typo,
                        As the op, i meant to put how to DRAW a circle, not DRAY.
                        silly typo comes at me with every response since i am subscribed to this thread
                        he he