从点 (x, y) 以给定角度在边界内画一条线

Question

我正在尝试在 JavaScript canvas 上画一条线。我有两个点A和B（如图所示）。

我使用这段代码求出这两点之间的角度：

// p1 is point A and p2 is point B    
var theta = Math.atan2(p2.y - p1.y, p2.x - p1.x);

现在我想从A点画一条线到canvas的终点，我还想得到线的终点（图中的C点）。

这可以使用 canvas 的角度和大小（宽度和高度）来实现吗？

Answer 1

您的示例计算极角（不是两点之间的角度 - 这是不可能的）。要计算延伸线接触 canvas 的位置，请计算 P1 和 canvas 底部之间的 Y 差 (dY)，使用角度的 atan 来计算 dX。如果 P1.x + dX 小于您的 canvas 宽度，则该线在 cut.X = P1.x + dX 处到达底部。如果它更大，它会击中右侧。要获得它命中的 Y 值，请考虑由 canvas 的右侧部分在延伸线与右侧相交的点和线将与（水平）相交的点下方形成的小三角形canvas 的扩展）底部。 Y 部分是 cut.X -canvas.width * atan(90-angle).

可能你要确定，延长线在哪个方向延长。

更简单的解决方案：由于 JavaScript 在 canvas 边界处单独绘制剪辑，您可以将线延长很长（即按 canvas 对角线长度的大小），这样就完成了。

Answer 2

不用三角函数也可以解决这个问题。首先构造给定AB射线的参数表示：

 x = A.X + dx * t
 y = A.Y + dy * t
   where
 dx = B.X - A.X
 dy = B.Y - A.Y

检查哪条边将首先相交（t 值较小）：

//potential border positions    
if dx > 0 then
   ex = width
else
   ex = 0

if dy > 0 then
   ey = height
else
   ey = 0

//check for horizontal/vertical lines 
if dx = 0 then
    return cx = A.X,  cy = ey

if dy = 0 then
    return cy = A.Y,  cx = ex


//in general case find parameters of intersection with horizontal and vertical edge
tx = (ex - A.X) / dx
ty = (ey - A.Y) / dy

//and get intersection for smaller parameter value
if tx <= ty then
   cx = ex
   cy = A.Y + tx * dy
else
   cy = ey
   cx = A.X + ty * dx

return cx, cy

宽度 = 400、高度 = 300、固定 A 点和各种 B 点的结果：

100:100 - 150:100   400: 100
100:100 - 150:150   300: 300
100:100 - 100:150   100: 300
100:100 - 50:150     0: 200
100:100 - 50:100     0: 100
100:100 - 50:50     0:   0
100:100 - 100:50   100:   0
100:100 - 150:50   200:   0

从点 (x, y) 以给定角度在边界内画一条线

Drawing a line within boundaries from point (x, y) with a given angle

javascript

math

trigonometry

canvas

angle