开发者

Scaling and resizing flex component

开发者 https://www.devze.com 2023-02-20 13:24 出处:网络
I have custom flex component inherited from UIComponent (compiled, no source code access). It has fixed width-to-height proportions and it\'s scalable. If I set its width and height to 100%, it\'s try

I have custom flex component inherited from UIComponent (compiled, no source code access). It has fixed width-to-height proportions and it's scalable. If I set its width and height to 100%, it's trying to fit parent's size, but it keeps width-to-height proportion, so if it's proportion does not equal parent's proportion, there can appear empty space near this component when resizing parent.

Scaling and resizing flex component

What I need, is to fit my component completely to parent's size. Is there any nice way to do this? I could listen to parent's resize even开发者_JAVA技巧t, and play with component's scaleX and scaleY, but may be any better way exists to solve my problem (any property?). Thanks.


A great way is to use greensock's AutoFitArea. Coding is as simple as the following

var area:AutoFitArea = new AutoFitArea(this, 50, 70, 300, 100);
area.attach(myImage, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});

which would constrain whatever is inside do the given dimensions (300,100) from there on out, you can just change the area's width and that will figure it all out for you.

hope it helps


Personally, what I would do is have the component within the parent set at width/height 100%, then within the component itself, override the updateDisplayList function (which returns the unscaled width/height) and then resize whatever children you're trying to display depending on the width/height of this container. Something like this:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    if(this._child!= null)
    {
        if(unscaledWidth > unscaledHeight)
        {
            this._child.height = unscaledHeight;
            this._child.scaleX = this._video.scaleY;
        }else{
            this._child.width = unscaledWidth;
            this._child.scaleY = this._video.scaleX;
        }
    }
}

Should do it.


Should the component keep its proportion? If not, you could just, as you said, listen to the resize event of the parent and set the width and height to the components values.

If the component should keep its proportion you could resize the background of your component so that it fits the parents size and resize the content of you component with its proportion seperatly.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号