1 Reply Latest reply on Oct 19, 2010 11:44 PM by Shongrunden

    Connecting 2 shapes with a line


      Hi there


      I am currently developing a Visio-like application using Flex 4.0. I am currently facing the problem on how to implement connecting 2 shapes using a line. Just like when you are creating a UML diagram where you will connect 2 diagrams. Anybody there that was able to do that?


      Any help will be greatly appreciated.

        • 1. Re: Connecting 2 shapes with a line
          Shongrunden Adobe Employee

          It might be useful to look into the Line graphic primitive, for example:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                      import spark.primitives.Line;
                      import mx.graphics.SolidColorStroke;
                      private function init():void {
                          // draw line
                          var newLine:Line = new Line();
                          newLine.xFrom = startRect.x + startRect.width / 2;
                          newLine.yFrom = startRect.y + startRect.height / 2;
                          newLine.xTo = endRect.x + endRect.width / 2;
                          newLine.yTo= endRect.y + endRect.height / 2;
                          newLine.stroke = new SolidColorStroke();
                          newLine.depth = -1; // so the line is under the end points


              <s:Rect id="startRect" width="15" height="15">
                      <s:SolidColor color="green" />
              <s:Rect id="endRect" width="15" height="15" x="100" y="150">
                      <s:SolidColor color="red" />