矩形碰撞检测 d3js

Question

矩形碰撞检测 d3js

11

我正在尝试在我的SVG强制布局（d3js）中创建碰撞检测。我按照这个教程做了一个圆形碰撞检测：http://bl.ocks.org/mbostock/3231298。

但不知何故，这对于矩形形状不起作用。我已经试图在阴影中调整参数。

下面是我的代码：

var node = svg.selectAll(".node")
    .data(json.nodes)
      .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

    node
        .append("rect")
            .attr("class", "tagHolder")
            .attr("width", 60)
            .attr("height", 60)
            .attr("rx", 5)
            .attr("ry", 5)
            .attr("x", -10)
            .attr("y", -10);

还有这个：

 svg.selectAll(".node")
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; });

    link.attr("x1", function(d) 
        { 
            return d.source.x; 
        })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) 
    { 
        return "translate(" + d.x + "," + d.y + ")"; 
    });
});

和碰撞函数相关的内容：

function collide(node) {
    var r = 30,
        nx1 = node.x - r,
        nx2 = node.x + r,
        ny1 = node.y - r,
        ny2 = node.y + r;

    return function(quad, x1, y1, x2, y2) 
    {
        if (quad.point && (quad.point !== node)) 
        {
            var x = node.x - quad.point.x,
                y = node.y - quad.point.y,
                l = Math.sqrt(x * x + y * y),
                r = 30 + quad.point.radius;
            if (l < r) 
            {
                l = (l - r) / l * .5;
                node.x -= x *= l;
                node.y -= y *= l;
                quad.point.x += x;
                quad.point.y += y;
            }
        }

        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
     };
}

如何检测矩形的碰撞？谢谢！

- vlio20

我有同样的问题，尽管可能比你的例子更进一步。我对碰撞函数所做的更改有些不对，因为矩形之间的推力太大了：http://bl.ocks.org/dobbs/1d353282475013f5c156 - Eric Dobbs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eric Dobbs · Accepted Answer

d3示例中的碰撞函数通过比较圆心距离l = Math.sqrt(x * x + y * y)与半径之和r = node.radius + quad.point.radius来计算圆的重叠。当 l < r时，两个圆会相互重叠，需要将它们分开以消除重叠。

类似地，矩形的碰撞函数也是同样的原理，通过计算矩形的重叠并将它们分开以解决重叠问题：

function collide(node) {
  var nx1, nx2, ny1, ny2, padding;
  padding = 32;
  nx1 = node.x - padding;
  nx2 = node.x2 + padding;
  ny1 = node.y - padding;
  ny2 = node.y2 + padding;
  return function(quad, x1, y1, x2, y2) {
    var dx, dy;
    if (quad.point && (quad.point !== node)) {
      if (overlap(node, quad.point)) {
        dx = Math.min(node.x2 - quad.point.x, quad.point.x2 - node.x) / 2;
        node.x -= dx;
        quad.point.x += dx;
        dy = Math.min(node.y2 - quad.point.y, quad.point.y2 - node.y) / 2;
        node.y -= dy;
        quad.point.y += dy;
      }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  };
};

节点在宽度上的重叠为 dx = Math.min(node.x2 - quad.point.x, quad.point.x2 - node.x) / 2;，高度上的重叠为 dy = Math.min(node.y2 - quad.point.y, quad.point.y2 - node.y) / 2;。这表明您的节点必须知道矩形的两个角：左上角 (x, y) 和右下角 (x2, y2)。

在此处查看完整示例：http://bl.ocks.org/dobbs/1d353282475013f5c156。该示例使用CoffeeScript，并且仅沿着y轴将矩形相互移开，因为这更符合我的实际需求。