Flex 4 / AS3 addchild问题中的图形绘制

Question

I am simply trying to draw a rectangle inside of a panel using flex4. I am using spark instead of mx. It complains about addchild being replaced by addelement; however, addelement expects type ivisualcomponent. I think sprite should be of that type; however, it reports an error when trying to use the below code... I have tried a few different ways. I think I am missing something very basic about flex 4. Any enlightenment would be much appreciated! :-D

private function drawRectangle(e:MouseEvent):void{
    var s:Sprite = new Sprite();
    s.graphics.beginFill(0x00ff00, 0.5);
    s.graphics.drawRect(e.localX,e.localY,50,50);
    s.graphics.endFill();
    canvas.addChild(s);
}

Answer 1

Sprite doesn't implement IVisualComponent. (Check the docs: http://www.eonflex.com/flex/4.1/langref/flash/display/Sprite.html )

You need to add a UIComponent to hold the sprite. Something like:

private function drawRectangle(e:MouseEvent) : void {
    var s:Sprite = new Sprite();
    var c:UIComponent = new UIComponent();

    c.addChild(s);
    canvas.addChild(c);
}

Answer 2

Yes we can make it using MXML Syntax also. But in AS3, you need to use SpriteVisualElement class.

var sp:SpriteVisualElement = new SpriteVisualElement();
this.addElement(sp);
sp.graphics.beginFill(0x00ff00,1);
sp.graphics.drawRoundRect(10,10,100,100,150,150);
sp.graphics.endFill();

It will work.

Answer 3

Note that you can also do this with MXML graphics:

<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GraphicCompMainMXML.mxml -->
<s:Application backgroundColor="0xFFFFFF"      
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:Graphic>    
         <s:Rect id="rect1" width="200" height="200">
              <s:fill>
                 <s:SolidColor color="0xFFFFCC"/>
              </s:fill>
              <s:stroke>
                 <s:SolidColorStroke color="0x660099" weight="2"/>
              </s:stroke>
         </s:Rect>
    </s:Graphic>
</s:Application>