AS3的深度管理及排序

说到深度管理，不由得想起了那万恶的AS2年代-_-! 至少本人觉得在AS2中的深度管理很是混乱，不仅有断层还会有冲突……总之麻烦多多。而在AS3中，一切都是这么的清晰与明朗，深度值断层不见了、有冲突的时候会自动调整，而我们只是记住以下几个语句的用法而已。

numChildren : int
//返回此对象的子项数目。
getChildAt(index:int):DisplayObject
//返回位于指定索引处的子显示对象实例。
getChildIndex(child:DisplayObject):int
//返回 DisplayObject 的 child 实例的索引位置。
setChildIndex(child:DisplayObject, index:int):void
//更改现有子项在显示对象容器中的位置。
swapChildren(child1:DisplayObject, child2:DisplayObject):void
//交换两个指定子对象的 Z 轴顺序（从前到后顺序）。
swapChildrenAt(index1:int, index2:int):void
//在子级列表中两个指定的索引位置，交换子对象的 Z 轴顺序（前后顺序）。
removeChildAt(index:int):DisplayObject
//从 DisplayObjectContainer 的子列表中指定的 index 位置删除子 DisplayObject。

那么接下来我们来看一个简单的小例子吧，这里我就不罗列代码了，只把主要的写一下，关键是思路跟思想嘛，源码附在后面。有四个圆，可以点击与拖动，实现每点击其中一个圆，就把它调到最上面来。

这个其实很简单，要调整到最上层的话，只要用setChildIndex把鼠标点击对象的深度值设为（容器.numChildren-1）就可以啦。setChildIndex常用有以下几种：

置顶：
容器.setChildIndex(对象A,容器.numChildren-1);
置底：
容器.setChildIndex(对象A,0);
插入对象B的前面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B));
插入对象B的后面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B)-1);

是不是太简单点了呢？那我们再加深一点点吧，我们把上例中的圆换成立方块，再点击拖动下看看……

在这里我们想要达到一种空间立体的效果的话，就要对这些方块进行深度的排序，也就是说要让我们视觉上看起来靠前的物体挡住后面的物体。解决方法应该是多种多样的，在这里本民工只说说自己的解决方案了。简单说来，物体的前后顺序可以通过Y轴坐标的大小来区分，Y轴坐标值大的深度值就越大，在拖动后用一个数据记录下每个对象以及该对象的Y值，再把该数组以Y值的大小排序，最后setChildIndex一遍就可以了。

//以下代码是放在MOUSE_UP的事件里。
var obj_box:Array=new Array;//新建立数组。
for (var i=0; i<block_box.numChildren; i++) {
var aa:Object={objs:block_box.getChildAt(i),depth_y:block_box.getChildAt(i).y};
obj_box.push(aa);
//这里可以说是一个简单的JSON应用，把对象以及Y值添加到数组里。
}
*****************************************************************************
for (i=0; i<block_box.numChildren; i++) {
block_box.setChildIndex(obj_box.sortOn("depth_y",Array.NUMERIC)[i].objs,i);
//重新排序后再指定索引位置。其中sortOn是按指定的属性来排序。
}

最后再加个吸附功能吧，看看效果咯。

源码是临时写的，比较简单，都写在时间轴上咯。

点击下载源文件：depth.rar

Moondy 发表于 2009-1-7 4,691 Views | 类别: Flash/AS3

21条留言立即发表评论

#1匿名 @ 2009-3-30 10:49 回复

当你真需要断层是才会发现这个设定是多么的操蛋
- Moondy @ 2009-3-30 15:12 回复
  
  可是，在什么情况下需要断层呢？如果想把某个对象插入某个深度，其余对象都会自动调整。至少我还没想到在什么情况下需要特别留断层。
#2匿名 @ 2009-4-20 21:44 回复

例如说: A….. Z 26个显示对象,他们的Z序始终都是从上到下排列的,可是现在想按顺序插入N个显示对象,他们都在B上C下,
怎么办呢?就需要记录新插入的显示对象,听麻烦的,
#3Moondy @ 2009-4-21 02:15 回复

很容易啊，你说的A~Z，那么他们的深度都就是0~25,B的深度是1,C的深度是2，那么你只要addChildAt(obj,2)，那么C的深度就变为3,后面的都自动后移一位。要插入N个就继续addChildAt(obj,2)，其余的对象深度会自动调整的。很简单明了呀。
#4匿名 @ 2009-7-14 14:08 回复
- moondy @ 2009-7-14 14:43 回复
  
  不厚道，就一个表情，呵呵。
#5匿名 @ 2009-7-23 17:39 回复

受教了。。。
#6请帮助 @ 2009-8-7 17:25 回复

非常喜欢上面的几个例子，不过下载好像下载不下来，能给我发一份吗？
linuxsoftware#126.com
- Moondy @ 2009-8-7 22:29 回复
  
  源文件就在文章的最后啊，可以下载的。我的下载应该不至于不显眼吧，呵呵，看仔细些嘛
#7匿名 @ 2009-9-1 16:35 回复
#8匿名 @ 2009-11-2 16:34 回复

带走一点东西，放我那备用了
#9colaegg @ 2010-1-12 13:15 回复

您好，我是www.colaegg.com的站长，很喜欢你写的东西，但是真的下载不下来，能否发给我邮箱，拜托啦！colaegg@gmail.com
- moondy @ 2010-1-12 22:17 回复
  
  已经发给你了。真奇怪为什么会下不下来呢，叫很多朋友试了都行呀。
  不管了，有下不了的朋友就留言吧。
#10匿名 @ 2010-2-23 21:54 回复

你好可以把你的东西发在我邮箱里面吗以便自己学习用真诚感谢你
QQ邮箱 490163309@qq.com
- moondy @ 2010-2-24 14:30 回复
  
  已经发给你了。
  至于你说的二级菜单的问题，有不会的地方大家可以讨论，但本人原则是上不做代刀的。
#11匿名 @ 2010-2-23 21:58 回复

请问你是否有时间给我写个二级菜单点解二级菜单的时候加载.swf 然后它的主菜单对应的按钮区别别的菜单就是点击完二级菜单下的按钮他的对应主菜单颜色变亮啊让人知道我是点击了这个按钮下面的子菜单
#12向往 @ 2010-5-17 00:01 回复
#13gaojiren @ 2010-7-21 12:30 回复

楼主写的很赞，学习啦
#14未选之路 @ 2010-7-26 11:13 回复

大哥，你太强了

这样的例子好过给我N多行标准代码
- moondy @ 2010-7-26 17:17 回复
  
  过奖了，都是些简单的例子，我也还是个初学者呢
#15未选之路 @ 2010-9-6 16:08 回复