3 Replies Latest reply on Nov 12, 2007 9:03 AM by Karl_Sigiscar_1971

    Drawing in Flex

    msabljic Level 1
      I would like to "draw" simple shape like rectangle over an loaded image inside Image component. I don't want to alter loaded image, just to draw a rectangle for example over it with possibility to later click and interact with it. I have no idea where to start since i have no experience with drawing in Flex. What would be the best way to do that? I would really appreciate it if somene can point me in right direction.

      thanks in advance
        • 1. Re: Drawing in Flex
          atta707 Level 2
          Image component get the method addChild thru DisplayObjectContainer class in it's hierarchy. So you'll:

          1) Extend UIComponent class
          2) Draw on it's graphics property
          3) Add it to the image
          4) Set the z-index if you need to.

          Peter Ent recently concluded a nice series of articles at:


          you might want to start from there.


          • 2. Re: Drawing in Flex
            msabljic Level 1
            Will try that, thanks for your help.

            best regards
            • 3. Re: Drawing in Flex
              Karl_Sigiscar_1971 Level 3


              The simplest is to create a custom MXML component and override the updateDisplayList() method within Script tags. Then you can use the ActionScript drawing API on the graphics object of the component to draw whatever you fancy programmatically:

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Image xmlns:mx=" http://www.adobe.com/2006/mxml">


              import flash.display.*;
              import flash.geom.*;
              import flash.utils.*;

              import mx.core.EdgeMetrics;
              import mx.utils.ColorUtil;
              import mx.utils.GraphicsUtil;

              public var _gradientFrom:int;
              public var _gradientTo:int;

              public function set gradientFrom(value:int):void
              this._gradientFrom = value;

              public function set gradientTo(value:int):void
              this._gradientTo = value;

              // ------------------------------------------------------------------------------------- //

              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              super.updateDisplayList(unscaledWidth, unscaledHeight);

              var g:Graphics = graphics;
              var b:EdgeMetrics = borderMetrics;
              var w:Number = unscaledWidth - b.left - b.right;
              var h:Number = unscaledHeight - b.top - b.bottom;
              var m:Matrix = verticalGradientMatrix(0, 0, w, h);

              g.beginGradientFill("linear", [_gradientFrom, _gradientTo], [1, 1], [0, 255], m);

              var cn:uint = this.getStyle("cornerRadius");
              GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, cn, cn, cn, cn);