javascript - JS:递归计算线的中点

我正在用JS编写一个可与​​坐标一起使用的简单绘图应用程序。为了绘制一条线，我需要递归找到两个点的中点（点A和B之间的中点，然后是三个结果点之间的两个中点，依此类推）。有关更清晰的示例，请参见this GIF。

这是一个基于网格/坐标的绘图应用程序，因此无法简单地绘制一条线。必须获取点之间的所有坐标。

我有一个找到中点的函数

function findMidpoint(p1,p2){
    return Math.floor((p1+p2)/2);
}

还有一个绘制点的函数（我还将先前的点存储为prevX和prevY

setPoint(X,Y);

所以我在画中点的方法如下：

setPoint(findMidpoint(X,prevX),findMidpoint(Y,prevY));

下一组中点：

setPoint(findMidpoint(findMidpoint(X,prevX),prevX),findMidpoint(findMidpoint(Y,prevY),prevY));
setPoint(findMidpoint(X,findMidpoint(X,prevX)),findMidpoint(Y,findMidpoint(Y,prevY));

如您所见，这变得非常混乱。我猜有一种递归的方法可以执行此操作，或者以某种方式将其循环执行给定的时间，但是我似乎无法弄清楚。任何帮助将不胜感激！

最佳答案

仅当中点与左或右点之一不同时，您才可以计算中点并调用回拨。

function midpoint(a, b) {
    return Math.floor((a + b) / 2);
}

function drawPoints(p0, p1) {
    var middle = [midpoint(p0[0], p1[0]), midpoint(p0[1], p1[1])];
    ctx.beginPath();
    ctx.fillRect(middle[0], middle[1], 1, 1);
    ctx.closePath();
    if ((p0[0] !== middle[0] || p0[1] !== middle[1]) && (p1[0] !== middle[0] || p1[1] !== middle[1])) {
        drawPoints(p0, middle);
        drawPoints(middle, p1);
    }
}

var ctx = document.getElementById("canvas").getContext("2d");

drawPoints([0,0], [600, 20]);

<canvas id="canvas" style="border-width: 0; display: block; padding: 0; margin: 0;" width="600" height="200"></canvas>

关于javascript - JS:递归计算线的中点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44646035/