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>


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

鼠标单击事件、滚轮事件,根据焦点缩放图片

var zoomLargeNum=110;//放大倍数 var zoomSmallNum=90; //缩小倍数 var zoomNum;         //中间变量 //鼠标滚轮滑动缩放图片 ...
  • wodehongseupan
  • wodehongseupan
  • 2013年03月16日 22:56
  • 830

PyQt5学习记录(7)---监听鼠标拖拽事件实现Mac上百度云盘拖拽效果

背景在Mac版的百度云盘上有这样一个效果,拖拽一个文件过来,将会显示边框蓝色非常醒目的提醒了操作者。本文介绍用PyQt5监听鼠标的拖拽事件,实现一个类似的效果,当拖拽时动态的改变整个界面边框颜色.下面...
  • yanzi1225627
  • yanzi1225627
  • 2017年08月06日 01:31
  • 1656

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

第一步: var imageCanvas:ImageView = new ImageView();//创建ImageView对象 imageCanvas.img.source="tuzhi/1.jp...
  • xuhong964388535
  • xuhong964388535
  • 2015年05月06日 10:30
  • 1172

c# 实现Picturebox的鼠标拖拽功能

工作需要,要在一个Form里面实现一个实时预览的picturebox图像,由于picturebox可能会遮挡到其后面的画面,所以要求picturebox可以由用户自行拖拽,类似于悬浮框。原理说明在网上...
  • dreamdonghui
  • dreamdonghui
  • 2017年08月04日 15:31
  • 449

winform 以光标指向点为中心 通过鼠标滚轮对图片进行缩放

最近一个项目需要涉及到图片的全屏显示以及缩放拖动功能,其中缩放实现需要考虑的一点就是为了有更好的用户体验,需要在缩放的时候以光标所处位置为参考点,进行缩放操作,简单来说就是,缩放前后光标在图片上所处的...
  • qq_22441525
  • qq_22441525
  • 2016年08月18日 14:22
  • 1422

实现图片放大缩小,点击热点响应事件

最近实现一个功能,类似百度地图。条件:一张图片。要求图片可以任意放大缩小移动,点击放缩后图片的热点时弹出popwindow,并且给热点区域添加阴影,显示出热点区。 实现思路: 1.先要实现图片的任意放...
  • u013061822
  • u013061822
  • 2015年08月18日 15:21
  • 1712

HTML5拖放事件

拖放是在“拖放源”和“拖放目标”之间传输数据的用户界面,它可以存在相同应用之间也可以是不同应用之间。 拖放源:任何有HTML draggable属性的文档元素都是拖放源。 拖放目标:任何文档都可以是...
  • u012729094
  • u012729094
  • 2016年05月05日 14:28
  • 1648

H5 拖放事件详解

H5 拖放事件详解 拖放事件 H5的拖放事件提供了多个接口: 1、drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2、dragend:当拖动操作结束时触发...
  • ComeOnZhao
  • ComeOnZhao
  • 2017年04月26日 22:47
  • 670

MFC 实现图片的拖拽功能,代码很详细,贴过去就能用!

拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道。纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致。其实说起来拖动的实现也很简单,对于有句柄...
  • max900428
  • max900428
  • 2014年04月14日 00:17
  • 3711

js鼠标滚轮放大缩小图片

s鼠标滚轮放大缩小图片
  • wu7zhi
  • wu7zhi
  • 2016年04月18日 10:22
  • 1139
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex4.6实现图片放大缩小及鼠标拖放事件
举报原因:
原因补充:

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