Geek Answers Handbook

Draw 2 parallel lines between any 2 coordinates at the checkout in AS3

I am developing a web application, basically a simple version of Illustrator / Flash. Therefore, football coaches can create schemes.
I made various tools, for example, in Photoshop (line tool, rectangle tool, ..). All these work.

However, now I need to develop a tool in which the user can draw a double parallel line . I would like to be able to determine the distance between these two lines in a variable . I need to draw two parallel lines between any two points on the stage. Like a line tool in Photoshop / Illustrator, but it draws two lines at once.

Basically this should work

1) on the mouse down:

create a new graphic object and register X and Y where the user clicked. start listening to mouse movement.



<B> 2) when moving the mouse:

clear the graphic object, draw a double line from the original position of the mouse to the current position of the mouse. redraw at each mouse move.



<b> 3) on the mouse up:

stop listening to events and add a double line to the scene.

This worked fine for drawing a single line, but I have problems with two parallel lines. They do not stay parallel to each other or rotation does not work properly.

+1
1

:

90 degrees (UP from the START point)        90 degrees (UP from the END point)
|                                                                            |
START- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - END
|                                                                            |
90 degrees (DOWN from the START point)    90 degrees (DOWN from the END point)

6 (2 , 2 2 ), lineTo (...), :

------------------------------------------------------------------------------

START                                                                      END

------------------------------------------------------------------------------

, , START END, ( ) X Y.

So X2 - X1 = DeltaX Y2 - Y1 = DeltaY.

Math.atan2(y:Number, x:Number):Number. , , , 180/Math.PI.

, . (180/Math.PI) .

, 90 .

  • 90/radians , START END .
  • -90/radians , START END, .

...

, , , 100%:

var startPoint:Point = new Point(10, 0); //Replace by start-mouse location
var endPoint:Point = new Point(20, 0); //Replace by end-mouse location

var mouseAngle:Number = Math.atan2( endPoint.y - startPoint.y, endPoint.x - startPoint.x );

var angle:Number;
var lineHalfGap:Number = 100 * .5; //Replace 100 by your seperation value
var radians:Number = 180 / Math.PI;
angle = 90 / radians + mouseAngle;
var topOffsetX:Number = Math.cos( angle ) * lineHalfGap;
var topOffsetY:Number = Math.sin( angle ) * lineHalfGap;
angle = -90 / radians + mouseAngle;
var bottomOffsetX:Number = Math.cos( angle ) * lineHalfGap;
var bottomOffsetY:Number = Math.sin( angle ) * lineHalfGap;

var topStart:Point = new Point(startPoint.x + topOffsetX, startPoint.y + topOffsetY);
var topEnd:Point = new Point(endPoint.x + topOffsetX, endPoint.y + topOffsetY);

var bottomStart:Point = new Point(startPoint.x + bottomOffsetX, startPoint.y + bottomOffsetY);
var bottomEnd:Point = new Point(endPoint.x + bottomOffsetX, endPoint.y + bottomOffsetY);

trace(topStart, topEnd, bottomStart, bottomEnd);

, , / (, ), .

:

http://pierrechamberlain.ca/blog/2012/08/math-101-parallel-lines-two-points/

+2

More articles:


All Articles