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:VSliderminimum="{ 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>