2 Replies Latest reply on Jun 7, 2007 2:24 PM by pythonluv

    Drawing Basic Shape

    pythonluv
      Hi,

      I am bit of new to flex and wondered how you create basic shape in the flex
      for example, I would like to draw shape such as circle, rectanges, and lines in the flex application.

      For example,
      <mx:application>
      <myComponent:myCircle x="3" y="3" r="3">
      </mx:application>

      I was looking at the actionscript 3 and there was a flash.Shape which allows you to draw circle.
      Somehow, It wasn't working since I didn't implement IUIComponent.

      Should I always use IUIComponent to draw such a basic Shape as line, rectangle, circle ?
      or is there any easier way to create component ?
      or is there any mx compoenent to allow draw those basic shapes?

      Any tip would be appreciated !


      thanks
        • 1. Re: Drawing Basic Shape
          peterent Level 2
          I'll try not to make this complex. Every visual object has a property called 'graphics' which is a flash.display.Graphcs type. For example:

          File: RedCanvas.mxml:

          <mx:Canvas width="100" height="100" xmlns:mx="....">
          <mx:Script><![CDATA[
          override protected function updateDisplayList( w:Number, h:Number ) : void
          {
          graphics.clear(); // erase
          graphics.beginFill( 0xff0000, 1 ); // solid red
          graphics.drawEllipse( 0, 0, w, h );
          graphics.endFill();
          }
          ]]>
          </mx:Canvas>

          If you were to use that file as a component in your application you'd see a red circle. This is pretty much the base-level in terms of where to draw. As you use Flex more you'll see the Shape class, Sprites, and so forth. These are actually Flash classes intrinsic to the Flash Player (anything in the flash.* packages). For example, if you want layers of things you might create Shapes, draw into those (using their graphics properties) and add them as children of some other container.

          Check out the flash.display.* package classes.
          • 2. Re: Drawing Basic Shape
            pythonluv Level 1
            Thanks a lot! great help