欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

flex day 5 air的drag和drop

程序员文章站 2022-05-06 08:08:06
...

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里面。

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

相关标签: flex air