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.
{ 6 comments… read them below or add one }
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 ;)