10 Replies Latest reply on Jan 27, 2008 9:09 PM by MavenGopal

    Diagonal Line

    MavenGopal Level 1
      Hi Experts,

      I am new to flex.
      Can you please guide how to draw a diagonal line in flex?

      Regards,
      Gopal
        • 1. Re: Diagonal Line
          theklue Level 1
          You can use the drawing API. For example:

          var line:UIComponent = new UIComponent();
          line.graphics.lineStyle(1, 0xff);
          line.graphics.lineTo (100, 100);

          addChild(line);


          Regards,

          Alberto
          • 2. Re: Diagonal Line
            MavenGopal Level 1
            Hi theklue,

            Thanks for information. Can we use graphics object to draw a string also as we can draw line?

            Warm Regards,
            Gopal
            • 3. Re: Diagonal Line
              theklue Level 1
              You can use several components to render text (TextInput, TextArea, Label ...), depending on your needs. You only need to attach them to a container's display list (using addChild) as follows:

              var la:Label = new Label();
              la.text = "hi, there";

              addChild(la);

              You can use a lower-level class; TextField, but if you want to attach to a container in flex, you'll always need to a fit this TextField into an UIComponent instance.


              HTH,

              Alberto
              • 4. Re: Diagonal Line
                MavenGopal Level 1
                Hi theklue,

                Thanks for useful reply. What I was looking for is whether graphics object can be used to print a string like what we do in Java. Or just we have to use Label component and then we have to adjust x, y and font etc on that Label component itself.

                Regards,
                Gopal
                • 5. Re: Diagonal Line
                  theklue Level 1
                  The Graphic class extends directly from Object, for this reason you cannot add any child to it (in order to add childs to an object, this one must inherit from DisplayObjectContainer).

                  I think you should pass withe the Label component, but anyway, if you explain us a bit more of what you are trying to achieve, maybe we can help you more accurately.


                  Regards,

                  Alberto
                  • 6. Re: Diagonal Line
                    buabco Level 1
                    Actually you can draw a string into a graphics objects, it's just a bit more complicated than just adding a text object to a Sprite or MovieClip.

                    For this you'll need to use the bitmap object, basically what you do is to convert a String into a bitmap object and the use the latest as a patter for a fill in the screen.

                    Of course this will be 10 time more complicated than just adding the text object.
                    • 7. Re: Diagonal Line
                      AS3dev Level 1
                      MavenGopal,

                      It really is important for you to share your end goal with us. Do you just want to display text on the screen, or do you want to add text to an image and then save the new resulting image, or do you want to make an image of text and then tweak that image, or something else?
                      • 8. Re: Diagonal Line
                        MavenGopal Level 1
                        Hi All,

                        Thanks for reply. Sorry for the late response. Got stuck in some other project.
                        Actually our goal is make "state diagram" based on table data coming from SAP backend. We are new to flex. So
                        have just started out and trying out different things in flex. For making each of the "state" our idea is to represent it
                        with a circle or a rectangle inside of which state name will be visible to the user. Circle and rectangle can be made
                        from graphics object. But how to embed string in such circle or rectangle.

                        Warm Regards,
                        Gopal
                        • 9. Re: Diagonal Line
                          AS3dev Level 1
                          MavenGopal,

                          For that you will want to make a custom component that extends UIComponent and place a Label component inside it and draw the ellipse or rectangle on the graphics layer.

                          Then in your Application or in a Canvas component, add instances of your component and arrange them, and draw lines on the Application or Canvas graphics layer.

                          That is just one way to do it, and not the best way, but probably the least complex way. The "right" way to do it would take a few pages to explain.

                          You might want to consider using, or looking at, components with similar functionality, such as Mark Shepherd's SpringGraph.
                          • 10. Re: Diagonal Line
                            MavenGopal Level 1
                            Hi Philip,

                            Thank you very much for response. We will definitely look into all suggestions put forward by you.

                            Regards,
                            Gopal