사각형을 중심으로 div를 동적으로 정렬하고 정사각형 끝이 끝나면 회전합니다.

Question

enter link description here과 유사합니다.

는 지금은 아래의 jsfiddle에 표시된이 문제에 직면하고있다 : 는 http://jsfiddle.net/rkqBD/2/

중간에 사각형 DIV 테이블에 손님으로 둘러싸인 레스토랑 테이블을 나타냅니다. Divs는 이제 서클 테이블 에서처럼 정렬되지만 사각형/테이블을 향하게 배치해야합니다. 문제는 테이블에있는 게스트의 수가 동적으로 변경된다는 것입니다. 각 게스트의 의자 이미지를 테이블에 대면되게 배치하는 방법은 무엇입니까?

$(document).ready(function(){ 
    $('.circleBase').each(function(){ 
    var d = $(this).attr("id"); 
    var tbltype = $(this).attr("tbltype"); 
    if(tbltype==="1"){ 
     border = "1"; 
    }else { border = "999";} 
     var elems=''; 
     var x = 0, y = 0, angle = 0; 
     var rot = 0; 
     if(tbltype==="1"){ 
     var elems = document.getElementsByClassName('info_container22 square'); 
     var totContent = $(this).find(elems).size(); 
     var increase = Math.PI * 2/totContent; 
     for (var i = 0; i < totContent; i++) { 
     var elem = elems[i]; 
     x = (120 * Math.cos(angle) + 40); 
     y = (115 * Math.sin(angle) + 60); 
     elem.style.position = 'absolute'; 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 
     var rot = 88 + (i * (360/totContent)); 
     var img = $(elems[i]).find('.img'); 
     img.css('-moz-transform', "rotate("+rot+"deg)"); 
     img.css.MozTransform = "rotate("+rot+"deg)"; 
     img.css('-webkit-transform', "rotate("+rot+"deg)"); 
     img.css('-o-transform', "rotate("+rot+"deg)"); 
     img.css('-ms-transform', "rotate("+rot+"deg)"); 
     img.css('zIndex', "10"); 
     angle += increase; 
     } 
    } 
    }); 
}); 

Answer 1

좋은 소식은 사각형 테이블 쉬울 것입니다하지만 당신은 그것에 대해 다른 알고리즘이 필요합니다

라인 : X = (120 *와 Math.cos (각도) + 40); y = (115 * Math.sin (angle) + 60); .... 및 var rot = 88 + (i * (360/totContent));

으로 변경해야합니다. 게다가 각도 + = 증가를해서는 안됩니다. 이 다른 방법보다 상세하게

에서 계산됩니다 이후 :

당신이 4 별개의 회전 각도 090180270 왼쪽, 아래, 오른쪽, 위쪽이있을 것이다, 그래서 당신은 sespectively 가 두 번째로하자 사각형 테이블이 "side_num "얼마나 많은 사람들이 한쪽에 앉을 수 있는지를 변수로 결정하십시오.

'손님'배열 'j'가 'i'인 경우 'j'가 'side_num'에 도달 할 때까지 'j'가 1만큼 증가합니다. 'j'가 0이되고 각도 뿐만 아니라 x, y도 변경됩니다.지금

사람이 앉을 것이다 측 계산 기준 : (j 개조 'side_num') (우리는 테이블 (4) 측을 갖기 때문에)

x와 y의 (j 개조 'side_num')에 기초하여 계산해야 너무 너무 왼쪽 내가 코드를 수정합니다 같은 X 값 등

있을 것이다 그러나 이것은

http://jsfiddle.net/Krisztian123/hyGrj/32/ 이 거의 이루어 뒤에 이론 :

$(document).ready(function(){ 
$('.circleBase').each(function(){ 
var d = $(this).attr("id"); 
var tbltype = $(this).attr("tbltype"); 
if(tbltype==="1"){ 
border = "1"; 
}else { border = "999";} 
     var elems=''; 
     var x = 0, y = 0, angle = 0; 
     var rot = 0; 
     if(tbltype==="1"){ 
     var elems = document.getElementsByClassName('info_container22 square'); 
     //alert(elems.length); 
     var side_num = 4; //how many seats per side 
    // side_num -= 1; //technically it should be 3 
     var j = 0; 
     var angles=['270','180','270','90']; 

     var xs=[0,38,0,0]; 
     var ys=[38,0,0,0]; 

     var x_fix=[-50,0,0,0] 
     var y_fix=[-30,130,0,0] 
     var cur_side = 0; //(0,1,2,3 == left, bottom,right,top) 
     var totContent = $(this).find(elems).size(); 
     var j = -1; //to be equal to loop index 
     for (var i = 0; i < totContent; i++) { 
     var elem = elems[i]; 
     j++; // like (0,1,2,3,4,0,1,2...) 
      if (j == side_num) { 
       //next side 
       j = 0; 
       cur_side++; 
       if (cur_side == 4) { 
        alert("places are full next table"); 
       } 
      } 
     x = x_fix[cur_side] + j*xs[cur_side]; 
     y = y_fix[cur_side] + j*ys[cur_side]; 

     elem.style.position = 'absolute'; 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 
     var rot = angles[cur_side]; 
     var img = $(elems[i]).find('.img'); 
     img.css('-moz-transform', "rotate("+rot+"deg)"); 
     img.css.MozTransform = "rotate("+rot+"deg)"; 
     img.css('-webkit-transform', "rotate("+rot+"deg)"); 
     img.css('-o-transform', "rotate("+rot+"deg)"); 
     img.css('-ms-transform', "rotate("+rot+"deg)"); 
     img.css('zIndex', "10"); 

    } 
      } 
           }); 

      }); 

Answer 2

나는 이런 식으로 뭔가 할 것 :

1. 준비 여분의 의자를 의자의 수는 고르지 (number_of_chairs의 %의 number_of_table_sides) 인 경우

2. 나누기 이 지금까지 내 코드입니다 나머지 의자는 테이블면 수만큼

3. 각 테이블면의 의자 수는 2.

4. 분할 자

5. 찾는 가진 자들의 수에 의해 현재 테이블 측의 경계 길이의 결과 경계 아이폰에 따른 오프셋. 의자의 개수가 홀수 곳이 어딘가에 있기 때문에 여분의 의자가있는 경우

6. 의자의 회전은 360/number_of_table면 * current_side

7. 입니다. 아마도 테이블의 마지막면에 그것을 추가하여 그면에있는 의자를 조금 더 가깝게 만듭니다.

희망이 있습니다. 포커 게임을 쓰고 있습니까?

Answer 3

이것은 flexbox를 사용하여 매우 간단하게 할 수 있습니다. 응답 성이 좋고 의자가 브라우저 또는 컨테이너의 크기를 다시 계산할 것입니다. 유일한 단점은 브라우저 지원이 아직 100 %가 아니라는 것입니다. 그러나 나는 미래에 유용 할 수 있기 때문에 어쨌든이 아이디어를 게시 할 것이라고 생각했습니다.

<ul class="names"> 
    <li>John</li> 
    <li>Jordan</li> 
    <li>Vania</li> 
    <li>Martin</li> 
    <li>Tony</li> 
    <li>Ivan</li> 
    <li>Maria</li> 
    <li>Edward</li> 
    <li>Edward</li> 
</ul> 

그런 다음 자바 스크립트 곳이 마크 업을 만들 것입니다 (이 삽입 될 수 있습니다) :

<div class="table-container"> 
    <div class="table"></div> 
    <div class="t"></div> 
    <div class="r"></div> 
    <div class="b"></div> 
    <div class="l"></div> 
</div> 

참고 HTML에서

당신은 단지 이름의 일반 목록을 작성할 것입니다 : 여기에있는 모든 요소는 box-sizing의 CSS 속성이 border-box으로 설정되어 있습니다.

.table-container div는 .table 및 기타 요소의 컨테이너 일뿐입니다. 그것은 너비가 설정되어 있지 않으므로 (응답 성이 높음) 높이가 고정되어 있습니다. 이 높이는 자바 스크립트에서 결정되며 의자 치수에 따라 결정됩니다. 예를 들어, 의자가 40px로 높고 테이블을 3 높이라고 말하면 .table-container div는 40px * 5 높이 (40px * 3) + (40px * 2 (의자 주위의 패딩 용)입니다. 탁자)).

.table div는 단지 CSS 속성이 height: 100%; 인 일반 div입니다. .table-container에 이미 올바른 패딩이 있기 때문에 .table의 콘텐츠 영역도 이미 올바른 크기이기 때문입니다. 상단, 오른쪽, 하단 왼쪽에 대해 서

.t, .r, .b 및 .l div의 절대적 .table-container 사업부를 기준으로 div의 위치한다. 이것들은 효과적으로 의자 행을 잡는 것입니다. 각 div에는 justify-content 및 align-content CSS 속성이 space-around으로 설정되어 있습니다. 즉, 새 요소를 추가 할 때마다 자동으로 정확하게 간격을 두어 멋지게 표시됩니다. 어떤 알고리즘도 필요 없습니다.

이제 남은 일은 자바 스크립트에서 요소를 만들고 이름 목록을 가져온 다음 각 이름을 올바른 div (상단, 오른쪽, 아래 또는 왼쪽)에 추가하는 것입니다. 난 시계 방향으로 움직이면서 이름을 하나씩 순차적으로 반복했다. 예 : http://jsbin.com/oFIXOZUf/2/edit.