Trying to draw a Rectangle to a Custom Container in Flex4/AS3

Question

So below is the code I have so far. For now I simply want to make it draw a square and have it show up. Right now when I click the area defined in MXML as <components:PaintArea width="100%" height="100%" id="paint-a"></PaintArea> it shows nothing; however, the actionlistener is getting triggered and an element is being added to the group. Not sure exactly what is going on... perhaps for some reason it doesn't think the element is drawable? Anyways thanks for the help!

public class PaintArea extends SkinnableContainer
{
    private var canvas:Group;

    public function PaintArea()
    {
        super();
        canvas = new Group();
        canvas.clipAndEnableScrolling = true;
        canvas.percentHeight = 100;
        canvas.percentWidth = 100;
        canvas.addEventListener(MouseEvent.MOUSE_UP,drawRectangle);
        this.addElement(canvas);
    }

    private function drawRectangle(e:MouseEvent):void{
        var r:Rect = new Rect();
        r.fill = new SolidColor(0x00ff00,.5);
        canvas.addElement(r);
    }
}

Answer 1

您可能应该设置矩形r的width和height 。

Answer 2

您还可以使用BorderContainer（ http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/spark/components/BorderContainer.html ）-它的SkinnableContainer具有可设置样式的边框和填充