flex day 5 air的drag和drop

最新推荐文章于 2020-11-14 16:57:50 发布

最新推荐文章于 2020-11-14 16:57:50 发布 · 290 阅读

文章标签：

#flex #air

flex air 专栏收录该内容

11 篇文章

订阅专栏

本文介绍Adobe AIR应用程序中实现文件拖放功能的方法，包括如何利用剪切板对象处理不同类型的数据，如图片和文本文件，并展示了具体的事件处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

air里面的drag和drop和web里面的应用不太相同。看了一下，其实相当于去读取剪切板。

首先，需要创建一个clipborad的对象，通过剪切板传输数据和对象，包含了几个标准的格式，

BITMAP_FORMAT：一个 BitmapData 对象（仅限 AIR）
FILE_LIST_FORMAT：File 对象的数组（仅限 AIR）
HTML_FORMAT：HTML 格式的字符串数据
TEXT_FORMAT：字符串数据
RICH_TEXT_FORMAT：包含 RTF 格式数据的 ByteArray
URL_FORMAT：URL 字符串（仅限 AIR）

主要使用的方法涉及到了getData(),setData(),hasFormat,分别对应获取，设置，检查clipboard对象信息。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" styleName="plain" 
					   width="100%" height="100%"
					   >
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.IUIComponent;
			import mx.managers.DragManager;
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:nativeDragEnter>
		<![CDATA[
			if (event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
				var files:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
				if (files.length == 1){
					DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
					//setStyle("backgroundColor", 0xccccff);
				}
			}
		]]>
	</s:nativeDragEnter>
	<s:nativeDragExit>
		<![CDATA[
			
		]]>
	</s:nativeDragExit>
	<s:nativeDragDrop>
		<![CDATA[
			var arr:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
			startImage.source = (arr[0] as File).url;
			var j:String = (arr[0] as File).url;
			trace(j.split(".")[1]);
			if(j.split(".")[1] == "txt"){
				var currentFile:File = arr[0];
				var fs:FileStream = new FileStream();
				fs.open(arr[0],FileMode.READ);
				startTA.text = fs.readMultiByte(fs.bytesAvailable,File.systemCharset);
				fs.close();
				trace(startTA.text);
			}
		]]>
	</s:nativeDragDrop>
	<s:nativeDragOver>
		<![CDATA[
			
			//var i:int = Math.floor(Math.random()*10);
			//var j:String = "0x"+i+"000cc";
			var i:int = event.stageX;
			var j:int = event.stageY;
			setStyle("backgroundColor",i*j);
		
		]]>
	</s:nativeDragOver>
	<mx:ViewStack id="startVS" width="100%" height="100%" creationPolicy="all">
		<mx:Canvas width="100%" height="100%">
			<mx:Text verticalCenter="0" horizontalCenter="0" color="white">
				<mx:htmlText><![CDATA[<font size="20"><b>Drag an image here</b></font>]]></mx:htmlText>
			</mx:Text>
			<s:TextArea id="startTA" width="200" height="200"/>
			<mx:Image id="startImage" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"/>
		</mx:Canvas>
	</mx:ViewStack>
	
</s:WindowedApplication>

先看了例子。这里还用到了几个事件，分别是nativeDragEnter,nativeDragOver,nativeDragDrop,nativeDragExit

主要是对air程序监听到了拖放信息的时候触发，当处于不同事件的时候做不同的事情。

尝试了用Math.Radom()，去设置background的背景色。

clipboard最终是一个Object File对象。

这里还用到了String的split()方法，去获取文件的后缀名。把txt文件内容放到TextArea里面。

所以拖拽的本质还是在操作系统的剪切板，只是换了交互方式