flex4.6实现图片放大缩小及鼠标拖放事件
发布时间:2020-12-15 03:38:08 所属栏目:百科 来源:网络整理
导读:先看效果 大概就是这种效果 功能:但鼠标点击的时候可以实现拖放(移动,拉伸,放大,缩小),本文是针对图片进行的,不需要调用地图API,我在学习这一块的时候找了好多博客,都没有示例代码,走了好多冤枉路,由此,下面是是我师傅实现的代码,在这里共享给
先看效果 大概就是这种效果 功能:但鼠标点击的时候可以实现拖放(移动,拉伸,放大,缩小),本文是针对图片进行的,不需要调用地图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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |