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

原创 2014年09月19日 13:42:21

先看效果



大概就是这种效果

功能:但鼠标点击的时候可以实现拖放(移动,拉伸,放大,缩小),本文是针对图片进行的,不需要调用地图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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Flex中的拖放(Drag-Drop)事件入门

对于一些控件如DataGrid,HorizontalList,List,Menu,PrintDataGrid,TileList,Tree等,我们可以通过设置控件属性dragEnabled,dropEn...

基于Flex 4.6实现 Picture Slide (图片滑动展示效果)

之前项目中有用到这种效果,图片幻灯显示,一般来说JS实现的较多,F

flex实现图片根据鼠标的滚动放大或缩小(以鼠标的的位置 为中心放大缩小)

第一步: var imageCanvas:ImageView = new ImageView();//创建ImageView对象 imageCanvas.img.source="tuzhi/1.jp...

FLEX实现鼠标滑过图片放大效果。

  • 2010年12月15日 08:54
  • 873KB
  • 下载

拖放事件原理及实现详解

  • 2016年07月18日 19:21
  • 15KB
  • 下载

flex 拖放的实现

用鼠标实现文件拖放.rar

  • 2010年07月01日 13:39
  • 36KB
  • 下载

VB 5.0中实现鼠标拖放...

  • 2009年10月08日 01:55
  • 2KB
  • 下载

拖放事件原理及实现详解

移动端现在正是发展高潮期,一说到移动端就会想到的前端技术就是H5啦,它就像一种时尚潮流,now是它的主场,就任性地带着移动端头也不回地走向最高峰~ 最近再写一个简单的图片拖拽上传,所以就给大家说下这个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex4.6实现图片放大缩小及鼠标拖放事件
举报原因:
原因补充:

(最多只允许输入30个字)