5 Replies Latest reply on Aug 20, 2009 8:02 AM by kkc_mca

    programmatically drawing arrow headed line

    Madhav Subedi Level 4
      i need to let users draw an arrow headed line on mouse down-move-up. please suggest how can i do it.
        • 1. Re: programmatically drawing arrow headed line
          RUSH-ME Level 3

          HI

           

          To drawLine on mousedown and mouseup add two event listeners for mouseDown and mouseup.

          Inside the mousedown event handler keep X1, y1 from mouse point and remove mouseDown event listener.

          Inside mouseup event handler keep X2, y2 from mouse point and remove mouseup event listener.

          Then draw line using graphhics.moveto(X1, Y1) and graphhics.lineto(X2, Y2).

          To drawarrow use this function just after line draw.

           

          public function createArrow(X1:Number, X2:Number, Y1:Number, Y2:Number):void
              {
                  var angle:Number = Math.atan2(Y2-Y1, X2-X1);     
                  graphics.lineTo(X2-arrowHeight*Math.cos(angle)-arrowWidth*Math.sin(angle),
                      Y2-arrowHeight*Math.sin(angle)+arrowWidth*Math.cos(angle));
                  graphics.lineTo(X2, Y2);
                  graphics.lineTo(X2-arrowHeight*Math.cos(angle)+arrowWidth*Math.sin(angle),
                      Y2-arrowHeight*Math.sin(angle)-arrowWidth*Math.cos(angle));         
              }

           

          Set two variables arrowWoidth and arrowHeight.


          Hope this solves your problem.

          • 2. Re: programmatically drawing arrow headed line
            Madhav Subedi Level 4

            i used your function as follows, but i didnot see any results

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                layout="absolute"
                                backgroundColor="#FFFFFF"
                                backgroundGradientColors="[#FFFFFF,#FFFFFF]"
                                creationComplete="cc()"
                                width="1000"
                                height="500">
                 <mx:Script>
                      <![CDATA[
                           import mx.controls.Alert;
                           private var arrowWidth:Number=10;
                           private var arrowHeight:Number=10;
            
                           private function cc():void
                           {
                                createArrow(100, 100, 200, 200);
                           }
            
                           public function createArrow(X1:Number, X2:Number, Y1:Number, Y2:Number):void
                           {
                                var angle:Number=Math.atan2(Y2 - Y1, X2 - X1);
                                this.graphics.lineStyle(2,0x000000);
                                this.graphics.lineTo(X2 - arrowHeight * Math.cos(angle) - arrowWidth * Math.sin(angle), Y2 - arrowHeight * Math.sin(angle) + arrowWidth * Math.cos(angle));
                                this.graphics.lineTo(X2, Y2);
                                this.graphics.lineTo(X2 - arrowHeight * Math.cos(angle) + arrowWidth * Math.sin(angle), Y2 - arrowHeight * Math.sin(angle) - arrowWidth * Math.cos(angle));
                                
                           }
                      ]]>
                 </mx:Script>
            </mx:Application>
            

            • 3. Re: programmatically drawing arrow headed line
              RUSH-ME Level 3

              Hi

               

              You are using the application's graphics. so its not possible to draw directly.

               

              First create a Shape object and use its graphics to draw the arrow. Then add it as child(DisplayObject) to application.

               

              If you want to draw only the arrow write one line inside the createarrow() function.

               

              graphics.moveto(x2, y2);

               

              Otherwise you can use a uicomponent to draw it.

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

              <mx:Application

               

              xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="cce()"

              >

               

              <mx:Script>

               

               

              <![CDATA

              [

               

               

              private var arrowHeight:Number =

              10;

               

               

              private var arrowWidth:Number =

              4;

               

               

              private function cce():

              void

               

               

              {

              createArrow

               

              (100,100, 200,200)

              ;

               

               

              }

               

               

              public function createArrow(X1:Number, X2:Number, Y1:Number, Y2:Number):

              void

               

               

              {

              rr.graphics.lineStyle

               

              (2,0x000000)

              ;

               

              rr.graphics.moveTo

               

              (X2, Y2)

              ;

               

               

              var angle:Number = Math.atan2(Y2-Y1, X2-X1)

              ;

              rr.graphics.lineTo

               

              (X2-arrowHeight*Math.cos(angle)-arrowWidth*Math.sin(angle)

              ,

              Y2

               

              -arrowHeight*Math.sin(angle)+arrowWidth*Math.cos(angle))

              ;

              rr.graphics.lineTo

               

              (X2, Y2)

              ;

              rr.graphics.lineTo

               

              (X2-arrowHeight*Math.cos(angle)+arrowWidth*Math.sin(angle)

              ,

              Y2

               

              -arrowHeight*Math.sin(angle)-arrowWidth*Math.cos(angle))

              ;

               

               

              }

               

               

              ]]

              >

              </mx:Script>

               

               

              <mx:UIComponent id="rr" width="400" height="400"

              />

               

              </mx:Application>

               

              Hope this will solve your problem

               

              Regards

               

              Rush-me.

              • 4. Re: programmatically drawing arrow headed line
                Gregory Lafrance Level 6

                You need to draw on a Sprite, then wrap the Sprite in a UIComponent.

                 

                If this post answers your question or helps, please mark it as such.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="absolute" backgroundColor="#FFFFFF"
                  backgroundGradientColors="[#FFFFFF,#FFFFFF]"
                  creationComplete="cc()" width="1000" height="500">
                  <mx:Script>
                    <![CDATA[
                      import mx.core.UIComponent;
                      import mx.controls.Alert;
                     
                      private var arrowWidth:Number=10;
                      private var arrowHeight:Number=10;

                      private function cc():void{
                        createArrow(100, 100, 200, 200);
                      }

                      public function createArrow(X1:Number, X2:Number, Y1:Number, Y2:Number):void{
                        var angle:Number=Math.atan2(Y2 - Y1, X2 - X1);
                        var sprite:Sprite = new Sprite();
                        sprite.graphics.lineStyle(2,0x000000);
                        sprite.graphics.lineTo(X2 - arrowHeight * Math.cos(angle) - arrowWidth * Math.sin(angle), Y2 - arrowHeight * Math.sin(angle) + arrowWidth * Math.cos(angle));
                        sprite.graphics.lineTo(X2, Y2);
                        sprite.graphics.lineTo(X2 - arrowHeight * Math.cos(angle) + arrowWidth * Math.sin(angle), Y2 - arrowHeight * Math.sin(angle) - arrowWidth * Math.cos(angle));
                        var uic:UIComponent = new UIComponent();
                        uic.addChild(sprite);
                        this.addChild(uic);
                      }
                    ]]>
                  </mx:Script>
                </mx:Application>

                • 5. Re: programmatically drawing arrow headed line
                  kkc_mca Level 2

                  Here I am placing the code which draws the arrow head at second point (x2,y2)

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                    layout="absolute" backgroundColor="#FFFFFF"

                    backgroundGradientColors="[#FFFFFF,#FFFFFF]"

                    creationComplete="cc()" width="1000" height="500">

                    <mx:Script>

                      <![CDATA[

                        import mx.core.UIComponent;

                        import mx.controls.Alert;

                   

                        private var arrowWidth:Number=10;

                        private var arrowHeight:Number=10;

                        private function cc():void{

                          createArrow(100, 100, 100, 200);

                        }

                        public function createArrow(X1:Number, X2:Number, Y1:Number, Y2:Number):void{

                          var angle:Number=Math.atan2(Y2 - Y1, X2 - X1);

                          var sprite:Sprite = new Sprite();

                          sprite.graphics.lineStyle(2,0x000000);

                   

                         var g:Graphics = sprite.graphics;

                  g.clear();

                  g.beginFill(0xff0000, 2);

                  g.lineStyle(2,0xff0000);

                  g.moveTo(X1 , Y1);

                  g.lineTo(X2 , Y2 );

                  g.lineTo(X2 , Y2  + 5.5);

                  g.lineTo(X2  - 6.5, Y2 - 4.5);

                  g.lineTo(X2  + 6.5, Y2  - 4.5);

                  g.lineTo(X2 , Y2  + 5.5);

                  g.lineTo(X2 , Y2);

                  g.endFill();

                          var uic:UIComponent = new UIComponent();

                          uic.addChild(sprite);

                          this.addChild(uic);

                        }

                      ]]>

                    </mx:Script>

                  </mx:Application>

                   

                  If this post answers your question or helps. Please mark it as such