flex容器及其子项的缩放功能

来源：互联网发布：淘宝代运营被骗案判例编辑：程序博客网时间：2024/04/29 14:59

研究了半天终于研究出了flex下图片缩放功能的实现方法，并且能控制图片的位置。具体代码如下

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
   <mx:Script>
       <![CDATA[
                   import mx.effects.Zoom;

                   private var _zoom:Zoom;
                   private var _zWidth:Number = 1;
                   private var _zHeight:Number = 1;

                   private function init():void
                   {
                           _zoom = new Zoom;
                   }

           private function zoom():void
                   {
                                _zoom.stop();
                                _zoom.originX = img.width / 2;
                                _zoom.originY = img.height / 2;
                                _zoom.zoomWidthFrom = _zWidth;
                                _zoom.zoomHeightFrom = _zHeight;
                                _zoom.zoomWidthTo = hslider.value;
                                _zoom.zoomHeightTo = hslider.value;
                                _zoom.duration = 1000;
                                _zoom.target = img;
                                _zoom.play();
                                _zWidth = hslider.value;
                                _zHeight = hslider.value;
           }
       ]]>
   </mx:Script>

        <mx:HSlider id="hslider" x="260" y="30" minimum="0.1" maximum="3" value="1"
                liveDragging="true" change="zoom()" snapInterval="0.01"/>
        <mx:Canvas x="200" y="121" width="420" height="315" borderStyle="1">
                <mx:Image id="img" source="shequ.png" top="0" horizontalCenter="0"/>
        </mx:Canvas>
</mx:Application>

其中可以通过top、horizontalCenter和verticalCenter这三个样式来控制图片在容器中的位置，当top表示容器上边缘和

图片上边缘的垂直距离（以像素为单位），无论图片怎么放大或缩小，这个距离都不会改变，除非人为强迫修改；horizontalCenter

为表示图片的中心到容器中心的水平距离，无论verticalCenter表示图片的中心到容器中心的垂直距离，这两个样式的效果跟

top的效果类似，不过当这三个样式同时使用时，top不起任何作用。