本例是Flex3 Cookbook 3.27节的内容,需求是要让用户可以在Tile 容器里面拖拽其瓷砖(tile)并且在用户放下瓷砖(tile)的时候容器重组。
书中示例代码如下:
<mx:Tile xmlns:mx="http://www.adobe.com/2006/mxml" width="300"
height="600" direction="horizontal">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function childStartDrag(event:Event):void
{
(event.currentTarget as UIComponent).startDrag(false,
this.getBounds(stage));
(event.currentTarget as
UIComponent).addEventListener(MouseEvent.MOUSE_UP,
childStopDrag);
(event.currentTarget as
UIComponent).addEventListener(MouseEvent.ROLL_OUT,
childStopDrag);
swapChildren((event.currentTarget as UIComponent),
getChildAt(numChildren-1));
}
private function childStopDrag(event:Event):void
{
swapChildren((event.currentTarget as UIComponent),
hitTestChild((event.currentTarget as UIComponent)));
(event.currentTarget as UIComponent).stopDrag();
this.invalidateDisplayList();
this.invalidateProperties();
}
private function
hitTestChild(obj:UIComponent):DisplayObject
{
for(var i:int = 0; i<this.numChildren; i++)
{
if(this.getChildAt(i).hitTestObject(obj))
{
return getChildAt(i);
}
}r
return getChildAt(0)
}
]]>
</mx:Script>
<mx:Panel title="First Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="First Text"/>
</mx:Panel>
<mx:Panel title="Second Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Second Text"/>
</mx:Panel>
<mx:Panel title="Third Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Third Text"/>
</mx:Panel>
<mx:Panel title="Fourth Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Fourth Text"/>
</mx:Panel>
</mx:Tile>
本着学习Flex4的原则,将本书中的例子用Flex4控件加以改造,但是运行起来各种问题(事实上,书中的代码在Flex3中运行也是各种问题),最主要是swapChildren方法在Flex4中对应的swapElements方法执行后会自动替换两个控件的位置,导致无法拖拽,若不调用该方法,则顺序靠前的控件在拖拽的过程中会与顺序靠后的控件重叠一部分,导致无法拖放,于是乎开始改造。
使用拖拽代理,可解决控件重叠的问题。本来是想另拖拽源控件隐藏,但是在拖拽失败时候无法重新显示出来,因此暂不考虑。
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955"
minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.managers.DragManager;
private var targetElem:UIComponent;
private function childStartDrag(event:MouseEvent):void {
var ui:UIComponent = event.currentTarget as UIComponent;
var proxyBox:BitmapAsset = new BitmapAsset();
proxyBox.bitmapData = new BitmapData(ui.width, ui.height);
proxyBox.bitmapData.draw(ui);
var ds:DragSource = new DragSource();
ds.addData(ui, "border");
DragManager.doDrag(ui, ds, event, proxyBox);
}
protected function tg_dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("border")) {
DragManager.acceptDragDrop(event.currentTarget as UIComponent);
}
}
protected function tg_dragDropHandler(event:DragEvent):void {
var elem:UIComponent = event.dragInitiator as UIComponent;
if (targetElem && targetElem != elem) {
tg.swapElements(targetElem, elem);
}
}
protected function tg_creationCompleteHandler(event:FlexEvent):void {
for (var i:int = 0; i < tg.numElements; i++) {
tg.getElementAt(i).addEventListener(DragEvent.DRAG_ENTER, elemDragEnter, false, 0, true);
tg.getElementAt(i).addEventListener(MouseEvent.MOUSE_DOWN, childStartDrag, false, 0, true);
}
}
protected function elemDragEnter(event:DragEvent):void {
if (targetElem != event.currentTarget) {
targetElem = event.currentTarget as UIComponent;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:TileGroup id="tg"
dragEnter="tg_dragEnterHandler(event)"
dragDrop="tg_dragDropHandler(event)"
creationComplete="tg_creationCompleteHandler(event)"
x="129"
y="58">
<s:BorderContainer>
<s:Label text="First Text"/>
</s:BorderContainer>
<s:BorderContainer>
<s:Label text="Second Text"/>
</s:BorderContainer>
<s:BorderContainer>
<s:Label text="Third Text"/>
</s:BorderContainer>
<s:BorderContainer>
<s:Label text="Fourth Text"/>
</s:BorderContainer>
</s:TileGroup>
</s:Application>
分享到:
相关推荐
TileMap(瓷砖地图)是一种高效且灵活的工具,常用于构建2D游戏的环境和场景。本素材包主要围绕如何使用TileMap来快速构造2D关卡,帮助开发者节省时间和精力,专注于游戏玩法的创新。 1. TileMap简介: TileMap是2...
TileMap是一种广泛应用于游戏开发中的技术,特别是在2D游戏领域,它允许开发者通过组合小块图形(称为“瓷砖”或“瓦片”)来构建大而复杂的游戏世界。这种技术可以高效地创建和管理游戏环境,同时保持低内存占用和...
X-tile软件操作流程详解 X-tile是一款广泛应用于生物信息学和生物统计学领域的数据分析软件,主要用于生存分析和基因表达分析。下面是X-tile软件的操作流程详解: 一、数据准备 在使用X-tile软件之前,需要将...
X~tile 软件操作流程知识点总结 X~tile 软件是进行生存期分析和基因表达相关性分析的重要工具,本文将对 X~tile 软件的操作流程进行详细的介绍和解释。 软件下载和安装 首先,需要下载 X~tile 软件并安装到计算机...
MapTile是一款专为GIS(地理信息系统)用户设计的高效图片切片工具,它能够处理几乎所有的图片格式,并且用户可以根据需求自由设定切片等级。在WebGIS应用中,地图的加载速度往往受到单个图像文件大小的影响,Map...
《Tile Studio地图编辑器深度解析》 在游戏开发和像素艺术创作领域,地图编辑器扮演着至关重要的角色,其中Tile Studio地图编辑器以其强大的功能和易用性深受用户喜爱。本文将深入探讨Tile Studio的特性、功能以及...
通常,官方MATLAB函数库中的函数已经高度优化,但在学习和理解MATLAB编程时,阅读这些源代码能帮助我们更好地掌握MATLAB的内部工作原理。 至于`license.txt`文件,它是MATLAB函数的许可协议,通常包含了关于使用、...
Tidy Tile Mapper is an easy-to-use, intuitive and powerful tile-based game creator for Unity, perfect for creating both 2D and 3D tile-based games. See the website, watch the videos. API documentation...
《X-tile软件及其对医学数据分析的重要性》 X-tile是一款强大的医学数据分析工具,尤其在预后或生存相关性分析中扮演着至关重要的角色。它主要用于寻找最佳的分组临界值,帮助研究人员将样本群体划分为不同亚组,以...
Tidy Tile Mapper is an easy-to-use, intuitive and powerful tile-based game creator for Unity, perfect for creating both 2D and 3D tile-based games. See the website, watch the videos. API ...
《TILE STUDIO中文版:地图编辑神器的深度解析》 在数字地图制作领域,有一款工具备受青睐,那就是TILE STUDIO。作为一款专为地图爱好者和专业制图者设计的地图编辑器,TILE STUDIO以其强大的功能和友好的用户界面...
"Tile Studio"是一款专为游戏开发设计的工具,主要用于创建和编辑游戏背景的贴图。在游戏开发中,贴图是构建游戏环境和角色的重要元素,而“Tile Studio”简化了这一过程,使得即便是初学者也能轻松上手。 首先,...
"Tile贴图"(也称为瓷砖或切片贴图)是一种常见的解决方案,它能够有效地优化内存使用和渲染性能。本文将深入探讨如何在Android游戏中实现Tile贴图,以及其背后的原理和技术。 Tile贴图是一种将大图像分割成多个...
《tileStudio地图编辑器中文版:开启你的2D游戏世界创作之旅》 在游戏开发领域,尤其是2D游戏,地图编辑器是不可或缺的工具之一。tileStudio作为一款知名的2D地图编辑器,以其强大的功能和易用性赢得了众多开发者和...
"mod_tile-0.5.zip" 是一个与OpenStreetMap(OSM)相关的压缩文件,其版本号为0.5。OSM是一个全球性的、开放源代码的项目,旨在创建和分享地理信息数据,比如地图数据。这个压缩包可能包含了用于增强或修改OSM地图...
**Title:** Tile-Studio地图编辑器 **Description:** Tile-Studio是一款专用于创建和编辑地图的专业工具,尤其适用于像素艺术风格的游戏开发。它的最新版本为ts2_076b,其中包含的主要可执行文件是ts.exe。此外,...
Super Tilemap Editor is a powerful and easy to use tile editor with everything you need to create any game based on tiles. Use it not only to create tilemaps but also as a powerful level editor ...
X-tile是一款在生物信息学领域广泛使用的工具,主要用于确定最佳的cut-off值。这个cut-off值在医学研究,特别是癌症研究中具有重要意义,因为它可以帮助科学家们定义疾病分期、预测预后以及指导个体化治疗。在临床...
这个名为"ComfyUI+AnimateDiff+ControlNet的Tile生成动画.zip"的压缩包文件,显然涉及到几个关键概念,包括ComfyUI、AnimateDiff和ControlNet,以及Tile生成动画。我们将逐一探讨这些概念。 首先,ComfyUI可能是指...