获取平面中线交点的坐标

Question

我有一个带有这个参数的画布： width = 400, height = 400

有一条线以Q 的角度（以度为单位）通过点cursor[x1,y1]

我需要获取平面中线交点的所有坐标并将其写入数组。现在我使用这个等式：y - y1 = k * (x - x1)

要检查所有点，我使用此代码：

var rad = Q * Math.PI/180;

for (ctrY = 0; ctrY < 400; ctrY += 1) {
    for (ctrX = 0; ctrX < 400; ctrX += 1) {

        if ( (ctrY - cursor.y) ===
              ~~(Math.tan(rad) * (ctrX - cursor.x)) ) {

            z.push([ctrX, ctrY]);
        }

    }
}

例如当 0

我哪里错了？也许有更方便的算法？

附：对不起我的英语

Answer 1

看来你需要线光栅算法。考虑Bresenham algorithm。

你也可以看看DDA算法

Answer 2

我想像这样的算法。 （我只考虑 0 x2 和y2 成为线与Ox 和Oy 相交的值。我们要计算这些值。我们现在有一个具有 2 个未知变量（x2 和 y2）的系统：Math.tan(rad) = (y1 -y2)/x1 和 Math.tan(rad) = y1/(x1-x2)。我们可以通过在坐标系上画线并分析一下来推导出这些方程。如果我们求解方程组，我们会发现类似：x2 = (x1*y1 -x1 * x1 * Math.tan(rad)/(2 * y1-x1)) 和 y2= y1- x1 * Math.tan(rad)（这些需要验证，我没有仔细检查我的微积分）。线性方程可以由公式y = a*x + b 定义，在我们的例子中是a = x2 和b = y2。然后我们可以这样计算点数：

for (xIdx = 0; xIdx < 400; xIdx += 1) {
    var ctrX = xIdx;
    var ctrY = x2 * ctrX + y2 //todo: replace with the respective calculated variables x2 and y2(we could also define two functions in js) and proper rounding
    z.push([ctrX, ctrY]);
}

我不确定我是否 100% 准确，但我希望你能理解我的想法。