Question

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

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

<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);
    }

});

这是一个小提琴http://jsfiddle.net/19h242yc/

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

1 个答案: