Scaling a UIComponent is not scaling its children

I'm building a Flex application that creates neat vector images based on some options/filters. Relatively new to Flash/Flex/AS3, so I'm learning as I go..

In short:

// I create a new UICo开发者_开发技巧mponent
var myuic:UIComponent = new UIComponent();

// I then draw some vector graphics to it.. 
myuic_prev.graphics.beginFill(fgRGB, 1);
myuic_prev.graphics.drawRect(xptr, yptr, pxls, pxls);
myuic_prev.graphics.beginFill(fgRGB, 1);
myuic_prev.graphics.drawCircle(cx,cy,cr);
myuic.graphics.beginFill(fgRGB, 1);
myuic.graphics.drawCircle(cx,cy,cr);
myuic_prev.graphics.endFill();

For various reasons, the resulting image that gets produced may or may not fit in my Canvas or Display container, in this case a VBOX that has a fixed width. In this case I have need to scale the resulting UIComponent image.

I read in the Adobe documentation that adjusting the scale of a UIComponent will appropriately scale its children. In fact I see lots of threads about how to prevent this.

So I tried that... simply:

// Scale my UIC by changing the width
myuic_prev.width = 520;     
// Now make the two scale factors the same, this keeps proportions.
myuic_prev.scaleY = mxuic_prev.scaleX;

What I find is that this seems to scale the UIComponent itself, but NOT the children, or the shapes I drew into it. The shapes now are out-of-bounds, or clipped running off the page.

What am I not understanding? Are these shapes not being treated as children? Or how do I make this work. Thanks!

The width property for UIComponent works in a different way of its parent class Sprite because Flex components have a different resizing logic. In example modifing width or height do not affects the graphics layer. If you want to scale your UIComponent and the graphics layer try to use directly the scaleX and scaleY properties.

Try this in example (if you want to scale by width to 520 and keep the aspect ratio):

component.scaleX = component.scaleY = 520 / component.width;