0

ブレセンハム/ミッドポイント アルゴリズムを使用して塗りつぶされた円を作成する方法は 2 つあります。しかし、2 番目の方法は最初の方法よりもはるかに優れています。

ブレゼンハム/ミッドポイント

2 番目のような結果を作成したいのですが、1 番目の方法を使用します。現時点ではこれである距離を計算するための正しい式が必要なので、最初の方法でそれを行いたいです:

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があります。最初のアプローチはウィキペディアから取られました 2番目はここから

4

1 に答える 1

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);
      }
    }
  }
}
于 2016-04-28T00:01:48.823 に答える