Question

所以，我一直在尝试创建大量的div（我们可以称之为条形）并将它们旋转并定位，以便在中心创建一个圆圈。我不好解释所以这里是一个例子，其中所有的条具有相同的宽度和高度。
JSFiddle Here:

这里的一切看起来都不错。但是，当我改变杆的高度时会出现问题。 JSFiddle Here:

我认为我的麻烦来自于我的定位和旋转功能混乱或绝对定位的性质。这是第二个JSFiddle的js示例。

var $bars = [];
var viz = document.getElementById('viz');

function create(num) {
    for(var i = 0; i < num; i++) {
        var a = document.createElement('div');
        a.classList.add('bar');
        viz.appendChild(a);
        $bars.push($(a));
    }
}

create(256);

$(document).ready(function(){
    var step = Math.PI * 2 / $bars.length;
    var radius = 200;
    var angle = 0;

    for (var i = 0; i < $bars.length; i++) {
        var x = Math.round(radius * Math.cos(angle));
        var y = Math.round(radius * Math.sin(angle));
        $bars[i].css('left', x + 'px');
        $bars[i].css('top', y + 'px');
        $bars[i].css('height', i + 1);
        var rot = 90 + (1.4025 * i);
        $bars[i].css('transform', 'rotate(' + rot + 'deg)'); 
        angle += step;
    }
});

即使高度与我的示例不同，有没有办法保持所有div / bar的圆半径？（我是一个相对较新的js所以请原谅我糟糕的代码）

Answer 1

我添加了

transform-origin: center top;

你的风格。这样，元素只在一个方向上增长：

fiddle

Answer 2

代码按预期执行，您在围绕圆圈时更改高度。但是，如果您将高度更新为实数，那么它将正常执行：

$bars[i].css('height', 20);

https://jsfiddle.net/rzt5L0sh/1/

围绕具有半径的圆布置不同的高度div

2 个答案: