我的代碼中的錯誤在哪裏？

-3

我試圖在畫布上創建不同半徑的三個點，它們不會相互接觸或重疊。我正在爲圈子使用Jquery和Raphael。但是，當我運行該程序時，它們有時會重疊/觸摸，但我無法在代碼中找到邏輯錯誤。我的代碼中的錯誤在哪裏？

$(document).ready(function() { 

    var canvasx = 1450; 
    var canvasy = 743; 
    var paper = Raphael(0, 0, canvasx, canvasy); 
    var circles = new Array; 
    var colorarray = new Array("black", "red", "blue"); 
    var circleoffsetx = canvasx/4; 
    var circleoffsety = canvasy/4; 
    var iterations = 3; 
    var circleoverlap = false; 
    for (var i = 0; i < iterations; i++) { 
     var circlecolor = colorarray[Math.floor(Math.random() * colorarray.length)]; 
     var circlex = Math.floor((Math.random() * canvasx/2) + circleoffsetx); 
     var circley = Math.floor((Math.random() * canvasy/2) + circleoffsety); 
     var circleradius = Math.floor((Math.random() * 75) + 25); 
     if (circles.length > 0) { 
      for (var j = 0; j < circles.length; j++) { 
       var allcirclex = circles[j[0]]; 
       var allcircley = circles[j[1]]; 
       var allcircleradius = circles[j[2]]; 
       var radiussum = circleradius + allcircleradius; 
       if (Math.abs(circlex - allcirclex) <= radiussum || Math.abs(circley - allcircley) <= radiussum) { 
        iterations++; 
        circleoverlap = true; 
        console.log("OVERLAP"); 
        break; 

       } 
      } 
      if (circleoverlap === false) { 
       circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3})); 
       circles[i] = [circlex, circley, circleradius]; 
       console.log("NO OVERLAP"); 
      } 
     } 
     if (circles.length < 1) { 
      circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3})); 
      circles[i] = [circlex, circley, circleradius]; 
     } 
     console.log(circles[0]); 
    } 
});

所以我創建一個圓，它保存的X，Y，在二維陣列（圓）半徑，然後想看看新的圈子會觸及/重疊現有的通過，如果距離看到在圓x，y之間小於或等於半徑之和。但再一次，它似乎並不奏效。我也是console.logging，如果它們重疊或不重疊（OVERLAP vs NO OVERLAP）並且它總是記錄NO OVERLAP。

來源

2016-12-21 AustriaNotAustralia

這裏是固定的腳本：

$(document).ready(function() { 

    var canvasW = 1450; 
    var canvasH = 743; 
    var paper = Raphael(0, 0, canvasW, canvasH); 

    var circles = new Array(); 
    var colorArray = new Array("black", "red", "blue"); 

    var circleOffsetX = canvasW/4; 
    var circleOffsetY = canvasH/4; 
    var iterations = 3; 
    var circleOverlap; 

    // keep creating circles until done 
    while (circles.length < iterations) { 
    var circleColor = colorArray[Math.floor(Math.random() * colorArray.length)]; 
    var circleX = Math.floor((Math.random() * canvasW/2) + circleOffsetX); 
    var circleY = Math.floor((Math.random() * canvasH/2) + circleOffsetY); 
    var circleR = Math.floor((Math.random() * 75) + 25); 
    circleOverlap = false; // assume new circle doesn't overlap existing ones 
    // test against existing circles 
    for (var j = 0; j < circles.length; j++) { 
     var dx = circles[j].x - circleX; 
     var dy = circles[j].y - circleY; 
     if (Math.sqrt(dx*dx + dy*dy) <= circleR + circles[j].r + 3) { 
     circleOverlap = true; 
     break; 
     } 
    } 
    // no overlap? then add to array 
    if (!circleOverlap) circles.push({ x: circleX, y: circleY, r: circleR, c: circleColor }); 
    } 
    // create Raphael circles based on array data 
    for (var i = 0; i < circles.length; i++) { 
    circles[i] = paper.circle(circles[i].x, circles[i].y, circles[i].r).attr({ 
     "stroke": circles[i].c, 
     "stroke-width": 3 
    }); 
    } 
});

我改變了一些東西，應該是不言自明，但。

來源

2016-12-21 01:06:15

男人，你的解決方案更有意義。我怎麼能學會這樣想？它 – AustriaNotAustralia

別擔心，我花了很長時間才能到達那裏：D所有你需要的是練習。 –

你的公式兩點之間的距離是非常錯誤的。如果你有一個點（X1，Y1）和一個點（X2，Y2），它們之間的距離是sqrt（（x2 - x1）^ 2 +（y2 - y1）^ 2）。這是您需要與radius1 + radius2比較的值。

你也無法正確讀取任何從你的圈子陣列的價值觀 - 你應該使用circles[j][0]，而不是circles[j[0]]它總是會返回undefined因爲j是不是數組等f] [0]是不確定的。

來源

2016-12-21 00:56:45 PMV

我的代碼中的錯誤在哪裏？

回答

相關問題