Flex Examples
The following example shows how you can draw complex rectangles using the drawRoundRectComplex() method in the mx.utils.GraphicsUtil class.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/16/drawing-complex-rectangles-in-flex-using-the-graphicsutil-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.utils.GraphicsUtil;
private var fillColor:uint;
private function init():void {
fillColor = StyleManager.getColorName("haloOrange");
box.graphics.clear();
box.graphics.beginFill(fillColor);
GraphicsUtil.drawRoundRectComplex(box.graphics,
0,
0,
box.width,
box.height,
topLeft.value,
topRight.value,
bottomLeft.value,
bottomRight.value);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="topLeft:">
<mx:HSlider id="topLeft"
minimum="0"
maximum="{box.height / 2}"
snapInterval="1"
tickInterval="10"
liveDragging="true"
change="init();" />
</mx:FormItem>
<mx:FormItem label="topRight:">
<mx:HSlider id="topRight"
minimum="0"
maximum="{box.height / 2}"
snapInterval="1"
tickInterval="10"
liveDragging="true"
change="init();" />
</mx:FormItem>
<mx:FormItem label="bottomLeft:">
<mx:HSlider id="bottomLeft"
minimum="0"
maximum="{box.height / 2}"
snapInterval="1"
tickInterval="10"
liveDragging="true"
change="init();" />
</mx:FormItem>
<mx:FormItem label="bottomRight:">
<mx:HSlider id="bottomRight"
minimum="0"
maximum="{box.height / 2}"
snapInterval="1"
tickInterval="10"
liveDragging="true"
change="init();" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Box id="box" width="240" height="160" />
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
hi peter,
I could not find any example of drawing API for creating basic shapes(e.g. Rectangle) with mouse!
Or at least can you suggest any site/blog where I can learn about it or see some example.
Thanks in advance :)
rconceiver
rconceiver,
It has a few [major] bugs, but this may get you started:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.containers.Canvas; private var x1:uint; private var y1:uint; private var x2:uint; private var y2:uint; private var isDrawing:Boolean = false; private function canvas_mouseDown(evt:MouseEvent):void { isDrawing = true; x1 = evt.localX; y1 = evt.localY; } private function canvas_mouseUp(evt:MouseEvent):void { isDrawing = false; x2 = evt.localX; y2 = evt.localY; var w:uint = x2 - x1; var h:uint = y2 - y1; var can:Box = evt.currentTarget as Box; can.graphics.beginFill(0xFF0000, 0.4); can.graphics.drawRect(x1, y1, w, h); can.graphics.endFill(); trace(x1, y1, x2, y2); } ]]> </mx:Script> <mx:Canvas id="canvas" backgroundColor="white" width="100%" height="100%"> <mx:Box id="box" width="100%" height="100%" mouseDown="canvas_mouseDown(event);" mouseUp="canvas_mouseUp(event);" /> </mx:Canvas> </mx:Application>Peter
Thanks Peter,
At least it has given me a start…
Thanks once again…:)
Hey Peter,
Thanks for giving this example of drawing rectangle using mouse….it helped me in learning drawing in my assignment….Thanks once again Peter for your great help….
thanx alot!!!! i implimented this feature in my project..
if you draw backwards (start right, drag to the left),
it creates something worse ;)