Flex 4: capture mouse events with spark.primitive.path objects

Question

I try to capture mouse events whenever the mouse does something on top of spark.primitive.path (form “L” below).

All that I read indicates that I need to put the path inside the Group object and attach the mouse handlers to this. Thus, the code will look something like this.

  <s:Group left="10" right="10" top="10" bottom="10" mouseOver="..."> <s:Path data="M 100 300 L 200 50 L 275 50 L 250 150 L 300 150 L 300 300 Z"> <s:stroke> <s:SolidColorStroke color="0x888888"/> </s:stroke> </s:Path> </s:Group> 

... and produces something similar on the screen (please forgive the art of ascii)

 _____________________________ | | | _______ | | / / | | / / | | / / | | / /_____ | | / | | | / | | | /______________| | | | ----------------------------- 

It almost works. The problem is that mouse events are fired based on the dimensions of the Group object, not the Path. So, if you hover over to the left of the path, which is still triggering mouse events, because the group is a field starting at 0.0 and ending at the bottom right of “L”.

Any thoughts on how I can solve this problem (or an alternative solution) are greatly appreciated.

Answer 1

If you use SkinnableContainer instead of a group, you will get the behavior you are looking for.

Answer 2

Try encapsulating in a Graphic object (Flex4). See There: http://blog.flexexamples.com/2010/03/22/creating-a-simple-image-map-in-flex-4/