生成两组像素坐标（x，y）之间的路径

Question

我有两组xy坐标，开始和结束。起点是我想离开的地方，终点是目的地。

目标是在两个坐标之间生成xy对象的数组，可以对其进行迭代以生成到目标的平滑，非跳跃的路径，如下所示。

我已经阅读完Bezier曲线，但是我一直在努力使实现可视化，并想知道是否有更简单的方法来解决上述问题？

Answer 1

您有两组点，因此一条直线可以插入其中。在这种情况下，您可以使用直线方程：y = mx + b;其中m是斜率，b是y截距。

const coord1 = [2, 5];
const coord2 = [4, 7];

function generatePath(arr1, arr2) {
    const m = (arr2[1] - arr1[1]) / (arr2[0] - arr1[0]);
    const b = arr1[1] - m*arr1[0];
    let lineArray = [];

    for(let x=arr1[0]; x<arr2[0]; x++) {
        let y = m*x + b;
        lineArray.push([x,y]);
    }

    return lineArray;
}