自動(dòng)居中的Flex圖像控件

1、自動(dòng)居中的Flex圖像控件 來自：自動(dòng)居中的Flex圖像控件以前用A實(shí)現(xiàn)過一個(gè)居中的圖像控件，無非是用把 < img > 包起來，然后在后臺(tái)計(jì)算出 < img > 的 padding 值?，F(xiàn)在使用 Flex 又遇到了圖像居中顯示著一個(gè)問題， Flex Builder 3 自帶的圖像控件似乎仍然沒有這特征，所以還是自己寫一個(gè)吧。當(dāng)然了，老是寫這類東西，實(shí)在沒什么新鮮感，為此我深深地苦惱。 在Flex Builder中的Canvas控件跟Html的<Div>作用幾乎類似，都是一個(gè)容器，所以本次控件的實(shí)現(xiàn)仍然如此：即用<mx:canvas>控件包上&l

2、t;mx:image>控件，然后根據(jù)<mx:image>的圖片的具體大小設(shè)置圖像控件的偏移量。這里需要說明一點(diǎn)是，用Flex寫的頁面與Html頁面相比，F(xiàn)lex更像是一個(gè)本地的應(yīng)用程序，所以設(shè)計(jì)時(shí)不能用寫網(wǎng)頁的思路，比如：在<mx:canvas>容器中，image控件可以直接用坐標(biāo)x,y來定位，而Html卻需要用padding值；在網(wǎng)頁的程序里，得到圖片的真實(shí)大小，必須把圖片下載到服務(wù)器，然后用Bitmap對(duì)象讀取圖片的大小(如果是讀取同一網(wǎng)站的圖片，則不必下載，而Flex程序讀圖片的大小只需要從image控件的contentHeight及contentWidth

3、兩個(gè)屬性讀取就行了，閑話休提，先看一下效果：可以下載到本地查看：SWF文件(下載后請(qǐng)把后綴名改為swf，因?yàn)槲业目臻g不讓上傳swf類型的，真變態(tài)其實(shí)真正實(shí)現(xiàn)縮放的代碼很短，代碼中包含了注釋，就不過多解釋了：        /計(jì)算圖片框的大小        public function caculate_size(:void        

4、;            _x = 0;            _y = 0;            _width = 0;    

5、0;       _height = 0;                        /原始圖片的大小            var r

6、eal_width:Number = _image.contentWidth;            var real_height:Number = _image.contentHeight;                   

7、0;    /容器的大小            var width:Number = this.width;            var height:Number = this.height;     &#

8、160;                  /計(jì)算圖片長寬與容器長寬的比值，縮放時(shí)按照大的縮放            var w_percent:Number = real_width/width;      

9、      var h_percent:Number = real_height/height;                        if (w_percent < 1 && h_perc

10、ent < 1 && !AutoZoomIn                             /當(dāng)真實(shí)圖片比容器小時(shí)，而且自動(dòng)方法屬性沒有被設(shè)置時(shí)，則只是居中       

11、;         _width = real_width;                _height = real_height;              

12、60; _x = (width - _width/2;                _y = (height - _height/2;                  

13、;                      else                           &

14、#160;/實(shí)際圖片的長寬只要有一個(gè)比容器大，則按比例縮小                if (w_percent > h_percent                      

15、              _width = this.width;                    _height = real_height / w_percent;  

16、                  _x = 0;                    _y = (height - _height / 

17、2;                                else                 

18、                   _height = this.height;                    _width = real_width 

19、;/ h_percent;                    _y = 0;                    _x = (width

20、0;- _width /2;                                        /*/* 調(diào)試信息   

21、0;        Alert.show("source=" + _image.source +            "n_x="+_x.toString(+"n_y="+_y.toString(+         &

22、#160;   "n_width="+_width.toString(+"n_height="+_height.toString( +             "nreal_width="+real_width.toString(+"nreal_height="+real_height.toString(+            "nwidth="+width.toString(+"nheight="+height.to