1

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

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

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

2) 鼠标移动：
清除图形对象，从原来的鼠标位置画双线到当前的鼠标位置。在每次鼠标移动时重绘。

3) 鼠标向上：
停止监听事件并将双线添加到舞台。

这非常适合绘制一条线，但我遇到了两条平行线的问题。它们彼此不平行，或者旋转无法正常工作。

4

1 回答 1

2

您将需要以这种方式绘制点：

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) 存储在变量中会很有用。

如果我们继续使用弧度，将 90 度转换为弧度很重要。

  • 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/

于 2012-08-03T13:44:46.267 回答