2011-04-23 55 views
0

我想知道是否有方法让对象A(例如Rect)从对象B(例如另一个Rect)可视地出现在对象B(例如另一个Rect)的后面,但从鼠标悬停的角度看它在它的前面。换句话说,如果您将鼠标笔尖移到A和B的交叉点上,A会翻转而不是B.有关排序图层的奇怪问题

如果这不是开箱即用的,我很好奇您将如何实现这样的事情。

谢谢

回答

1

我不认为这是内在工作。

要使ObjectA出现在ObjectB后面,只需在ObjectB之前将ObjectA添加到容器。 Flex会根据已添加到容器的订单项来处理“Z-Order”。

我会使用swapChildren和鼠标事件来实现Z顺序变化。可能mouseOver将ObjectA移动到顶部,然后mouseOut将ObjectA移动到后面。

如果您的结构更复杂且分为两类以上,则可以使用swapChildrenAt

+0

谢谢 - 这很有道理。我认为这是不可能的,但是如果有一种方法你可能会知道:有没有办法让一个rollOver或一个mouseOver事件触发当前在顶部和后面的对象?或者,也许可以获得鼠标当前位于其上的所有对象的列表,并检查后面的对象是否是列表的一部分?这将使执行这件事变得轻而易举。再次感谢! F。 – 2011-04-25 03:20:13

2

也许这个样本适合您的需要?

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <fx:Script> 
    <![CDATA[ 
     private function putBlueRectInFront():void 
     { 
      blueRect.depth = 1; 
      redRect.depth = 0; 
     } 

     private function putRedRectInFront():void 
     { 
      redRect.depth = 1; 
      blueRect.depth = 0; 
     } 

     protected function rectContainer_rollOutHandler(event:MouseEvent):void 
     { 
      rectContainer.removeEventListener(MouseEvent.MOUSE_MOVE, rectContainer_mouseMoveHandler); 
      putBlueRectInFront(); 
     } 

     protected function rectContainer_rollOverHandler(event:MouseEvent):void 
     { 
      rectContainer.addEventListener(MouseEvent.MOUSE_MOVE, rectContainer_mouseMoveHandler); 
     } 

     private function rectContainer_mouseMoveHandler(event:MouseEvent):void 
     { 
      if (event.localX <= redRect.width && event.localY <= redRect.height) 
       putRedRectInFront(); 
      else 
       putBlueRectInFront(); 
     } 
    ]]> 
    </fx:Script> 
    <s:BorderContainer height="400" horizontalCenter="0" id="rectContainer" 
     rollOut="rectContainer_rollOutHandler(event)" rollOver="rectContainer_rollOverHandler(event)" verticalCenter="0" 
     width="400"> 
     <s:borderStroke> 
      <s:SolidColorStroke color="black" weight="1" /> 
     </s:borderStroke> 
     <s:Rect height="250" id="redRect" left="0" top="0" width="250"> 
      <s:fill> 
       <s:SolidColor color="red" /> 
      </s:fill> 
     </s:Rect> 
     <s:Rect bottom="0" height="250" id="blueRect" right="0" width="250"> 
      <s:fill> 
       <s:SolidColor color="blue" /> 
      </s:fill> 
     </s:Rect> 
    </s:BorderContainer> 
</s:Application>