Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rating: Thread Rating: 2 votes, 5.00 average. Display Modes
Old 07-13-2009, 04:10 PM   #1
rodrigoalex
New Member
 
Join Date: May 2009
Posts: 26
Default how to draw a rectangle in flex 3?

Hello everybody,
What has any example of how to draw a rectangle within a Canvas, position in certain position, and to fill?
rodrigoalex is offline   Reply With Quote
Old 07-13-2009, 04:31 PM   #2
Peter Cowling
quantum tunneler
 
Join Date: Sep 2008
Location: London, UK
Posts: 882
Default

I would probably seek out the Flex 4/Gumbo 'Rect' from the sdk, and use that. Or use either of these:

ActionScript Code:
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:

ActionScript Code:
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,unscaledHeight,                 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.

Last edited by Peter Cowling; 07-13-2009 at 04:32 PM. Reason: added: 'Or use either of these:'
Peter Cowling is offline   Reply With Quote
Old 07-13-2009, 09:38 PM   #3
rodrigoalex
New Member
 
Join Date: May 2009
Posts: 26
Default

Thank you friend, but just another way of solving simple ... I will save your script if you need in the future ...
rodrigoalex is offline   Reply With Quote
Old 07-14-2009, 08:45 PM   #4
sydd_hu
Senior Member
 
Join Date: Nov 2008
Posts: 100
Default

ActionScript Code:
<?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>
sydd_hu is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:28 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.