线条绘制不正确

Question

所以当我找到 Bresenham 算法时，我四处寻找直线算法。我决定制作它的代码版本，并且在大多数情况下，它都有效。但是，当我想画一个正方形的时候，我运行陷入了困境。它不会画一条线。这是我的代码（我应该提到我正在使用 p5.js）：

function drline(xs, ys, xe, ye) {
 if(xs == xe && ys == ye){
   point(xs, ys);
 } else {
   var df = (ye - ys) / (xe - xs);
   var lf = 0;
   var tf = 0;
   var is = 0;
   for(var i = xs; i <= xe; i++){
     tf = i - xs;
     lf = df * tf;
     is = lf+ys;
     console.log("X: " + i + ", Y: " + is);
     point(i, is);
   }
 }
}

function init(){
  createCanvas(700, 600);
  background(80);
  stroke(100, 200, 255);

}

function setup(){
 init();
 drline(300, 100, 400, 100);
 drline(300,200, 400, 200);
 drline(300, 100, 300, 200);
}

我还注意到控制台上的最后一个值是 X：300，Y：NaN。抱歉，这听起来有点笨拙，但我不确定问题出在哪里。先感谢您！ :)

Answer 1

你有一个 "Divide By Zero" 错误。

在你的最后一行：

 drline(300, 100, 300, 200);
        ^xs       ^xe

我假设 xs = xStart，xe = xEnd

在这条线上，您正在尝试计算角度...但是如果 xs 和 xe 相等，您最终会得到 0（零）分母。

 var df = (ye - ys) / (xe - xs);

因此你会得到一个 NaN 因为它不是一个可能的计算。

您需要在您的逻辑中添加一个特殊条件 if((xe - xs) == 0){...}（例如没有运行或 "undefined" 斜率的垂直上升）并相应地处理它。

线条绘制不正确

Line not drawing properly

javascript

bresenham

p5.js