首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

flex 图片自动适应大小

作者:  时间: 2011-06-11

<!-- http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/ -->
<mx:Application name="FullScreen_test" xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout
="absolute" applicationComplete="app(event)"  width="800" height="500">
    
<mx:Script>
    
<![CDATA[
            import mx.controls.Alert;
            import mx.events.EffectEvent;
            import mx.events.FlexEvent;
            
            
            protected function app(event:FlexEvent):void
            {
                img.source="3.jpg";
                img.addEventListener(Event.COMPLETE, imgLoadFinish);
            }
            private function imgLoadFinish(evt:Event):void
            {
                //原始图片的大小
                var real_width:Number = img.contentWidth;
                var real_height:Number = img.contentHeight;
                //容器的大小
                var flashWidth:Number = this.width;
                var flashHeight:Number = this.height;
                //比值
                var w_bi:Number = real_width/width;
                var h_bi:Number = real_height/height;
               
                if(w_bi < 1 && h_bi <1)
                {
                    img.width = img.content.width;
                    img.height = img.content.height;
                }
                else
                {
                    if(w_bi > h_bi)
                    {
                        img.width = flashWidth;
                        img.height = real_height * flashWidth / real_width;
                    }
                    else
                    {
                        img.height = flashHeight;
                        img.width = real_width * flashHeight / real_height;
                    }
                }
                img.x = (flashWidth - img.width) / 2;
                img.y = (flashHeight - img.height) / 2;
            }
        
]]>
    
</mx:Script>
    
<mx:Canvas x="0" y="0" width="100%" height="100%" id="divMain" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
        
<mx:Image id="img" />
    
</mx:Canvas>
</mx:Application>