Question

我的视图中有一个组，我正在尝试用一些collor填充它并添加一个鼠标事件，所有动态。问题是，当我添加鼠标事件时，该组只是再次变为不可见。它仍然存在于视图中并且正常响应鼠标事件，但我看不到它

这是一个代码示例：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" creationComplete="onCreationComplete()" >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

                public function onCreationComplete():void
                {
                    testeGroup.graphics.beginFill(0xff0000);
                    testeGroup.graphics.drawRect(0, 0, testeGroup.width, testeGroup.height);
                    testeGroup.graphics.endFill();

                    testeGroup.addEventListener(MouseEvent.CLICK, function ():void{
                        trace("test");
                    });
                }

        ]]>
    </fx:Script>

    <s:Group id="testeGroup" verticalCenter="0" horizontalCenter="0" width="100" height="100" >

    </s:Group>

</s:View>

没有鼠标事件，该组可见，但当我尝试添加它时它会消失。我已尝试过其他事件，例如ENTER_FRAME事件，它的工作正常，但我尝试的所有鼠标事件都使该组变得不可见。

我实际上使用opaqueBackground属性解决了我的问题，当我添加事件时，该组不会消失。但现在我对这种行为的原因感到好奇。

Answer 1

这是有趣的，无论出于何种原因添加一个监听器调用invalidateDisplayList，这意味着在下一个输入框架中将调用updateDisplayList，在group updateDisplayList中它调用graphics.clear（），它也是调用drawBackground（）来执行graphics.clear（）。基本上从外部绘制对象图形会产生这些奇怪的行为，我认为最好扩展Group然后在updateDisplayList中进行绘制。

为了更具体一点，GroupBase中的addEventListener代码设置了一个属性hasMouseListeners，并且在setter中它使显示列表无效，这里将发生的事件列表如下：

        case MouseEvent.CLICK:
        case MouseEvent.DOUBLE_CLICK:
        case MouseEvent.MOUSE_DOWN:
        case MouseEvent.MOUSE_MOVE:
        case MouseEvent.MOUSE_OVER:
        case MouseEvent.MOUSE_OUT:
        case MouseEvent.ROLL_OUT:
        case MouseEvent.ROLL_OVER:
        case MouseEvent.MOUSE_UP:
        case MouseEvent.MOUSE_WHEEL:
        case TouchEvent.TOUCH_BEGIN:
        case TouchEvent.TOUCH_END:
        case TouchEvent.TOUCH_MOVE:
        case TouchEvent.TOUCH_OUT:
        case TouchEvent.TOUCH_OVER:
        case TouchEvent.TOUCH_ROLL_OUT:
        case TouchEvent.TOUCH_ROLL_OVER:
        case TouchEvent.TOUCH_TAP:
        case GestureEvent.GESTURE_TWO_FINGER_TAP:
        case PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP:
        case TransformGestureEvent.GESTURE_PAN:
        case TransformGestureEvent.GESTURE_ROTATE:
        case TransformGestureEvent.GESTURE_SWIPE:
        case TransformGestureEvent.GESTURE_ZOOM:

Answer 2

另一种方法是使用Graphic作为Group的子级并修改Graphic的图形而不是封闭Group的图形。

<s:Group
    id="doNotUseMyGraphicsBecauseItWillNotWork"
    >
    <s:Graphic
        id="useMyGraphicsInstead"
        />
</s:Group>

Flex：动态绘制的组，带有鼠标事件

2 个答案: