获取2点之间的所有像素坐标

ske*_*rit 8 javascript math canvas html5-canvas

我想在一条直线上得到2个给定点之间的所有x,y坐标.虽然这看起来很简单,但我似乎无法理解它.

所以,例如:

  • 第1点:(10,5)
  • 第2点:(15,90)

Vic*_*ciu 11

编辑:以下解决方案仅适用于几何角度.在屏幕上绘图与理论几何不同,你应该倾听那些暗示Bresenham算法的人.


给出两点,并且知道线的等式y = m*x + b,m斜率和b截距在哪里,您可以计算m并将b方程应用于A点和B点之间的X轴的所有值:

var A = [10, 5];
var B = [15, 90];

function slope(a, b) {
    if (a[0] == b[0]) {
        return null;
    }

    return (b[1] - a[1]) / (b[0] - a[0]);
}

function intercept(point, slope) {
    if (slope === null) {
        // vertical line
        return point[0];
    }

    return point[1] - slope * point[0];
}

var m = slope(A, B);
var b = intercept(A, m);

var coordinates = [];
for (var x = A[0]; x <= B[0]; x++) {
    var y = m * x + b;
    coordinates.push([x, y]);
}

console.log(coordinates); // [[10, 5], [11, 22], [12, 39], [13, 56], [14, 73], [15, 90]]
Run Code Online (Sandbox Code Playgroud)


tun*_*ngd 3

给定 AB 中的点 A(10, 5) 和 B(15, 90) 以及 C(x, y),我们有:

(x - 10) / (y - 5) = (15 - 10) / (90 - 5)
Run Code Online (Sandbox Code Playgroud)

你可以做的就是从 x=10 迭代到 x=15 并计算相应的 y。由于 x 和 y 是整数,有时您必须对结果进行舍入(或跳过它)。