4 Replies Latest reply on Feb 25, 2011 4:05 AM by Pablo Souza

    draw line

    siva murugan Level 1

      Hai,

       

      how to draw two line Dynamically based on below xml...Plz help me...

       

      <line> 

      <Edge backend_id="2352" destination="5" id="8" source="2" spline="0.87885,1.4719;1.0678,1.2847;1.2985,1.0562;1.5003,0.85631" />

        <Edge backend_id="2155" destination="6" id="6" source="3" spline="1.9177,4.4164;1.7687,4.2326;1.5873,4.009;1.4272,3.8118" />

      </line>

       

       

      Thanks & Regards,

      Sivamurugan.A

        • 1. Re: draw line
          Pablo Souza Level 3

          Hi,

           

          I couldn't figure out where are the lines dimension in this XML.

          If you provide further information maybe I can help you.

           

           

          Regards,

          Pablo Souza

          • 2. Re: draw line
            Pablo Souza Level 3

            I don't know the values you need for draw this line (position, dimension), but you can use this code as reference:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application 
                xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                creationComplete="application1_creationCompleteHandler(event)">
                <fx:Script>
                    <![CDATA[
                        import mx.events.FlexEvent;
                        import mx.graphics.SolidColorStroke;
                        
                        import spark.primitives.Line;
                        
                        [Bindable]
                        private var myXML:XML;
                        protected function application1_creationCompleteHandler(event:FlexEvent):void
                        {
                            var loader:URLLoader = new URLLoader();
                            loader.addEventListener(Event.COMPLETE, loadComplete_handler);
                            loader.load(new URLRequest("example.xml"));
                        }
                        
                        private function loadComplete_handler(event:Event):void
                        {
                            myXML = new XML(event.target.data);
                            for(var i:int=0; i < myXML.Edge.length(); i++)
                            {
                                var spline:Array = String(myXML.Edge[i].@spline).split(",");
                                var line:Line = new Line();
                                line.stroke = new SolidColorStroke();
                                line.xFrom = myXML.Edge[i].@source;
                                line.xTo = myXML.Edge[i].@destination * 10;
                                
                                container.addElement(line);
                            }
                        }
                    ]]>
                </fx:Script>
                
                <s:VGroup id="container" width="100%" height="100%"
                                  verticalAlign="middle" horizontalAlign="center"/>
                
            </s:Application>
            

             

             

            Best regards,

            Pablo Souza

            • 3. Re: draw line
              siva murugan Level 1

              Hai pablo.souza,

               

                                   Thanks Mr. pablo.souza.This is my details..

               

              Want output:

               

              example.png

               

               

               

               

              XML:

               

               

              <graphmap height="6.6389" scale="1" width="3.7361">
              <Node backend_id="740" id="1" x="1.75" y="1.8472"/>
              <Node backend_id="741" id="2" x="0.5" y="1.8472"/>
              <Node backend_id="88959" id="3" x="2.2222" y="4.7917"/>
              <Node backend_id="88963" id="4" x="2.2222" y="6.2639"/>
              <Node backend_id="88977" id="5" x="1.9861" y="0.375"/>
              <Node backend_id="88990" id="6" x="1.0278" y="3.3194"/>
              <Node backend_id="88999" id="7" x="2.75" y="3.3194"/>
              <Edge backend_id="2352" destination="5" id="8" source="2" spline="0.87885,1.4719;1.0678,1.2847;1.2985,1.0562;1.5003,0.85631"/>
              <Edge backend_id="2155" destination="6" id="6" source="3" spline="1.9177,4.4164;1.7687,4.2326;1.5873,4.009;1.4272,3.8118"/>
              <Edge backend_id="2201" destination="7" id="7" source="3" spline="2.3039,4.4155;2.3406,4.2668;2.3883,4.0955;2.4444,3.9444;2.4591,3.905;2.4755,3.864 6;2.4927,3.8244"/>
              <Edge backend_id="2191" destination="3" id="2" source="4" spline="2.2222,5.8886;2.2222,5.7134;2.2222,5.5021;2.2222,5.3118"/>
              <Edge backend_id="2157" destination="6" id="9" source="4" spline="1.7163,5.9608;1.4495,5.77;1.1475,5.4974;1,5.1667;0.81287,4.7472;0.84379,4.219;0.9 0737,3.835"/>
              <Edge backend_id="2200" destination="7" id="4" source="4" spline="2.6877,5.8871;2.7558,5.8118;2.8175,5.7281;2.8611,5.6389;3.1934,4.959;3.1849,4.684 7;3.0278,3.9444;3.02,3.9076;3.0098,3.8703;2.998,3.8332"/>
              <Edge backend_id="2349" destination="1" id="3" source="6" spline="1.3029,2.9382;1.3536,2.8596;1.4033,2.776;1.4444,2.6944;1.4986,2.5871;1.5478,2.467 8;1.5901,2.3534"/>
              <Edge backend_id="2350" destination="2" id="5" source="6" spline="0.89323,2.9441;0.82983,2.7673;0.75319,2.5535;0.68447,2.3618"/>
              <Edge backend_id="2202" destination="5" id="1" source="7" spline="2.6898,2.9443;2.6257,2.5685;2.5144,1.9752;2.375,1.4722;2.3212,1.2782;2.2504,1.069 1;2.184,0.88595"/>
              </graphmap>

               

               

              Then, How to draw line based on spline...plz help me...Its very urgent..

               

              Thanks in advance,

              Sivamurugan.A

              • 4. Re: draw line
                Pablo Souza Level 3

                Hi Sivamurugan.A,

                 

                Take a look at the post below, there is an example about how to draw a curved arrow.

                You just need to adapt it for your scenario: http://www.huyler.net/flexblog/2009/02/18/drawing-curved-lines-and-arrows-in-flex/

                 

                Regards,

                Pablo Souza