Question

我想知道是否有办法让对象A（例如一个Rect）在视觉上出现在对象B后面（例如另一个Rect），但是从鼠标翻转的角度看它前面。换句话说，如果将鼠标尖移动到A和B的交点上，则A会翻转而不是B。

如果这不存在，我很好奇你将如何实现这样的东西。

谢谢

Answer 1

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

<?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>

Answer 2

我不认为这本质上是有效的。

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

我使用swapChildren和鼠标事件实现Z顺序更改。可能mouseOver将ObjectA移到顶部，然后mouseOut将ObjectA移到后面。

如果您有一个包含两个以上类的更复杂的结构，则可以使用swapChildrenAt。

有关排序图层的一些奇怪的问题

2 个答案: