Mouse events only on visible parts

Question

How can I make Flex dispatch mouse events only when I interact with visible parts of a component? In this case I want event to be dispatched only when hovering the line.

<s:Group mouseOver="trace('over')">
    <s:Line xFrom="0" yFrom="0" xTo="100" yTo="100">
         <s:stroke>
             <s:SolidColorStroke color="0" weight="3"/>
         </s:stroke>
    </s:Line>
</s:Group>

I remember I had a problem some time ago in Flex 3, when I couldn't catch mouse events until I fill the canvas with transparent background. But now I have the opposite problem. Thanks for help.

Answer 1

You're on the right track.

As you've already done, you need to wrap the Line object in a Group, or some other container class, because the Spark graphics primitives (like Line) do not dispatch mouse events.

I assume your problem is that since your line is diagonal, the bounding box for the Group is a rectangle that is much larger than the line.

If you draw a horizontal or vertical line, the bounding box of the Group should then just be the dimensions of the Line. Then rotate the Group to get your diagonal line:

Note, I've just picked a random X value, and rotation ... The rotation has the effect of displacing the object's X/Y coordinates ... unless your using something other than the BasicLayout. So you'll have to adjust x/y/rotation (and/or the layout) to position your line at the right spot.

<s:Group mouseOver="trace('over')" rotation="45">
    <s:Line x="100" yFrom="0" yTo="100">
        <s:stroke>
            <s:SolidColorStroke color="0" weight="3"/>
        </s:stroke>
    </s:Line>
</s:Group>

Answer 2

You can try below code: -

<?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">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function rollOver(event:MouseEvent):void
            {
                Alert.show('over');
            }

            private function drawLine():void
            {
                var g:Graphics = graphics;

                graphComp.graphics.clear();
                var strokeColor:Number = getStyle("strokeColor");
                var shadowColor:Number = getStyle("shadowColor");

                graphComp.graphics.beginFill(strokeColor);
                graphComp.graphics.drawRect(0, 0, 100, 1);
                graphComp.graphics.endFill();

                graphComp.graphics.beginFill(shadowColor);
                graphComp.graphics.drawRect(0, 1, 100, 1);
                graphComp.graphics.endFill();
                graphComp.rotation = 45;

            }
        ]]>
    </fx:Script>
    <s:Group id="graphComp" x="100" y="100" creationComplete="drawLine()" rollOver="rollOver(event)"/>

</s:Application>