4 Replies Latest reply on Oct 22, 2009 9:14 PM by Roland Tritsch

    How to get a click event on a Path?

    Roland Tritsch

      hi all,

       

      I am using Flash Builder 4 Beta 2.

       

      I need to get a click event on a Path object. The source code below displays a red triangle.

      Obviously, if I define a click="" on the Graphics object the entire Graphics Area become "clickable".

      That is not what I want. I just want the triangle to become "clickable"?

       

      Any ideas, how to make that happen?

       

      Regards ...

          Roland

       

      ---

       

      <?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/halo" minWidth="1024" minHeight="768"

      >

      <s:Panel title="Roland's FXG Example">

      <s:Group>

      <s:Graphic buttonMode="true" click="trace('ok')">

      <s:Path data="M 100 100 L 100 300 L 300 100 L 100 100">

      <!--

      <s:Path>

      <s:segments>

      <s:MoveSegment x="100" y="100"/>

      <s:LineSegment x="100" y="300"/>

      <s:LineSegment x="300" y="100"/>

      <s:LineSegment x="100" y="100"/>

      </s:segments>

      -->

      <s:stroke>

      <s:Stroke color="black" weight="10"/>

      </s:stroke>

      <s:fill>

      <s:SolidColor color="red"/>

      </s:fill>

      </s:Path>

      </s:Graphic>

      </s:Group>

      </s:Panel>

      </s:Application>

        • 1. Re: How to get a click event on a Path?
          mewk Level 3

          Hey Roland,

           

          Use a stroke (not a fill) combined with mouseEnabledWhereTransparent="false" (courtesy an early post today! )

           

          <?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/halo" >
          
            <fx:Script>
              <![CDATA[
                protected function myGroup_mouseOutHandler():void {
                  currentState="normal";
                }
          
                protected function myGroup_mouseOverHandler():void {
                  currentState="over";
                }
              ]]>
            </fx:Script>
          
            <s:states>
              <s:State name="normal" />
              <s:State name="over" />
            </s:states>
          
            <s:Group id="myGroup" buttonMode="true"
                     click="trace('OK')"
                     verticalCenter="0" horizontalCenter="0"
                     mouseEnabledWhereTransparent="false"
                     mouseOver="myGroup_mouseOverHandler()" mouseOut="myGroup_mouseOutHandler()">
              <s:Path id="path" data="L100 100 200 0 0 0 ">
                <s:stroke>
                  <s:LinearGradientStroke weight="10" >
                    <s:GradientEntry color="green" color.over="red"/>
                    <s:GradientEntry color="blue" color.over="yellow" alpha=".4" />
                  </s:LinearGradientStroke>
                </s:stroke>
              </s:Path>
            </s:Group>
          </s:Application>
          

          - e

          1 person found this helpful
          • 2. Re: How to get a click event on a Path?
            David_F57 Level 5

            Hi,

             

            You wrap the path in a group and the group contains the click event, with the group you set mouseEnabledWhereTransparent to false only the fill area of the path will accept the mouse event

             

             

            s:Group  x="10" y="10" width="36" height="36" mouseEnabledWhereTransparent="false" click="clickHandler(event)" >

            <s:Path id="lr" data="M30.832,4.992l5.175-4.196C23-0.463,9.293,10.097,9.948,22.821l-7.857-2.025 L13.35,34.362

            l11.188-13.497l-7.902,2.168c0.769-10.42,7.902-14.266,19.371-13.776L30.832,4.992z "/>

            </s:Group>

             

            David.

            • 3. Re: How to get a click event on a Path?
              mewk Level 3

              Also, if you want to include a fill, you can check out the project zipped down below. Basically, the project creates a custom component from the graphics you provided with an additional fill layer. Note that you can see some of the fill through the stroke because the stroke alpha does not equal 1 (but you can easily fix this yourself).

               

              - e

              1 person found this helpful
              • 4. Re: How to get a click event on a Path?
                Roland Tritsch Level 1

                hi all, thx a lot for the responses. mouseEnabledWhereTransparent="false" did the trick. - RT