flex4.6实现图片放大缩小及鼠标拖放事件

先看效果

大概就是这种效果

功能：但鼠标点击的时候可以实现拖放（移动，拉伸，放大，缩小），本文是针对图片进行的，不需要调用地图API,我在学习这一块的时候找了好多博客，都没有示例代码，走了好多冤枉路，由此，下面是是我师傅实现的代码，在这里共享给大家，希望对大家有所帮助

代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
xmlns:mx="http://www.adobe.com/2006/mxml" 
xmlns:ns1="com.adobe.wheelerstreet.fig.panzoom.*"
creationComplete="{handleCreationComplete()}" width="600" height="425" top="15" left="13">
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;

import mx.controls.Alert;
import mx.events.FlexEvent;

[Bindable]
private var _imageURL:String = "/assets/images/cs6/earth-map_small.jpg";

private var isUpdate:Boolean=true;
private var _contextMenu:ContextMenu;
private var _contextMenuItems:Array = ["Zoom In Image","Zoom Out Image","Show All Image","Toggle Smooth Bitmap","View Source"];

public function handleCreationComplete():void {
// handle contenxt menu
_contextMenu = new ContextMenu();
_contextMenu.hideBuiltInItems();
for (var i:uint = 0; i<_contextMenuItems.length; i++) {
var menuItem:ContextMenuItem = new ContextMenuItem(_contextMenuItems[i]);
_contextMenu.customItems.push(menuItem);
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,handleContextMenu);
}
contextMenu = _contextMenu;
}

private function handleContextMenu(e:ContextMenuEvent):void {
switch(ContextMenuItem(e.currentTarget).caption){
case "Zoom In Image":
imageViewer.zoomByOrigin("in")
break;
case "Zoom Out Image":
imageViewer.zoomByOrigin("out")
break;
case "Show All Image":
imageViewer.centerView();
break;  
case "Toggle Smooth Bitmap":
if (imageViewer.smoothBitmap == true){
imageViewer.smoothBitmap = false;            
}else{
imageViewer.smoothBitmap = true;               
}
break;  
case "View Source":
var sourceURL:URLRequest = new URLRequest("srcview/index.html");
navigateToURL(sourceURL,"_blank");
break; 
}
}

public function changeImage(url:String):void
{
// TODO Auto-generated method stub
_imageURL=url;
imageViewer.centerView();
}
]]>
</mx:Script>

<mx:Style>
.ZoomInButton {
disabledSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="MinusButton_Disabled");
downSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="MinusButton_Down");
overSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="MinusButton_Over");
upSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="MinusButton_Up");
} 

.ZoomOutButton {
disabledSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="PlusButton_Disabled");
downSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="PlusButton_Down");
overSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="PlusButton_Over");
upSkin: Embed(source="/assets/images/icons/demoIcons.swf",symbol="PlusButton_Up");
} 

</mx:Style>
<!--ImageViewer -->
<ns1:ImageViewer 
id="imageViewer" 
imageURL="{ _imageURL }" 
bitmapScaleFactorMax="5"
bitmapScaleFactorMin=".05"
width="100%" height="100%"
x="0" y="0" creationComplete="imageViewer.centerView();"/>
<!--Navigation controlls -->
<mx:VBox right="20" top="10" width="20" horizontalAlign="center" verticalAlign="middle">
<mx:Spacer/>
<mx:Button styleName="ZoomOutButton" toolTip="放大" click="{imageViewer.zoom('in');}"/>
<mx:HBox x="10" width="20">
<mx:VSlider
minimum="{ imageViewer.bitmapScaleFactorMin }" 
maximum="{ imageViewer.bitmapScaleFactorMax }" 
value  ="{ imageViewer.bitmapScaleFactor }"
change ="{ imageViewer.setZoom(VSlider(event.currentTarget).value) }"
snapInterval=".001"
liveDragging="true" 
/> 
</mx:HBox>
<mx:Button styleName="ZoomInButton" toolTip="缩小" click="{ imageViewer.zoom('out'); }"/>
<mx:Spacer/>
</mx:VBox> 
</mx:Canvas>