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

Question

我正在尝试在 canvas 上创建三个不同半径的点，它们不会相互接触或重叠。我使用 Jquery 和 Raphael 作为圆圈。然而，当我运行程序时，他们有时会 overlap/touch，但我在我的代码中找不到逻辑错误。

$(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、半径保存在二维数组（圆）中，然后尝试通过查看距离是否 touch/overlap 来查看新圆是否会 touch/overlap圆之间的 x,y 小于或等于半径之和。但是再一次，它似乎不起作用。我也是 console.logging 如果它们重叠或不重叠（OVERLAP 与 NO OVERLAP）并且它总是记录 NO OVERLAP。

Answer 1

你计算两点之间距离的公式非常错误。

如果你有一个点 (X1, Y1) 和一个点 (X2, Y2)，它们之间的距离是 sqrt((x2 - x1)^2 + (y2 - y1)^2)。这是您需要与 radius1 + radius2 进行比较的值。

您也没有正确读取 circles 数组中的任何值 - 您应该使用 circles[j][0] 而不是 circles[j[0]]，它总是会 return undefined 因为 j 不是数组，所以 j[0] 未定义。

Answer 2

固定脚本如下：

$(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
    });
  }
});

我改变了一些东西，不过应该是不言自明的。

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

Where is the bug in my code?

javascript

jquery

raphael