我想获取在一条直线上两个给定点之间的所有x,y坐标。
虽然这似乎是一项简单的任务,但我似乎无法理解它。
例如:
- 第一个点:(10,5)
- 第二个点:(15,90)
我想获取在一条直线上两个给定点之间的所有x,y坐标。
虽然这似乎是一项简单的任务,但我似乎无法理解它。
例如:
编辑:以下解决方案仅适用于几何学的角度。在屏幕上绘制与理论几何不同,您应该听取建议使用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]]
给定点A(10, 5)和B(15, 90),在AB线段上有C(x, y),我们有:
(x - 10) / (y - 5) = (15 - 10) / (90 - 5)
根据维基百科文章,这是我的JS代码,可以处理高线和低线:
const drawLine = (x0, y0, x1, y1) => {
const lineLow = (x0, y0, x1, y1) => {
const dx = x1 - x0
let dy = y1 - y0
let yi = 1
if (dy < 0) {
yi = -1
dy = -dy
}
let D = 2 * dy - dx
let y = y0
for (let x = x0; x < x1; x++) {
drawPoint(x, y)
if (D > 0) {
y = y + yi
D = D - 2 * dx
}
D = D + 2 * dy
}
}
const lineHigh = (x0, y0, x1, y1) => {
let dx = x1 - x0
const dy = y1 - y0
let xi = 1
if (dx < 0) {
xi = -1
dx = -dx
}
let D = 2 * dx - dy
let x = x0
for (let y = y0; y < y1; y++) {
drawPoint(x, y)
if (D > 0) {
x = x + xi
D = D - 2 * dy
}
D = D + 2 * dx
}
}
const { abs } = Math
if (abs(y1 - y0) < abs(x1 - x0)) {
if (x0 > x1) {
lineLow(x1, y1, x0, y0)
} else {
lineLow(x0, y0, x1, y1)
}
} else {
if (y0 > y1) {
lineHigh(x1, y1, x0, y0)
} else {
lineHigh(x0, y0, x1, y1)
}
}
}