Question

我正在开发一个Web应用程序，基本上它是一个简单的Illustrator / Flash版本。所以足球训练师可以制定计划我在Photoshop中使用了不同的工具（线条工具，矩形工具，......）。所有这些工作。

但是现在我需要开发一个工具，其中用户可以绘制双平行线。我希望能够在变量中定义这两行之间的距离。我需要在舞台上任意两点之间绘制2条平行线。与Photoshop / Illustrator中的线条工具一样，但它一次绘制2条线。

基本上应该像这样工作
鼠标按下时 1）：
创建一个新的图形对象并注册用户单击的X和Y.开始听老鼠移动。

2）鼠标移动：
清除图形对象，从原始鼠标位置绘制双线到当前鼠标位置。每次鼠标移动都会重绘。

3）鼠标上移：
停止收听事件并在舞台上添加双线。

这对于绘制一条线非常有效，但我遇到了2条平行线的麻烦。它们不会彼此平行或旋转不能正常工作。

Answer 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值的增量（两个值之间的差值）。

所以 X2 - X1 = DeltaX ， Y2 - Y1 = DeltaY 。

然后，将这些增量放在Math.atan2(y:Number, x:Number):Number中。我相信返回的值是以弧度为单位，因此要使用度数，您可以通过将结果乘以 180 / Math.PI 来进行转换。

然而，这并不是必需的，因为我们可以用弧度恢复其余的计算。将上述值（180 / Math.PI）存储在变量中会很有用。

如果我们继续使用Radians，将90度转换为Radians非常重要。

90 /弧度为我们提供一个数字，以抵消我们的START和END点，以解决第一行。
-90 /弧度为我们提供了偏离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/

在AS3中的舞台上的任意2个坐标之间绘制2条平行线

1 个答案: