研究了半天终于研究出了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不起任何作用。