javascript - 稍微更改 Bresenham/midpoint circle 算法以获得更好的结果

Question

我确实有两种通过 bresenham/midpoint 算法创建实心圆的方法。但是第二种方式看起来比第一种方式好得多。

我想创建一个像第二个的结果，但是用第一个的方式一。我想用第一种方法来做，因为我需要一个正确的公式来计算距离，目前是这个公式:

function calcDistance (pos,pos2,range){
    var x1 = pos.hasOwnProperty('x') ? pos.x : pos[0],
        y1 = pos.hasOwnProperty('y') ? pos.y : pos[1],
        x2 = pos2.hasOwnProperty('x') ? pos2.x : pos2[0],
        y2 = pos2.hasOwnProperty('y') ? pos2.y : pos2[1];
    return Math.pow((x1-x2),2) + Math.pow((y1-y2),2) - Math.pow(range, 2)
};

这是 jsfiddle .第一种方法取自 wikipedia第二个来自here

Answer 1

当距离为 <= 0 时不绘制点, 距离为<= radius*radius*zoom时画点:

编辑:应用比例因子 (8.0/radius)

function drawCircle(x0, y0, radius){
  var range = radius*radius*zoom*(8.0/radius);    // calculate the range once
  for(var x = 0; x < imageWidth/zoom; x++){
    for(var y = 0; y < imageHeight/zoom; y++){
      if(calcDistance([x0,y0],[x*zoom,y*zoom],radius*zoom) <= range){
        context.fillRect(x*zoom,y*zoom,zoom,zoom);
      }
    }
  }
}