问题描述
我需要一个快速算法，用于计算坐标的两个点之间的线。我试图找到好的JavaScript的布氏实现，但是有太多的和相当混乱的出版物。在维基百科 - 这里最快和最简单的形式（无师和误差计算两个方向）是presented伪code是这样的：
功能线（X0，Y0，X1，Y1）
DX：= ABS（X1-X0）
邓亚萍：= ABS（Y1-Y0）
如果X0＆LT; X1则SX：= 1，否则SX：= -1
如果Y0＆LT;那么Y1 SY：= 1，否则SY：= -1
错误：= DX-DY
循环
与setPixel（X0，Y0）
如果X0 = X1和Y0 = Y1出口环
E2：= 2 * ERR
如果E2＆GT; -dy然后
错误：= ERR - DY
X0：= X + SX
如果E2＆LT; DX然后
错误：= ERR + DX
Y0：= Y0 + SY
结束循环
你知道一个简单而强大的JavaScript布氏实现基于这种伪code？
修改
谢谢大家！这是我在最后附带：
函数calcStraightLine（startCoordinates，endCoordinates）{
VAR coordinatesArray =新的Array（）;
//转换坐标
VAR X1 = startCoordinates.left;
VAR Y1 = startCoordinates.top;
VAR X2 = endCoordinates.left;
VAR Y2 = endCoordinates.top;
//定义差异和错误检查
变种DX = Math.abs（X2 - X1）;
变种DY = Math.abs（Y2 - Y1）;
VAR SX =（X1＆LT; X2）？ 1：-1;
VAR SY =（Y＆LT; Y2）？ 1：-1;
VAR ERR = DX - DY;
//设置第一个坐标
coordinatesArray.push（新坐标（Y1，X1））;
//主回路
而（（（X1 ==×2）及！及（Y1 == Y2）））{
VAR E2 = ERR＆LT;＆LT; 1;
如果（E2＆GT; -dy）{
ERR - = DY;
X1 + = SX;
}
如果（E2＆LT; DX）{
ERR + = DX;
Y1 + = SY;
}
//设置坐标
coordinatesArray.push（新坐标（Y1，X1））;
}
//返回结果
返回coordinatesArray;
}
重写你提供的伪code为JavaScript：
功能线（X0，Y0，X1，Y1）{
变种DX = Math.abs（X1-X0）;
变种DY = Math.abs（Y1-Y0）;
VAR SX =（X0＆LT; X1）？ 1：-1;
VAR SY =（Y0＆LT; Y1）？ 1：-1;
VAR ERR = DX-DY;
而（真）{
与setPixel（X0，Y0）; //做你需要为这个
如果（（X0 == X1）及及（Y0 == Y1））打破;
VAR E2 = 2 *走错了路。
如果（E2＆GT; -dy）{ERR - = DY; X0 + = SX; }
如果（E2＆LT; DX）{ERR + = DX; Y0 + = SY; }
}
}
请注意，当你一步直接比较彩车可能会失败（尽管它应该由整数金额步进的时候不是，它可能如果任一终点是非整数），所以不是直接比较的终点，你可能想使用一个小量：
如果（Math.abs（X0-X1）和0.0001＆安培;＆安培; Math.abs（Y0，Y1）和0.0001）突破;
这必然会耽误你，但是，所以只能这样做，如果你正在处理的非整数。
I need a fast algorithm for calculating coordinates for a line between two points. I tried to find good JavaScript Bresenham implementation, but there are too many and quite confusing publications. In wikipedia - here the fastest and most simple form (no divisions and error calculation for both directions) is presented in pseudocode like this:
function line(x0, y0, x1, y1)
dx := abs(x1-x0)
dy := abs(y1-y0)
if x0 < x1 then sx := 1 else sx := -1
if y0 < y1 then sy := 1 else sy := -1
err := dx-dy
loop
setPixel(x0,y0)
if x0 = x1 and y0 = y1 exit loop
e2 := 2*err
if e2 > -dy then
err := err - dy
x0 := x0 + sx
if e2 < dx then
err := err + dx
y0 := y0 + sy
end loop
Do you know of a simple and robust JavaScript Bresenham implementation based on this pseudocode?
EDIT
Thanks everybody! This is what I came with at the end:
function calcStraightLine (startCoordinates, endCoordinates) {
var coordinatesArray = new Array();
// Translate coordinates
var x1 = startCoordinates.left;
var y1 = startCoordinates.top;
var x2 = endCoordinates.left;
var y2 = endCoordinates.top;
// Define differences and error check
var dx = Math.abs(x2 - x1);
var dy = Math.abs(y2 - y1);
var sx = (x1 < x2) ? 1 : -1;
var sy = (y1 < y2) ? 1 : -1;
var err = dx - dy;
// Set first coordinates
coordinatesArray.push(new Coordinates(y1, x1));
// Main loop
while (!((x1 == x2) && (y1 == y2))) {
var e2 = err << 1;
if (e2 > -dy) {
err -= dy;
x1 += sx;
}
if (e2 < dx) {
err += dx;
y1 += sy;
}
// Set coordinates
coordinatesArray.push(new Coordinates(y1, x1));
}
// Return the result
return coordinatesArray;
}
Rewriting your supplied pseudo-code into JavaScript:
function line(x0, y0, x1, y1){
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){
setPixel(x0,y0); // Do what you need to for this
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy){ err -= dy; x0 += sx; }
if (e2 < dx){ err += dx; y0 += sy; }
}
}
Note that comparing floats directly may fail as you step (though it shouldn't when stepping by integer amounts, it might if either end point is non-integer), so instead of directly comparing the end points you might want to use an epsilon:
if (Math.abs(x0-x1)<0.0001 && Math.abs(y0-y1)<0.0001) break;
This will necessarily slow you down, however, so only do this if you are dealing with non-integers.
这篇关于布氏算法在Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！