2 Replies Latest reply on Apr 25, 2011 7:41 AM by broconne

    Draw a line between two objects?

    broconne

      I am trying to draw a line between two images with flex.

       

      I have the following code:

       

      <s:Group>

       

      <s:Line xFrom="{x2.x}" yFrom="{x2.y}" xTo="{x1.x}" yTo="{x1.y}">

      <s:stroke>

      <s:SolidColorStroke color="red" alpha="1" weight="10"/>

      </s:stroke>

      </s:Line>

       

      </s:Group>

       

       

      However, this seem to just draw a random line that is not near either of the two images.  What is the preferred way to draw a line between items in flex?

        • 1. Re: Draw a line between two objects?
          Jason Szeto Level 3

          Are your images and the line you are drawing in the same coordinate space? (ie, are they contained by the same Group?). They at least need to share the same ancestor. You can use the localToGlobal and globalToLocal functions to move your positions between the different coordinate spaces. Also, you probably shouldn't be using just the x/y positions of your images. What you'll really need to do is draw a line between the two closest edges of your two images. (ex. right edge of one to the left edge of the other)

           

          Jason Szeto

          Flex SDK Engineer

          1 person found this helpful
          • 2. Re: Draw a line between two objects?
            broconne Level 1

            Jason -

               Thanks for the reply.  They are in the same <s:Group> although one set is in a HBox and the other is not.  I was going to move to move the lines to the edges - but I was just trying to get the basics to work first.

             

            Here is the entire group:

            <mx:VBox id="B" paddingTop="20" verticalGap="20" horizontalAlign="center" width="100%" height="100%" includeIn="LB">

            <mx:Image source="@Embed(source='internet.png')" scaleX=".5" scaleY=".5"/>

            <mx:Image source="@Embed(source='LB.png')" scaleX=".2" scaleY=".2" id="lb"/>

             

            <s:Group>

             

            <mx:HBox horizontalGap="20" id="XItems">

            <mx:Image source="@Embed(source='x.png')" scaleX=".5" scaleY=".5" id="x1"/>

            <mx:Image source="@Embed(source='x.png')" scaleX=".5" scaleY=".5"/>

            <mx:Image source="@Embed(source='x.png')" scaleX=".5" scaleY=".5"/>

            </mx:HBox>

             

             

             

            <s:Line xFrom="{lb.x}" yFrom="{lb.y}" xTo="{x1.x}" yTo="{x1.y}">

            <s:stroke>

            <s:SolidColorStroke color="red" alpha="1" weight="10"/>

            </s:stroke>

            </s:Line>

             

            </s:Group>

             

            </mx:VBox>

             

             

            Since the items are in the same parent group  sould it just work?  Or because the XItems are in an HBox do I need to convert coordinate spaces?

             

            Thanks.