动态地在正方形边缘附近对div进行排序并旋转它们

Question

与此处输入链接描述类似。

现在我面对下面的jsfiddle中显示的这个问题： http ： //jsfiddle.net/rkqBD/2/

中间的方形div代表餐桌，桌子上的客人包围。 Div现在按照圆桌排序，但我需要将它们面向正方形/桌子。 问题是桌面上的客人数量是动态变化的。我如何定位它们以使每个客座椅图像面对桌面？ 到目前为止这是我的代码：

$( 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（角度）+ 60）; ....和var rot = 88 +（i *（360 / totContent））;

应该改变。 加上你不应该有角度+ =增加; 因为它将以另一种方式计算

更详细：

你有一个方桌，所以你将有4个不同的旋转角度0,90,180,270左，下，右，上侧分别让“side_num”变成有多少人坐在一边

当我们循环'来宾'数组'j'增加1，因为'i'直到它达到'side_num'，如果这样'j'变为0并且角度以及x，ys也被改变。

现在计算一个人坐在哪一侧：（j mod'side_num'）（因为我们有4个方面）

x和y应该基于（j mod'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 sides * current_side

7. 如果有一把额外的椅子，因为椅子的数量是奇怪的，所以它在某个地方。 也许将它添加到桌子的最后一侧，使得那边的椅子更加靠近。

希望有所帮助。 你在写一个扑克游戏吗？

Answer 3

这可以使用flexbox以相当简单的方式完成。 它甚至会响应，主席会重新计算他​​们在浏览器或容器大小调整上的位置。 当然唯一的缺点是浏览器支持还不是100％。 但我认为我只是发布这个想法，因为它可能在将来有用。

在HTML中，您只需编写一个正常的名称列表：

<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>

然后javascript会在某处创建这个标记（它可以放在任何地方）：

<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>

注意：此处的所有元素都将其box-sizing的CSS属性设置为border-box 。

.table-container div只是.table和其他元素的容器。 它没有设置宽度（所以它的响应）但它确实有一个固定的高度。 此高度在javascript中确定，并基于椅子尺寸。 例如，如果你说一把椅子是40px高而你想让桌子高3，那么.table-container div将是40px * 5的高度（40px * 3）+（40px * 2（用于填充）桌子周围的椅子））。

.table div只是一个常规div，唯一的CSS属性是height: 100%; 组。 这是因为.table-container已经有正确的填充，所以.table的内容区域也已经是正确的大小。

顶部，右侧，底部和左侧的.t ， .r ， .b和.l div是相对于.table-container div绝对定位的div。 这些实际上是拥有一排排椅子的东西。 这些div中的每一个都将其justify-content和align-content CSS属性设置为space-around 。 这意味着无论何时向它们添加新元素，它们都会自动且正确地间隔开来，因此它看起来不错。 不需要任何算法。

所以剩下要做的就是在javascript中创建这些元素，获取名称列表，然后将每个名称附加到正确的div（顶部，右侧，底部或左侧）。 我只是逐个循环浏览这些名称，顺时针方向移动它们。

粗略的例子： http ： //jsbin.com/oFIXOZUf/2/edit 。