3 Replies Latest reply on Sep 28, 2009 9:16 PM by Flex harUI

    Detecting Clicks on Lines

    kshams

      Hello,

         I am building a canvas application that allows users to drag and drop different icons on the canvas and connect them through edges. I am using the graphics of the canvas to draw these lines.

       

      However, one of my requirements is to detect clicks on the lines and enable users to modify edge properties. Since lines are not first class objects, it is hard to add click listeners on them. I would like to avoid doing my own click detection through MBRs, etc. Here are my questions:

       

      1) Is using the graphics object in the canvas to draw the lines a recommended approach? It seems cumbersome and requires me to maintain too much state

      2) Do you have suggestions on how I can detect clicks on these lines without writing my own code to see if each click interested with any of the lines?

       

      Thanks in advance.

        • 1. Re: Detecting Clicks on Lines
          Flex harUI Adobe Employee

          You could put each line in a Sprite.  If you get too many sprites because you have lots of lines, performance will suffer and it will be faster to compute whether you hit a line from the mouse event's coordinates.

           

          You can also try drawing all the lines in a single sprite.  If you use rectangles of 1 pixel thickness I think you'll only get mouse events when you hit the drawn areas and not the areas between the lines.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Detecting Clicks on Lines
            kshams Level 1

            Thanks Alex. I will give that a shot. On a related note, I decided to do this in gumbo to learn my way around it. I can't seem to use Sprites properly in gumbo.

             

             

            I tried the following:

             

            var s: Sprite = new Sprite();

            s.graphics.clear();

            s.graphics.moveTo(0,0);

            s.graphics.lineTo(10,10);

            p.addChild(s);

             

             

            But I get the following error:

            Error: addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.

            at spark.components.supportClasses::SkinnableComponent/addChild()[E:\dev\beta1\frameworks\pr ojects\flex4\src\spark\components\supportClasses\SkinnableComponent.as:953]

            at Test/handleCreate()[/Users/ksshams/dev/workspaces/Adobe Flash Builder Beta2/Test/src/Test.mxml:18]

            at Test/___Test_Application1_creationComplete()[/Users/ksshams/dev/workspaces/Adobe Flash Builder Beta2/Test/src/Test.mxml:3]

            at flash.events::EventDispatcher/dispatchEventFunction()

            at flash.events::EventDispatcher/dispatchEvent()

            at mx.core::UIComponent/dispatchEvent()[E:\dev\beta1\frameworks\projects\framework\src\mx\co re\UIComponent.as:11260]

            at mx.core::UIComponent/set initialized()[E:\dev\beta1\frameworks\projects\framework\src\mx\core\UIComponent.as:1513]

            at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\beta1\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:759]

            at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\beta1\frameworks\projec ts\framework\src\mx\managers\LayoutManager.as:1067]

            • 3. Re: Detecting Clicks on Lines
              Flex harUI Adobe Employee

              If p is a gumbo container, you will need to use addElement and add a UIComponent or Group instead of Sprite.  You can still draw on its graphics.

               

              Even if you tried this in Flex 3, you generally can't use Sprite because the framework wants to know things about the children that Sprite doesn't have properties for.

               

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui