让 Bresenham 的算法继续循环

Question

像这样（不准确）

如何更改 Bresenham 线算法以保持循环进入自身并创建此效果： (绘图不准确)

我有2个坐标的基本线：

drawBresenhamLine = function (x0, y0, x1, y1) {

    var dx, dy, e2, err, sx, sy;
    console.log('Called LBR : ' + x0 + ',' + y0 + '->' + x1 + ',' + y1);
    dx = Math.abs(x1 - x0);
    sx = x0 < x1 ? 1 : -1;
    dy = Math.abs(y1 - y0);
    sy = y0 < y1 ? 1 : -1;
    err = (dx > dy ? dx : -dy) / 2;
    while (true) {
        //console.log('Push : '+x0 +' ,'+ y0);
        setPixel(x0, y0);
        setEnd(x1,y1);
        if (x0 === x1 && y0 === y1) {
            break;
        }
        e2 = err;
        if (e2 > -dx) {
            err -= dy;
            x0 += sx;

        }
        if (e2 < dy) {
            err += dx;
            y0 += sy;

        }

    }

    return null;
};

setPixel(x,y) 更改当前像素，drawBresenhamLine 将在下一次迭代中使用其坐标。

Answer 1

// Bresenham 直线算法试试这个零售功能：

function drawLine(x0, y0, x1, y1) {
  var dx = Math.abs(x1 - x0),
      sx = x0 < x1 ? 1 : -1,
      dy = Math.abs(y1 - y0),
      sy = y0 < y1 ? 1 : -1,
      err = dx > dy ? dx : -dy;

  while (x0 != x1 || y0 != y1) {
      setPixel(x0, y0);
      var e2 = err;
      if (e2 > -dx * 2) {
          err -= dy;
          x0 += sx;
     }
     if (e2 < dy * 2) {
         err += dx;
         y0 += sy;
    }
  }
}

使用 canvas 作为测试问题，问候 ;)。

https://codepen.io/anon/pen/qPXOrJ

Answer 2

假设您有两个变量定义 canvas 的大小：canvasWidth 和 canvasHeight。每当您增加 x 或 y 时，只需针对这些变量进行测试：

if (e2 > -dx) {
    err -= dy;
    x0 += sx;

    // check against sides of canvas:
    if(x0 >= canvasWidth)
       x0 = 0;
    else if(x0 < 0)
       x0 = canvasWidth - 1;
}
if (e2 < dy) {
    err += dx;
    y0 += sy;

    // check against top and bottom of canvas:
    if(y0 >= canvasHeight)
       y0 = 0;
    else if(y0 < 0)
       y0 = canvasHeight - 1;
}

这假定最小 x 和 y 值为 0。如果不是，那么您可以定义一个最小和最大 x 和 y 来定义您的 canvas 范围并针对这些进行测试。

让 Bresenham 的算法继续循环

Make Bresenham's Algorithm keep cycling

javascript

algorithm

pixel

bresenham