JS：遞歸地計算線的中點

我正在用座標工作的JS寫一個簡單的繪圖應用程序。我需要遞歸地找到兩個點的中點，以繪製一條線（A點和B點之間的中點，然後是三個結果點之間的兩個中點，依此類推）。有關更清晰的示例，請參見this GIF。JS：遞歸地計算線的中點

這是一個基於網格/座標的繪圖應用程序，所以只需繪製一條線是不可能的。有必要獲得點之間的所有座標。

我有一個發現中點

function findMidpoint(p1,p2){ 
    return Math.floor((p1+p2)/2); 
}

且繪製點（我還保存以前的點作爲prevX和prevY功能的功能

setPoint(X,Y);

所以我什麼如下繪製中點：

setPoint(findMidpoint(X,prevX),findMidpoint(Y,prevY));

下一組中點：

setPoint(findMidpoint(findMidpoint(X,prevX),prevX),findMidpoint(findMidpoint(Y,prevY),prevY)); 
setPoint(findMidpoint(X,findMidpoint(X,prevX)),findMidpoint(Y,findMidpoint(Y,prevY));

正如您所見，這會非常迅速地變得混亂。我想有一個遞歸的方式來做到這一點，或者某種方式循環它給定的時間，但我似乎無法弄清楚。任何幫助將不勝感激！

來源

2017-06-20 dhdz

你得到的是一條線。你爲什麼需要點？您需要指定中點操作應停止的結束條件。 –

這是一個基於網格/座標的繪圖應用程序，因此不可能簡單地繪製線條。有必要獲得點之間的所有座標。我遇到麻煩的是創建中點操作，因此不必手動完成。 – dhdz

只有當中點不同於左側或右側點時，纔可以計算中點並調用recusion。

function midpoint(a, b) { 
 
    return Math.floor((a + b)/2); 
 
} 
 

 
function drawPoints(p0, p1) { 
 
    var middle = [midpoint(p0[0], p1[0]), midpoint(p0[1], p1[1])]; 
 
    ctx.beginPath(); 
 
    ctx.fillRect(middle[0], middle[1], 1, 1); 
 
    ctx.closePath(); 
 
    if ((p0[0] !== middle[0] || p0[1] !== middle[1]) && (p1[0] !== middle[0] || p1[1] !== middle[1])) { 
 
     drawPoints(p0, middle); 
 
     drawPoints(middle, p1); 
 
    } 
 
} 
 

 
var ctx = document.getElementById("canvas").getContext("2d"); 
 

 
drawPoints([0,0], [600, 20]);

<canvas id="canvas" style="border-width: 0; display: block; padding: 0; margin: 0;" width="600" height="200"></canvas>

來源

2017-06-20 07:52:23

這工作很好。非常感謝！ – dhdz

  var points = []; 
      function findMid(x,y){ 
       var mid = parseInt((x+y)/2); 
       if(x!=mid && y!=mid){ 
        points.push(mid); 
        console.log("x:"+x+" y:"+y+" mid:"+mid); 
        findMid(x,mid); 
        findMid(y,mid); 
       }  
      } 
      initialPointX = 4; 
      initialPointY = 10; 
      console.log(findMid(initialPointX,initialPointY));

來源

2017-06-20 07:47:30

這爲我工作。謝謝 – imox

你的每個遞歸遞歸函數應該

創建A和B之間的中點，例如c
上（A，C）和（B，C）呼叫本身
如果停止A == B或A非常接近於乙

在代碼中，這將是這樣的：

function placeMidPoint(Ax, Ay, Bx, By) { 
    var e = 0; // some small number, if e==0 then you're stopping when A==B 
    if((Ax - Bx) < e && (Ay - By) < e) 
    return; 
    var Cx = findMidpoint(Ax, Bx); 
    var Cy = findMidpoint(Ay, By); 
    setPoint(Cx, Cy); 

    placeMidPoint(Ax, Ay, Cx, Cy); 
    placeMidPoint(Cx, Cy, Bx, By); 
}

來源

2017-06-20 07:48:20 vassiliskrikonis

JS：遞歸地計算線的中點

回答

相關問題