Mouse events only on visible parts - actionscript-3

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>