Drawing Graphics In Flex –

From last 2 days I was working on the flex drawing objects. I tried with following example from flex help.
import flash.display.*;
var circle:Shape = new Shape()
var xPos:Number = 100;
var yPos:Number = 100;
var radius:Number = 50;
circle.graphics.beginFill(0xFF8800);
circle.graphics.drawCircle(xPos, yPos, radius);
this.addChild(circle);

But there was a error pop up comes every-time –
“Type Coercion failed: cannot convert flash.display::Shape to mx.core.IUIComponent.”

Then I studied the sprite object, Sprite objects can act as display object containers and respond to mouse clicks. Then I tried flex help for sprite & I got this code –

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
var label:TextField = new TextField();
label.text = “hello”;
label.x = 20;
label.y = 20;
mySprite.addChild(label);
this.addChild(mySprite);

But it also gives me  “Type Coercion failed: cannot convert flash.display::Sprite to mx.core.IUIComponent.” error.
Then I searched on google & I got this code. Works fine & I can draw any object at run-time.

var myUIComponent:UIComponent = new UIComponent();
myUIComponent.graphics.beginFill(0xFFCC00);
myUIComponent.graphics.drawCircle(30, 30, 30);
var label:Label = new Label();
label.text = “hello”;
label.x = 20;
label.y = 20;
myUIComponent.addChild(label);
this.addChild(myUIComponent);

Here is the link for this page in google –
http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001855.html

Thank you,

Purva

17 thoughts on “Drawing Graphics In Flex –

  1. Saskovic

    Thanks!

    Interesting to read on the posted url, that the example they use is for actionscript only code. }:

    And that’s the same page I get when looking for help from the Flex Dev IDE.
    Would have been more logical to enter this information (for MXML pages) also in the help.

    But that’s why we’ve got the internet 😉 to search and search 😀

  2. Carpii

    You can also add Sprites directly to the Flex framework using conatiner.AddRawChild

    I was looking for a way to add lots of lines of chat text to a Canvas, I didnt want to use a RichEdit and adding Labels was too heavyweight (slow, memory hungry etc).

    The downside of adding sprites as raw children is that the Flex framework will not clip them, and acts as if it has no knowledge of them (ie they dont scroll etc).

    Probably your UIComponent idea is better in the long run, but I thought Id share this top too because it has taken me AGES to figure it out

    Carpii

  3. Thanks for posting this information. Like the others I was at this speed bump and now I’m driving along the highway again.

    In the interest of completeness, don’t forget to add the import statement for the UIComponent:

    import mx.core.UIComponent;

  4. jimmy

    Or you can just use a “canvas” object, that is a UI element and has all the drawing you could need!

  5. Pingback: drawing tips

Comments are closed.