添加一个元素不要重叠

我读过这个关于如何随机定位元素的问题，并且它完美地工作。 Positioning multiple, random sized, absolutely positioned elements so they don't overlap 添加一个元素不要重叠

当我们随机定位自己的时候，我该如何让圈子在中心不重叠徽标？

的jsfiddle：http://jsfiddle.net/2h8783ba/

var maxSearchIterations = 10; 
var min_x = 110; 
var max_x = window.innerWidth - 310; 
var min_y = 110; 
var max_y = window.innerHeight - 310; 
var filled_areas = []; 

function calc_overlap(a1) { 
var overlap = 0; 
for (i = 0; i < filled_areas.length; i++) { 

    var a2 = filled_areas[i]; 

    // no intersection cases 
    if (a1.x + a1.width < a2.x) { 
     continue; 
    } 
    if (a2.x + a2.width < a1.x) { 
     continue; 
    } 
    if (a1.y + a1.height < a2.y) { 
     continue; 
    } 
    if (a2.y + a2.height < a1.y) { 
     continue; 
    } 

    // intersection exists : calculate it ! 
    var x1 = Math.max(a1.x, a2.x); 
    var y1 = Math.max(a1.y, a2.y); 
    var x2 = Math.min(a1.x + a1.width, a2.x + a2.width); 
    var y2 = Math.min(a1.y + a1.height, a2.y + a2.height); 

    var intersection = ((x1 - x2) * (y1 - y2)); 

    overlap += intersection; 
} 
return overlap; 
} 

function randomize() { 

filled_areas.splice(0, filled_areas.length); 

var index = 0; 
$('.c1, .c2, .c3, .c4').each(function() { 
    var rand_x = 0; 
    var rand_y = 0; 
    var i = 0; 
    var smallest_overlap = 9007199254740992; 
    var best_choice; 
    var area; 
    for (i = 0; i < maxSearchIterations; i++) { 
     rand_x = Math.round(min_x + ((max_x - min_x) * (Math.random() % 1))); 
     rand_y = Math.round(min_y + ((max_y - min_y) * (Math.random() % 1))); 
     area = { 
      x: rand_x, 
      y: rand_y, 
      width: $(this).width(), 
      height: $(this).height() 
     }; 
     var overlap = calc_overlap(area); 
     if (overlap < smallest_overlap) { 
      smallest_overlap = overlap; 
      best_choice = area; 
     } 
     if (overlap === 0) { 
      break; 
     } 
    } 

    filled_areas.push(best_choice); 

    $(this).css({ 
     position: "absolute", 
     "z-index": index++ 
    }); 
    $(this).animate({ 
     left: rand_x, 
     top: rand_y 
    }); 
}); 
return false; 
}

来源

2015-09-28 Christian Reynoso

目前尚不清楚你想在所有在这里完成的任务。你没有包含任何代码，你只是链接到另一个问题，这个问题似乎与其他作者编写的某些代码有关联。 – Claies

哎呀忘了包含我的JSFiddle。对于那个很抱歉！ –

这里是溶液。

的CSS

#logo-content{ 
position: absolute; 
left: 50%; 
margin-left: -100px; 
top: 50%; 
margin-top: -100px; 
z-index: 10; 
}

的Html

<div id="wrapper"> 
    <div id="logo-content"> 
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 93.7 93.7"  enable-background="new 0 0 93.7 93.7" xml:space="preserve"></svg> 
    <div> 
</div>

来源

2015-09-28 05:36:05

感谢您的回应，但这不是我的意思。让我换句话说，我希望圆圈的随机位置不在徽标区域，而不是徽标在圆圈上方。获得差异？ –

添加一个元素不要重叠

回答

相关问题