加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读