绘制任意两个坐标之间2平行线在AS3舞台 [英] Draw 2 parallel lines between any 2 coordinates on the stage in AS3
问题描述
我是一个深化发展的Web应用程序中，插图/闪存基本上它的一个简单的版本。
所以足球教练员可以进行计划。
我做了不同的工具，如Photoshop中（行工具，矩形工具，..）。
所有这些工作。
I am developping a web application, basically its a simple version of Illustrator/Flash.
So soccer trainers can make schemes.
I made different tools like in Photoshop (line tool, rectangle tool, ..).
All of these work.
不过现在我需要开发工具，其中在用户可以得出一个双平行线。我想能够定义在在一个变量中的2条线之间的距离。 我需要绘制任意2点在舞台上的2条平行线。像行工具在Photoshop / Illustrator中，但它吸引2线一次。
However now i need to develop a tool where the user can draw a double parallel line. I would like to be able to define the distance between those 2 lines in a variable. I need to draw 2 parallel lines between any 2 points on the stage. Like the line tool in Photoshop/Illustrator , but it draws 2 lines at once.
它应该基本上像这样工作
1）上按下鼠标：
创建一个新的图形对象和寄存器X和Y在用户点击。开始监听鼠标移动。
2）鼠标移动：
清除图形对象，从原来的鼠标位置，以当前鼠标的位置画出双线。重绘的每个鼠标移动。
3）对小鼠起来：
停止监听事件和双行添加到舞台上。
It should basically work like this
1) on mouse down:
create a new graphics object and register the X and Y where the user clicked. start to listen for Mouse Move.
2) on mouse move:
clear the graphics object, draw the double line from the original mouse position to the current mouse position. redraw on every mouse move.
3) on mouse up:
stop listening for events and add the double line to the stage.
这工作完全绘制一条线，但我有麻烦与2平行线。它们不留彼此平行或旋转不能正常工作。
This worked perfectly for drawing a single line, but I'm having troubles with 2 parallel lines. They don't stay parallel to each other or the rotation doesn't work properly.
推荐答案
您将需要绘制的点是这样的：
You will need to plot the points this way:
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（...）命令一起给你：
Once you determine those 6 points (2 for the top-line, 2 for the mouse start and end, and 2 for the bottom-line), you can join the pair of points for the top-line and bottom-line together with a lineTo(...) command to give you this:
------------------------------------------------------------------------------
START END
------------------------------------------------------------------------------
要知道什么是你的起点和终点形成了目前的角度，你所需要的增量您点的X和Y值（两个值之间的差）。
To know what is the current angle formed by your START and END point, you need the deltas (difference between two values) of your point's X and Y values.
所以 X2 - X1 = DELTAX 和 Y2 - Y1 = DELTAY
然后，把在的增量Math.atan2（Y：数字x：号码）：数。返回的值是弧度，我相信，所以有度的工作，你可以将结果与乘法做转换的 180 / Math.PI
Then, put those deltas in Math.atan2(y:Number, x:Number):Number. The returned value is in radians I believe, so to work with degrees, you can do the conversion by multiplying the result with 180 / Math.PI.
这不会是真的有必要然而，正如我们可以弧度恢复计算的其余部分。这将是存储在一个变量上述值（180 / Math.PI）是有用的。
This won't be really necessary however, as we can resume the rest of the calculations in radians. It would be useful to store the above value (180/Math.PI) in a variable.
如果我们将继续与弧度，我们的90度转换为弧度是很重要的。
If we continue with Radians, it is important to convert our 90 degrees to Radians.
- 90 /弧度给我们提供了一些从我们的起点和终点，以抵消解决顶行
- -90 /弧度让我们有一些从我们的起点和终点，以抵消解决底线
- 90 / radians gives us a number to offset from our START and END point to solve the top line.
- -90 / radians gives us the number to offset from our START and END point to solve the bottom line.
换句话说...
这是一个整体的解决方案，我很快测试，如果它不能正常工作100％我道歉：
This is a whole solution that I quickly tested, I apologize if it doesn't work 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);
显然有一些变量，你将不得不更换/代替你自己的（如鼠标的位置，并为您的线路间隙分离值），但是这应该做的伎俩。
Obviously there's a few variables you will have to replace / substitute for your own (like the mouse locations and the separation value for your line gap), but this should do the trick.
一个运行的例子可以在这里找到：
A running example can be found here:
http://pierrechamberlain.ca/blog / 2012/08 /数学101平行线，两点/
这篇关于绘制任意两个坐标之间2平行线在AS3舞台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
