랜덤 크기 모양의 채우기 상자

Question

고정 된 크기의 상자를 채우려면 임의의 크기 모양으로 채워야합니다.

나는 9 가지 모양을 가지고 있기 때문에 하나 이상의 모양이 다른 모양 위에 놓일 수 있으므로이 모양이 무작위로 흩어져있는 것처럼 임의성 효과를 만드는 것입니다. 그러나 다시 빈 공간이 남을 수는 없습니다. 이것은 매우 중요하고 가장 어려운 부분입니다. 그래서

은 내가 더 잘하고있어 내가 가진이가

같은 loook 방법의 예 그리고 나는 또한 설치 jsFiddle이 상상하는, 당신이 here

확인해 I이었다 이것에 대해 몇 시간 동안 작업했는데 내가 생각한 것에 상관없이 작동하지 않았습니다. 그래서 이것은 코드로 수행하는 작업의 기본적인 예일뿐입니다.

나는 완전히 작동하는 코드를 요구하지는 않지만이 시점에서 어떻게 계속해야하는지에 대한 조언은 많은 도움이 될 것입니다.

그리고 SO 이후 규칙이 jsFiddle 코드를 요구하고

는 여기있다 :

이

$shape = $('<div class="shape"></div>'); 
$container = $(".container"); 

//random shape sizes 
shapes = [ 
    [rand(50, 70), rand(50, 70)], 
    [rand(50, 70), rand(50, 70)], 
    [rand(60, 70), rand(60, 70)], 
    [rand(60, 100), rand(60, 100)], 
    [rand(100, 140), rand(100, 140)], 
    [rand(100, 140), rand(100, 140)], 
    [rand(100, 140), rand(100, 140)], 
    [rand(140, 190), rand(140, 190)], 
    [rand(150, 210), rand(150, 210)] 
]; 

used = []; 
left = 0; 
top = 0; 

for(i = 1; i <= 3; i++){ 
    offset = rand(0, 8); 

    width = shapes[offset][0]; 
    height = shapes[offset][1]; 

    $container.append(
     $shape.css({ 
      width: width, 
      height: height, 
      top: top, 
      left: left, 
      zIndex: i 
     }) 
     .text(i) 
     .clone() 
    ); 

    //increase top offset 
    top += shapes[offset][1]; 
} 


function rand(from, to){ 
    return Math.floor((Math.random()*to)+from); 
} 

Answer 1

사실 대답은 당신이 어떤 종류의 필요에있어, 우리는 그것으로 뎁 갈 수있는 매우 어려운 일이다 공간 채우기 알고리즘.

솔직히 사물의 종류에 강한 아니지만, 내가 제안 - 당신이 그것을 처리 할 수있는 경우 -이 주제에 :

• 프랙탈 채우기 알고리즘 중심 휴식
와
• 보로 노이 셀을
• 이진 트리

대신 이진 트리의 간단한 구현을 기록하려고했습니다. 그것은 재귀 적으로 작은 영역으로 공간 영역을 세분화하여 작동합니다.

binary(struct); 

반환 당신에게 세분화 된 지역의 배열을 호출

var square = {x: 0, y: 0, width: 200, height: 200}; 
var struct = [square]; 

function binary(struct) { 
    var axis = 1; 
    function subdivide(index) { 
     var item = struct.splice(index, 1)[0]; 
     if(axis > 0) { 
      var aw = item.width/2; 
      var ow = Math.random() * aw; 
      ow -= ow/2; 
      var ax = Math.round(item.width/2 + ow); 
      var bx = item.width - ax; 
      struct.push({x: item.x, y: item.y, width: ax, height: item.height}); 
      struct.push({x: item.x + ax, y: item.y, width: bx, height: item.height}); 
     } else { 
      var ah = item.height/2; 
      var oh = Math.random() * ah; 
      oh -= oh/2; 
      var ay = Math.round(item.height/2 + oh); 
      var by = item.height - ay; 
      struct.push({x: item.x, y: item.y, width: item.width, height: ay}); 
      struct.push({x: item.x, y: item.y + ay, width: item.width, height: by}); 
     } 

     axis = -axis; 
    } 

    while(struct.length < 9) { 
     var index = Math.round(Math.random() * (struct.length-1)); 
     subdivide(index); 
    } 

    return struct; 
} 

. 희망이 시작 지점이 될 수 있습니다 (또한 당신이 메모리 무거운 알고리즘을 실행하고 싶지 않아요 가정 상자에 임의의 이미지를 배치 할 수 있지만 내가 틀릴 수도 :) :)