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

[dhruba.om]

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........

[kglad]

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

[dhruba.om]

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.

[Andrei1-bKoviI]

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.

[Andrei1-bKoviI · Accepted solution]

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]

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);
        }
    }
}

[Andrei1-bKoviI]

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.

[dhruba.om]

you have done a great job..........Thank you..........

[Andrei1-bKoviI]

Actually, because of the dotted lines AND if you compile for Flash 10, the best way to deal with it is to use BitmapData to fill the line. This way it is cleaner and makes line animations easier.

Here is now it is done:

var line:Shape;
var lineGraphics:Graphics;
var mousePositions:Array = [];
var conversion:Number = 180 / Math.PI;     
var lineBitmapData:BitmapData;
var lineThickness:Number = 3;

init();

function init():void {
     drawBackground();
     makeLineFiller();
     stage.addEventListener(MouseEvent.CLICK, onClick);
}

function makeLineFiller():void {
     var dotWidth:Number = 2;
     var dotGap:Number = 2;
     var lineFiller:Shape = new Shape();
     var g:Graphics = lineFiller.graphics;
     g.beginFill(0xff0000);
     g.drawRect(0, 0, dotWidth, lineThickness);
     g.beginFill(0x00ff00);
     g.drawRect(dotWidth, 0, dotGap, lineThickness);
     g.endFill();
     lineBitmapData = new BitmapData(dotWidth + dotGap, lineThickness, true);
     lineBitmapData.draw(lineFiller);
}

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

function removeLine():void {
     lineGraphics.clear();
     line.rotation = 0;
}

function drawLine():void {
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     lineGraphics.lineStyle(lineThickness);
     lineGraphics.lineBitmapStyle(lineBitmapData, null, true, true);
     lineGraphics.moveTo(0, 0);
     lineGraphics.lineTo(Point.distance(mousePositions[0], mousePositions[1]), 0);
     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);
}

[dhruba.om]

thank u........... but I need something else ; please help me to  simulate cables and connecting port on which student can connect cables and it   gives whether the connection is wrong or right. I have find an   example(but not the code)  see the link below.........I  need similer like this. I am able to make a cable class witch need two  input ( new cable(object1,object2)  ) and it draws similer cable like  the below example. How to use it for my problem.  Please help  me..............

http://lab.andre-michelle.com/cable-interface

[Andrei1-bKoviI]

This is a separate question. You should create a new topic.

This is not easy task and forum is not a right place to get all the help. I guess one thing you really need is an AS3 physics engine and, perhaps, BitmapData manipulations.

Search Google - there are several physics engines available.

[dhruba.om]

I have already created a class for the cable. It needs two input object for the 1st position and 2nd position (new cable(obj1,obj2)); But i am not able to find the logic how i connect and disconnect by clicking.

[Andrei1-bKoviI]

Again, you should create a new forum discussion.

[dhruba.om]

Ok ..........Thanks for your kind help

[Andrei1-bKoviI]

Here is drawLine function that utilizes Matrix and, thus, there is no need to rotate line (again, this works with BitmapData filler and Flash 10):

function drawLine():void {
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     lineGraphics.lineStyle(lineThickness);
     var matrix:Matrix = new Matrix();
     matrix.rotate(Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x));
     lineGraphics.lineBitmapStyle(lineBitmapData, matrix, true, true);
     lineGraphics.moveTo(mousePositions[0].x, mousePositions[0].y);
     lineGraphics.lineTo(mousePositions[1].x, mousePositions[1].y);
}

For the future, when you will implement animation - Matrix is the way to go.

[dhruba.om]

Thank you very much . It works......