线未正确绘制

时间:2018-06-15 13:32:16

标签: javascript p5.js bresenham

所以当我找到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。对不起,如果这听起来有点不错,但我不确定是什么问题。先感谢您! :)

1 个答案:

答案 0 :(得分:1)

您有“除以零”错误。

在你的最后一行:

 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){...}中添加一个特殊条件(例如,没有运行的垂直上升或“未定义”斜率),并相应地处理。