CODEWITHSUNDEEP
javascript
kilogram
kilogram

Reputation: 717

Distribute divs in a circle with appropriate angle

I have a circle of divs. They are created with javascript and evenly distributed around the circle. The number of divs depends upon some array that I provide. There may be any number of divs in a circle.

These divs are horizontal at the moment.

enter image description here

But I want to rotate each on appropriate angle depending on its position in circle. so it will look like this:

enter image description here

Never mind content in second pic, should be the same: one,two,three etc

Can someone help me to do this?

So here is the code that I have now for that:

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>

Upvotes: 4

Views: 1469

Answers (1)

JJWesterkamp
JJWesterkamp

Reputation: 7916

You can use index in forEach and fields.length to get to a fraction of 360 degrees, or a full circle. 

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

Full working example

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>

Upvotes: 6

Related Questions