javascript - 将元素随机放置在一个圆圈中

Question

我正在编写一个快餐应用程序，基本上允许用户通过添加东西来定制他们的披萨。

所以，我向他们展示了一个简单的比萨饼，在侧边栏上，他们有所有这些东西......比如意大利辣香肠、牛肉、蘑菇和......

<div id = "pitz" style="background-image: url("pitza.png");" > </div>

<div class="custom" id="pepperoni">peppeoni</div>
<div class="custom" id="beef">beef </div>
<div class="custom" id="mushroom">mushroom </div>

所以当用户点击像 mushroom 这样的自定义 div 时，我想在我的 pitza 中添加小蘑菇......类似

$('.custom').click(function(e) {

    var backgroung = $(this).attr('id')+'.png';

    for( i = 0 ; i < 40 ; i++ )
    {
        var top , left = i ;

        var add = '<div style="top:'+top+'px ; left:'+left+'px ; width:100;height:100px;background-image:url("'+background+'");" ></div>';
        $('#pitza').append(add);
    }

});

所以这就是问题所在，为了将小元素(蘑菇)添加到我的父项(pitza)中，我需要将它们定位......在这种情况下，在一个圆圈(pitza)中，所以我需要为每个元素，这样它们就不会重叠，这些位置也应该在一个假想的圆圈中，它应该覆盖圆圈的所有部分，我不希望左边是空的，右边是蘑菇。

显然这行不通，我不知道该怎么做:

for( i = 0 ; i < 40 ; i++ )
{
    var top , left = i ;

Answer 1

基本上，您会看到两个圆圈，一个圆圈的半径是披萨的半径，另一个圆圈的半径是浇头的半径。所以你会做这样的事情。

var pizzaRadius = 200,
    toppingRadii = {
        mushroom: 40,
        pepperoni: 50,
        onions: 25
    };

function getToppingPosition(toppingRadius){
   var posX, posY;
   do {
       posX = Math.floor(Math.random() * ((pizzaRadius * 2) - 1));
       posY = Math.floor(Math.random() * ((pizzaRadius * 2) - 1));
   } while(Math.sqrt(Math.pow(pizzaRadius - posX, 2) + Math.pow(pizzaRadius - posY, 2)) > pizzaRadius - toppingRadius)

   return { x: posX, y: posY }
}

基本上，该函数的作用是在比萨饼的边界内获取一个随机数，并确保比萨饼上的位置 + 配料的大小(因此没有配料卡在比萨饼的边缘。之后你会只需将该函数插入您的循环

$('.custom').click(function(e) {

    var backgroung = $(this).attr('id')+'.png',
        topping = 'mushroom';

    for( i = 0 ; i < 40 ; i++ )
    {
        var pos = getToppingPosition(toppingRadii[topping])

        var add = '<div style="top:'+pos.x+'px ; left:'+pos.y+'px ; width:100;height:100px;background-image:url("'+background+'");" ></div>';
        $('#pitza').append(add);
    }

});

这是一把 fiddle http://jsfiddle.net/19h242yc/