PDA

View Full Version : how to draw a rectangle in flex 3?


rodrigoalex
07-13-2009, 04:10 PM
Hello everybody,
What has any example of how to draw a rectangle within a Canvas, position in certain position, and to fill?

Peter Cowling
07-13-2009, 04:31 PM
I would probably seek out the Flex 4/Gumbo 'Rect' from the sdk, and use that. Or use either of these:


package com.qs.graphics
{
import mx.core.UIComponent;
import mx.graphics.IFill;
import mx.graphics.IStroke;
import flash.geom.Rectangle;

[Style(name="fill", type="mx.graphics.IFill", inherit="no")]
[Style(name="stroke", type="mx.graphics.IStroke", inherit="no")]
public class Box extends UIComponent
{
private static var rc:Rectangle = new Rectangle();
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var f:IFill = getStyle("fill");
var s:IStroke = getStyle("stroke");
var o:Number = 0;

graphics.clear();

if(s != null)
{
o = s.weight/2;
unscaledHeight -=s.weight;
unscaledWidth -= s.weight;
s.apply(graphics);
}
else
graphics.lineStyle(0,0,0);

if(f != null)
{
rc.left = rc.right = o;
rc.width = unscaledWidth;
rc.height = unscaledHeight;
f.begin(graphics,rc);
}
graphics.drawRect(o,o,unscaledWidth,unscaledHeight );
if(f != null)
{
f.end(graphics);
}


}
}
}


Or with rounded corners:


package com.qs.graphics
{
import mx.core.UIComponent;
import mx.graphics.IFill;
import mx.graphics.IStroke;
import flash.geom.Rectangle;

[Style(name="fill", type="mx.graphics.IFill", inherit="no")]
[Style(name="stroke", type="mx.graphics.IStroke", inherit="no")]
[Style(name="cornerRadius", type="Number", inherit="no")]
[Style(name="cornerRadiusTopLeft", type="Number", inherit="no")]
[Style(name="cornerRadiusTopRight", type="Number", inherit="no")]
[Style(name="cornerRadiusBottomLeft", type="Number", inherit="no")]
[Style(name="cornerRadiusBottomRight", type="Number", inherit="no")]

public class RoundedBox extends UIComponent
{
private static var rc:Rectangle = new Rectangle();
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var f:IFill = getStyle("fill");
var s:IStroke = getStyle("stroke");
var o:Number = 0;
var cornerRadius:Number = getStyle("cornerRadius");
var cTL:Number = getStyle("cornerRadiusTopLeft");
var cTR:Number = getStyle("cornerRadiusTopRight");
var cBL:Number = getStyle("cornerRadiusBottomLeft");
var cBR:Number = getStyle("cornerRadiusBottomRight");

graphics.clear();

if(isNaN(cornerRadius))
cornerRadius = 0;
if(isNaN(cTL))
cTL = cornerRadius;
if(isNaN(cTR))
cTR= cornerRadius;
if(isNaN(cBL))
cBL = cornerRadius;
if(isNaN(cBR))
cBR = cornerRadius;



if(s != null)
{
o = s.weight/2;
unscaledHeight -=s.weight;
unscaledWidth -= s.weight;
s.apply(graphics);
}
else
graphics.lineStyle(0,0,0);

if(f != null)
{
rc.left = rc.right = o;
rc.width = unscaledWidth;
rc.height = unscaledHeight;
f.begin(graphics,rc);
}
graphics.drawRoundRectComplex(o,o,unscaledWidth,un scaledHeight,
cTL,cTR,cBL,cBR);
if(f != null)
{
f.end(graphics);
}


}
}
}


These versions should be similar, because they were by Ely Greenfield way back in 2006 or 07.

rodrigoalex
07-13-2009, 09:38 PM
Thank you friend, but just another way of solving simple ... I will save your script if you need in the future ...

sydd_hu
07-14-2009, 08:45 PM
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="800" frameRate="25"
creationComplete="init()">
<mx:Script> <![CDATA[
private function init():void{
myCanvas.graphics.beginFill(0xff00ff)
myCanvas.graphics.drawRect(10,20,230,500)
}

]]> </mx:Script>
<mx:Canvas id="myCanvas"/>
</mx:Application>