Skip to main content
D
dhruba.om
Known Participant
February 19, 2011
Answered

Draw a Line From any Point A To any Point B Dynamically Using AS3

  • February 19, 2011
  • 2 replies
  • 7375 views

I am trying to make an anmation where there are several locations(say A,B,C,D,......) made on a  map. If a person clicks on one location A and then another location B, I wanted to draw a dotted line from point A (from  destination of the plane) to point B(to destination of the plane)  using AS3. Please help me........

This topic has been closed for replies.
Correct answer Andrei1-bKoviI

Here is a quick and dirty timeline code that does it (class is below):

var line:Shape;
var lineGraphics:Graphics;
var clickSwitch:int = 0;
var mousePositions:Array = [];
var conversion:Number = 180 / Math.PI;

init();
function init():void {
     drawBackground();
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     stage.addEventListener(MouseEvent.CLICK, onClick);
}
     
function onClick(e:MouseEvent):void 
{
     clickSwitch = 1 - clickSwitch;
     mousePositions[clickSwitch] = new Point(mouseX, mouseY);
     if (clickSwitch == 0) {
          drawLine();
     }
     else {
          removeLine();
     }
}
     
function removeLine():void
{
     lineGraphics.clear();
     line.rotation = 0;
}
     
function drawLine():void
{
     lineGraphics.lineStyle(1, 0xff0000);
     lineGraphics.moveTo(0, 0);
     var dotDistance:Number = 2;
     var nextX:Number = dotDistance;
     while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
          lineGraphics.lineTo(nextX, 0);
          nextX += dotDistance;
          lineGraphics.moveTo(nextX, 0);
          nextX += dotDistance;
     }
     line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
     line.x = mousePositions[1].x;
     line.y = mousePositions[1].y;
}
     
function drawBackground():void
{
     var s:Shape = new Shape();
     var g:Graphics = s.graphics;
     g.beginFill(0xC0C0C0);
     g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
     g.endFill();
     addChild(s);
}

Class:

package 
{
     import flash.display.Graphics;
     import flash.display.Shape;
     import flash.display.Sprite;
     import flash.events.MouseEvent;
     import flash.geom.Point;

     public class DottedLine extends Sprite
     {
          private var line:Shape;
          private var lineGraphics:Graphics;
          private var clickSwitch:int = 0;
          private var mousePositions:Array = [];
          private var conversion:Number = 180 / Math.PI;
          
          public function DottedLine() 
          {
               init();
          }
          
          private function init():void {
               drawBackground();
               line = new Shape();
               addChild(line);
               lineGraphics = line.graphics;
               stage.addEventListener(MouseEvent.CLICK, onClick);
          }
          
          private function onClick(e:MouseEvent):void 
          {
               clickSwitch = 1 - clickSwitch;
               mousePositions[clickSwitch] = new Point(mouseX, mouseY);
               if (clickSwitch == 0) drawLine();
               else removeLine();
          }
          
          private function removeLine():void
          {
               lineGraphics.clear();
               line.rotation = 0;
          }
          
          private function drawLine():void
          {
               lineGraphics.lineStyle(1, 0xff0000);
               lineGraphics.moveTo(0, 0);
               var dotDistance:Number = 2;
               var nextX:Number = dotDistance;
               while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
                    lineGraphics.lineTo(nextX, 0);
                    nextX += dotDistance;
                    lineGraphics.moveTo(nextX, 0);
                    nextX += dotDistance;
               }
               line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
               line.x = mousePositions[1].x;
               line.y = mousePositions[1].y;
          }
          
          private function drawBackground():void
          {
               var s:Shape = new Shape();
               var g:Graphics = s.graphics;
               g.beginFill(0xC0C0C0);
               g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
               g.endFill();
               addChild(s);
          }
          
     }

}

2 replies

A
Andrei1-bKoviICorrect answer
Inspiring
February 20, 2011

Here is a quick and dirty timeline code that does it (class is below):

var line:Shape;
var lineGraphics:Graphics;
var clickSwitch:int = 0;
var mousePositions:Array = [];
var conversion:Number = 180 / Math.PI;

init();
function init():void {
     drawBackground();
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     stage.addEventListener(MouseEvent.CLICK, onClick);
}
     
function onClick(e:MouseEvent):void 
{
     clickSwitch = 1 - clickSwitch;
     mousePositions[clickSwitch] = new Point(mouseX, mouseY);
     if (clickSwitch == 0) {
          drawLine();
     }
     else {
          removeLine();
     }
}
     
function removeLine():void
{
     lineGraphics.clear();
     line.rotation = 0;
}
     
function drawLine():void
{
     lineGraphics.lineStyle(1, 0xff0000);
     lineGraphics.moveTo(0, 0);
     var dotDistance:Number = 2;
     var nextX:Number = dotDistance;
     while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
          lineGraphics.lineTo(nextX, 0);
          nextX += dotDistance;
          lineGraphics.moveTo(nextX, 0);
          nextX += dotDistance;
     }
     line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
     line.x = mousePositions[1].x;
     line.y = mousePositions[1].y;
}
     
function drawBackground():void
{
     var s:Shape = new Shape();
     var g:Graphics = s.graphics;
     g.beginFill(0xC0C0C0);
     g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
     g.endFill();
     addChild(s);
}

Class:

package 
{
     import flash.display.Graphics;
     import flash.display.Shape;
     import flash.display.Sprite;
     import flash.events.MouseEvent;
     import flash.geom.Point;

     public class DottedLine extends Sprite
     {
          private var line:Shape;
          private var lineGraphics:Graphics;
          private var clickSwitch:int = 0;
          private var mousePositions:Array = [];
          private var conversion:Number = 180 / Math.PI;
          
          public function DottedLine() 
          {
               init();
          }
          
          private function init():void {
               drawBackground();
               line = new Shape();
               addChild(line);
               lineGraphics = line.graphics;
               stage.addEventListener(MouseEvent.CLICK, onClick);
          }
          
          private function onClick(e:MouseEvent):void 
          {
               clickSwitch = 1 - clickSwitch;
               mousePositions[clickSwitch] = new Point(mouseX, mouseY);
               if (clickSwitch == 0) drawLine();
               else removeLine();
          }
          
          private function removeLine():void
          {
               lineGraphics.clear();
               line.rotation = 0;
          }
          
          private function drawLine():void
          {
               lineGraphics.lineStyle(1, 0xff0000);
               lineGraphics.moveTo(0, 0);
               var dotDistance:Number = 2;
               var nextX:Number = dotDistance;
               while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
                    lineGraphics.lineTo(nextX, 0);
                    nextX += dotDistance;
                    lineGraphics.moveTo(nextX, 0);
                    nextX += dotDistance;
               }
               line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
               line.x = mousePositions[1].x;
               line.y = mousePositions[1].y;
          }
          
          private function drawBackground():void
          {
               var s:Shape = new Shape();
               var g:Graphics = s.graphics;
               g.beginFill(0xC0C0C0);
               g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
               g.endFill();
               addChild(s);
          }
          
     }

}
kglad
kglad
Community Expert
February 20, 2011

lol.  holy cow andrei, that's a lot of code for not that much of a task.   the following allows you to specify the length of the dash and the length of the space between dashes and colors and doesn't take that much code:

function drawF(sp:Sprite,p1:Point,p2:Point,dotLen:int,spaceLen:int,col:Number):void {
    var moveToPt:Point = p1;
    with (sp.graphics) {
        lineStyle(0,col,1);
        moveTo(moveToPt.x,moveToPt.y);
    }
    var difY:Number = (p1.y-p2.y);
    var difX:Number = (p1.x-p2.x);
    var distance:Number = Math.sqrt(difX*difX+difY*difY);
    var angle:Number = 180*Math.atan(difY/difX)/Math.PI;
    var dotLenX:Number=Math.cos(angle)*dotLen;
    var dotLenY:Number=Math.sin(angle)*dotLen;
    var spaceLenX:Number=Math.cos(angle)*spaceLen;
    var spaceLenY:Number=Math.sin(angle)*spaceLen;
    var imax:int=distance/(dotLen+spaceLen);
    for (var i:int=1; i<imax; i++) {
        with (sp.graphics) {
            lineTo(moveToPt.x+dotLenX,moveToPt.y+dotLenY);
            moveToPt = new Point(moveToPt.x+dotLenX+spaceLenX,moveToPt.y+dotLenY+spaceLenY);
            moveTo(moveToPt.x,moveToPt.y);
        }
    }
}

A
Andrei1-bKoviI
Inspiring
February 20, 2011

kglad, unless I am missing something, my drawLine function is 6 lines less (can be 8 less) than drawF.

In addition, drawF:

1. has 10 viriables declarations,

2. requires 6 attributes

3. makes at least 19 math calculations 5 of which are trigs (heavy)

4. Has Point instantiation in for loop (!!!!)

In comparison, drawLine function

1. declares only 2 variables (can be zero if these two are not parametarized)

2. Doesn't require attributes

3. does only 4 calculation with 1 trigonometry method,

4. has no instantiations

Based on the above I still believe my drawLine is much more efficient (and shorter).

Also, I tried to plug in drawF and it doesn't draw line between two clicked point - angle is way off.

kglad
kglad
Community Expert
February 19, 2011

you want the dotted line to be animated or just suddenly appear?


D
dhruba.omAuthor
Known Participant
February 20, 2011

I want multiple dotted line (animated)  on specific no. of points (say 10 points) if i click on the 1st one and then 2nd it draws a line from 1st to 2nd and then if I click 2nd(or any other given points) and then the next point it draws a new line(not removing the old one).  Thank you.

A
Andrei1-bKoviI
Inspiring
February 20, 2011

If lines shouldn't be removed - change onClick and drawLine functions to the following:

function onClick(e:MouseEvent):void {
     mousePositions.push(new Point(mouseX, mouseY));
     if (mousePositions.length > 1) {
          drawLine();
          mousePositions.shift();
     }
}

function drawLine():void {
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     lineGraphics.lineStyle(1, 0xff0000);
     lineGraphics.moveTo(0, 0);
     var dotDistance:Number = 2;
     var nextX:Number = dotDistance;
     while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
          lineGraphics.lineTo(nextX, 0);
          nextX += dotDistance;
          lineGraphics.moveTo(nextX, 0);
          nextX += dotDistance;
     }
     line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
     line.x = mousePositions[1].x;
     line.y = mousePositions[1].y;
}

If you want lines to be animated - it is possible but you need to specify what animation you need - lines going from one point to another, dots to be animated or something else. In any case it is a separate question and a new topic should be created.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices