Question

我试图在页面上输出多个标签＆＃39;在使用绝对定位div的图像上。这些div中的每一个都有一个唯一的编号，并根据地图上的x和y位置放置（这些是基于百分比的，因此可以缩放图像）。

由于其中一些标签可能会重叠，我需要一种方法来阻止它们重叠，或者基本上“碰撞”。他们离开彼此，所以他们不再重叠。（此时，只要它们足够接近，因为它们不在正确的位置并不重要，因为有一个单独的“视图”视图。

他们需要保持在容器的范围内，而不是彼此重叠。

HTML：

foo

CSS：

<div id="labelzone">
    <div class="label" style="left:0%;top:8%">001</div>
    <div class="label" style="left:0%;top:11%">002</div>
    <div class="label" style="left:1%;top:10%">003</div>
</div>

Jsfiddle：https://jsfiddle.net/79cco1oy/

这是一个简单的例子，我可以将它作为输出，这些引脚可以放在任何地方，页面上有多少没有限制，但是不应该有任何场合太多，不适合该地区。

我正在做一些形式的碰撞检测并且目前试图找出某种算法以使它们不再重叠，并确保它们也不会与另一项重叠。< / p>

Answer 1

我的解决方案更加面向对象。

一个对象（LabelPool）将包含标签，并将负责存储和容纳它们，以便它们不会发生碰撞。您可以自定义要添加/减去标签位置的x / y值，以避免它们发生碰撞。另一个对象（Label）定义了一个Label并有一些方便的方法。我在LabelPool中使用的碰撞算法来自此post

var Label = function ($el) {
    var position = $el.position(),
            width = $el.outerWidth(true),
            height = $el.outerHeight(true);

    this.getRect = function () {
        return {
            x: position.left,
            y: position.top,
            width: width,
            height: height
        };
    };

    this.modifyPos = function (modX, modY) {
        position.top += modY;
        position.left += modX;
        updatePos();
    };

    function updatePos() {
        $el.css({
            top: position.top,
            left: position.left
        });
    }
};

var LabelPool = function () {
    var labelPool = [];

    function collides(a, b) {
        return !(((a.y + a.height) < (b.y)) || (a.y > (b.y + b.height)) || ((a.x + a.width) < b.x) || (a.x > (b.x + b.width)));
    }

    function overlaps(label) {
        var a = label.getRect();
        return labelPool.some(function (other) {
            return collides(a, other.getRect());
        });
    }

    this.accomodate = function (label) {
        while (labelPool.length && overlaps(label)) {
            label.modifyPos(0, 1);// You can modify these values as you please.
        }
        labelPool.push(label);
    };
};

var labelPool = new LabelPool;
$(".label").each(function (_, el) {
    labelPool.accomodate(new Label($(el)));
});

这里是fiddle。

希望它有所帮助。

Answer 2

使用js和jquery，您可以找到基于左/上abs位置和标签大小的基本碰撞引擎。

https://jsfiddle.net/Marcassin/79cco1oy/6/

每次要添加标签时，都会检查位置是否与任何现有div重叠，在这种情况下，您将新标签转换为位置。这个操作可能不是你能找到的最漂亮的，如果有很多标签，可能需要很长的处理时间。

$(document).ready (function () {
    addLabel (0, 8);
    addLabel (0, 11);
    addLabel (1, 10);
    addLabel (2, 7);

    });

function addLabel (newLeft, newTop)
{

  var newLab = document.createElement ("div");
  newLab.className = "label";
  $(newLab).css({"left": newLeft+"%", "top": newTop + "%"});
  var labels = $("#labelzone > div");
  newLab.innerHTML =  "00" + (labels.length + 1); // manage 0s
  $("#labelzone").append (newLab);

  var isCollision = false;
  var cpt = 1;
  do
  {
     isCollision = false;
     $(labels).each (function () {
        if (! isCollision && collision (this, newLab))
           isCollision = true;
     });

    if (isCollision)
         $(newLab).css({"left": (newLeft + cpt++) + "%",
                        "top": (newTop + cpt++) + "%"});

  } while (isCollision);
}

 function isInside (pt, div)
{
    var x = parseInt($(div).css("left"));
    var y = parseInt($(div).css("top"));
    var w = $(div).width () + borderWidth;
    var h = $(div).height ();

    if (pt[0] >= x && pt[0] <= x + w &&
        pt[1] >= y && pt[1] <= y + h)
        return true;
    return false;
}

function collision (div1, div2)
{

    var x = parseInt($(div1).css("left"));

    var y = parseInt($(div1).css("top"));
    var w = $(div1).width () + borderWidth;
    var h = $(div1).height ();
    var pos = [x, y];


    if (isInside (pos, div2))
        return true;
    pos = [x + w, y];
    if (isInside (pos, div2))
        return true;
    pos = [x + w, y + h];
    if (isInside (pos, div2))
        return true;
    pos = [x, y + h];
    if (isInside (pos, div2))
        return true;

    return false;
}

Answer 3

这是碰撞检测的另一种实现，接近您的要求。两个主要目标是：

垂直移动而不是水平移动（因为框比宽大）
保持在原产地的合理范围内

这里是：

function yCollision($elem) {
    var $result = null;

    $('.label').each(function() {
        var $candidate = $(this);

        if (!$candidate.is($elem) &&
            $candidate.position().top <= $elem.position().top + $elem.outerHeight() &&
            $candidate.position().top + $candidate.outerHeight() >= $elem.position().top) {
            $result = $candidate;
            console.log("BUMP Y");
        }
    });

    return $result;
}

function xCollision($elem) {
    var $result = null;

    $('.label').each(function() {
        $candidate = $(this);
        if (!$candidate.is($elem) &&
            yCollision($elem) &&
            yCollision($elem).is($candidate) &&
            $candidate.position().left <= $elem.position().left + $elem.outerWidth() &&
            $candidate.position().left + $candidate.outerWidth() >= $elem.position().left) {
            $result = $candidate;
            console.log("BUMP X");
        }
    });

    return $result;
}

function fuzzyMoveY($elem, direction) {    

    var newTop = $elem.position().top + $elem.outerHeight() / 4 * direction;

    // stay in the canvas - top border
    newTop = (newTop < 0 ? 0 : newTop);

    // stay in the canvas - bottom border
    newTop = (newTop + $elem.outerHeight() > $("#labelzone").outerHeight() ? $("#labelzone").outerHeight() - $elem.outerHeight() : newTop);

    // stay close to our origin
    newTop = (Math.abs(newTop - $elem.attr("data-origin-top")) > $elem.outerHeight() ? $elem.attr("data-origin-top") : newTop);

    $elem.css({'top': newTop});
}

function fuzzyMoveX($elem, direction) {    

    var newLeft = $elem.position().left + $elem.outerWidth() / 4 * direction;

    // stay in the canvas - left border
    newLeft = (newLeft < 0 ? 0 : newLeft);

    // stay in the canvas - right border
    newLeft = (newLeft + $elem.outerWidth() > $("#labelzone").outerWidth() ? $("#labelzone").outerWidth() - $elem.outerWidth() : newLeft);

    // stay close to our origin
    newLeft = (Math.abs(newLeft - $elem.attr("data-origin-left")) > $elem.outerWidth() ? $elem.attr("data-origin-left") : newLeft);

    $elem.css({'left': newLeft});
}

function bumpY($above, $below) {        
    if ($above.position().top > $below.position().top) {
        $buff = $above;
        $above = $below;
        $below = $buff;
    }

    fuzzyMoveY($above, -1);
    fuzzyMoveY($below, 1);
}

function bumpX($left, $right) {        
    if ($left.position().left > $right.position().left) {
        $buff = $right;
        $right = $left;
        $left = $buff;
    }

    fuzzyMoveX($left, 1);
    fuzzyMoveX($right, -1);
}

$('.label').each(function() {
   $(this).attr('data-origin-left', $(this).position().left);
   $(this).attr('data-origin-top', $(this).position().top);        
});

var yShallPass = true;
var loopCount = 0;

while (yShallPass && loopCount < 10) {
    yShallPass = false;

    $('.label').each(function() {
        var $this = $(this);
        $collider = yCollision($this);
        if ($collider) {
            bumpY($this, $collider);
            yShallPass = true;
        }
    }); 
    loopCount++;
}

console.log("y loops", loopCount);

var xShallPass = true;
var loopCount = 0;

while (xShallPass && loopCount < 10) {
    xShallPass = false;

    $('.label').each(function() {
        var $this = $(this);
        $collider = xCollision($this);
        if ($collider) {
            bumpX($this, $collider);
            xShallPass = true;
        }
    }); 
    loopCount++;
}

console.log("x loops", loopCount);

这显然不是生产代码，但如果有帮助，请报告。

移动绝对定位的div off off eacherer

3 个答案: