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

    Connecting 2 shapes with a line

    ogremagi

      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"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         creationComplete="init()">
              <fx:Script>
                  <![CDATA[
                      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
                         
                          addElement(newLine);
                      }
                  ]]>
              </fx:Script>

           

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