我的代码中的错误在哪里？

-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

我的代码中的错误在哪里？

回答

相关问题