Drawing in Flex

Question

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

Answer 1

Hi,
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">
<mx:Script>
<![CDATA[
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.clear();
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);
g.endFill();
]]>
</mx:Script>
</mx:Image>