在 canvas 处画一条线

Question

目前我有这个代码：

sample.beginPath();
sample.moveTo(X1.x,Y1.x );
sample.lineTo(X2.x,Y2.y);
sample.stroke();

sample.beginPath();
sample.arc(X2.x, Y2.y, 4, 0, 2 * Math.PI, false);
sample.fill();
sample.lineWidth = 1;
sample.stroke();

这将创建这个：

这将指向任何方向。

我要的是这个：

注：

1.There will only be one line, either Line A or B.

2.They will always point from left to right.

3. They are in 45 degrees.

Answer 1

看看下图：

点(x1,y1)是鼠标的起点。假设鼠标已经移动到 right（当它向左移动时你必须处理这种情况），新的鼠标坐标将是 (x2,y2). 但是，我们不想在 (x1,y1) 和 (x2,y2) 之间画线，因为这条线的斜率（角度）不是我们想要的。因此，我们必须计算位于我们直线上的新点 P 的坐标。 注意：我假设这个点的 x 坐标等于新的鼠标 x 坐标 x2！

根据这个假设并借助一些基本的二维几何我们得到：

a = x2 - x1
tan(alpha) = b / a => b = a * tan(alpha)
P.x = x2

P.y坐标的值取决于鼠标从起始位置向上还是向下移动。

IF (y1 > y2)
    P.y = y1 - b // Mouse has moved up (drawing shows this scenario)
ELSE
    P.y = y1 + b // Mouse has moved down (not shown in the drawing)

所以我们有了一个新的点P，现在你可以简单地在(x1,y1)和P之间画一条线。你还必须处理一些特殊情况，比如如果鼠标移动到起点的左边会怎样.

为了得到你的P点，你也应该插入你想要的角度（它可以不同于45度，但它必须是一个正角 - 你可以推导出同样适用于负角的公式。

在 canvas 处画一条线

Draw a line at a canvas

line