Question

我有一圈div。它们是用javascript创建的，并且均匀分布在圆圈周围。 div的数量取决于我提供的某些数组。圆圈中可能有任意数量的div。

目前这些div是横向的。

但是我希望根据它在圆圈中的位置以适当的角度旋转每个角度。所以它看起来像这样：

不介意第二张图片中的内容应该是相同的：一，二，三等

有人可以帮我这么做吗？

所以这是我现在的代码：

var content = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen'];


var container = document.getElementById("container");
var size = window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth;
container.style.height = size + 'px';
container.style.width = size + 'px';

function createFields() {
    for(var i = 0; i < content.length; i++) {
		var div = document.createElement('div');
		div.className = "field";
		div.innerHTML = content[i];
		container.appendChild(div);
    }
}

function distributeFields() {
	var myNodeList = document.querySelectorAll('.field');
	var fields = Array.from(myNodeList);
	var width = size/2;
    var height = size/2;
    var angle = 0; 
	var step = 2 * Math.PI / fields.length;
    var radius = 0.7 * width;
    
    var angle = -90 * Math.PI / 180;
   
	fields.forEach(function(element) {
		var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
		element.style.right = x + 'px';
		element.style.top = y + 'px';
        angle =  angle - step;
	});
}

window.onload = function() {
	createFields();
	distributeFields();
};

html, body { height: 100%; margin: 0; border:0; }
#container { background-color: DarkSeaGreen; box-sizing: border-box; position: relative; margin: auto; overflow: hidden !important; }
.field { width: 60px; height: 20px; position: absolute; color: #fff; background-color:indigo;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Circle</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

Answer 1

您可以使用index和forEach中的fields.length来获得360度或整圆的分数。

var rotationBase = -90;
var rotation = rotationBase + 360 / fields.length * index;
element.style.transform = 'rotate(' + rotation + 'deg)';

完整的工作示例

var content = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen'];


var container = document.getElementById("container");
var size = window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth;
container.style.height = size + 'px';
container.style.width = size + 'px';

function createFields() {
    for (var i = 0; i < content.length; i++) {
        var div = document.createElement('div');
        div.className = "field";
        div.innerHTML = content[i];
        container.appendChild(div);
    }
}

function distributeFields() {
    var myNodeList = document.querySelectorAll('.field');
    var fields = Array.from(myNodeList);
    var width = size / 2;
    var height = size / 2;
    var angle = 0;
    var step = 2 * Math.PI / fields.length;
    var radius = 0.7 * width;

    var angle = -90 * Math.PI / 180;

    fields.forEach(function (element, index) {
        var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
        element.style.right = x + 'px';
        element.style.top = y + 'px';
        
        var rotationBase = -90;
        var rotation = rotationBase + 360 / fields.length * index;
        element.style.transform = 'rotate(' + rotation + 'deg)';
        
        angle = angle - step;
    });
}

window.onload = function () {
    createFields();
    distributeFields();
};

html, body { height: 100%; margin: 0; border:0; }
#container { background-color: DarkSeaGreen; box-sizing: border-box; position: relative; margin: auto; overflow: hidden !important; }
.field { width: 60px; height: 20px; position: absolute; color: #fff; background-color:indigo;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Circle</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

以适当的角度在一个圆圈中分配div

1 个答案: