Question

我正在尝试在画布上创建三个不同半径的点，这些点不会相互接触或重叠。我正在使用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。

Answer 1

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

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

您还没有正确阅读圈子数组中的任何值 - 您应该使用circles[j][0]而不是circles[j[0]]，因为j不是undefined一个数组，因此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
    });
  }
});

我改变了一些事情，但应该是非常明显的。

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

2 个答案: