Javascript中點畫線算法

Question

我正在使用中點算法線圖在 javascript 中繪制一條線。 當該線處於下降軌跡時，它會計算錯誤的值。 有人可以幫助我嗎？

數據輸入 //中線(1,6,8,4);

function midline(x0, y0, x1, y1) {
  /* Using midpoint algorithm for lines. */
  const dx = x1 - x0;
  const dy = y1 - y0;
  var d = 2 * dy - dx;
  const incrE = 2 * dy;
  const incrNE = 2 * (dy - dx);
  var x = x0;
  var y = y0;

  var output = [];

  //listeners
  console.log("dy = ", dy, "dx = ", dx);
  console.log("d = ", d);
  console.log("incrE = ", incrE);
  console.log("incrNE = ", incrNE);
  console.log("----------------------------------");

  while (x <= x1) {
    // if not the last x
    console.log("x = ", x, " y = ", y);
    output.push([x,y]);


    if (d <= 0) {
      console.log("E");

      d = d + incrE;
      x++;
    } else {
      console.log("NE");

      d = d + incrNE;
      x++;
      y++;
    }
  }
  console.table(output);
}

Answer 1

如果根據我的評論中點線繪制算法僅適用於第一象限，那就是......

 x0 < x1 and y0 < y1

...必須成立，如果 x1 < x0 或 y1 < y0，則需要進行調整。

以 (1,6) - (8,4) 的情況為例，這是一個向下的斜率，因為 y1 < y0 （即 4 < 6 ）。 為了使其成為中點線繪制算法的可行案例，您可以簡單地否定 y 值，在這種情況下 y0 < y1 將成立。 當然，在捕獲結果時，需要再次乘以-1 來調整值。 因此，建議在使用 x0、y0、x1 和 y1 之前插入以下內容...

let xReflect = 1;
if ( x1 < x0 ) {
    x0 = -x0;
    x1 = -x1;
    xReflect = -1;
}

let yReflect = 1;
if ( y1 < y0 ) {
    y0 = -y0;
    y1 = -y1;
    yReflect = -1;
}

...然后，將輸出推送到數組時，您需要執行以下操作...

output.push( [ x * xReflect, y * yReflect ] );

希望這可以幫助。