I'm looking for a function to arrange some elements around a circle.
result should be something like :
Here's some code that should help you:
var numElements = 4,
angle = 0
step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
var x = container_width/2 + radius * Math.cos(angle);
var y = container_height/2 + radius * Math.sin(angle);
angle += step;
}
It is not complete but should give you a good start.
Update: Here's something that actually works:
var radius = 200; // radius of the circle
var fields = $('.field'),
container = $('#container'),
width = container.width(),
height = container.height(),
angle = 0,
step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
Demo: http://jsfiddle.net/ThiefMaster/LPh33/
Here's an improved version where you can change the element count.
x
and y
yourself. –
Pule fields
and cycle
are not in the same container –
Business For an element around a centre at (x, y), distance r, the element's centre should be positioned at:
(x + r cos(2kπ/n), y + r sin(2kπ/n))
where n is the number of elements, and k is the "number" of the element you're currently positioning (between 1 and n inclusive).
xy
means the same thing as x * y
in mathematics. –
Pule I've combined ThiefMaster's fiddle with the jQuery pointAt plugin:
Demo: http://jsfiddle.net/BananaAcid/nytN6/
the code is somewhat like above.
might be interesting to some of you.
Arrange Elements In Circle (Javascript)
function arrangeElementsInCircle (elements, x, y, r) {
for (var i = 0; i < elements.length; i++) {
elements[i].scaleX = 1 / elements.length
elements[i].scaleY = 1 / elements.length
elements[i].x = (x + r * Math.cos((2 * Math.PI) * i/elements.length))
elements[i].y = (y + r * Math.sin((2 * Math.PI) * i/store.length))
}
}
Where x,y
is point co-ordinates and elements
is array of elements to be placed and r
is radius.
Javascript only version of thiefmaster's answer
function distributeFields(deg){
deg = deg || 0;
var radius = 200;
var fields = document.querySelectorAll('.field'), //using queryselector instead of $ to select items
container = document.querySelector('#container'),
width = container.offsetWidth, //offsetWidth gives the width of the container
height = container.offsetHeight,
angle = deg || Math.PI * 3.5,
step = (2 * Math.PI) / fields.length;
console.log(width, height)
//using forEach loop on a NodeList instead of a Jquery .each,
//so we can now use "field" as an iterator instead of $(this)
fields.forEach((field)=>{
var x = Math.round(width / 2 + radius * Math.cos(angle) - field.offsetWidth/2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - field.offsetHeight/2);
console.log(x, y)
field.style.left = x + 'px'; //adding inline style to the document (field)
field.style.top= y + 'px';
angle += step;
})
}
distributeFields();
In the html there is the data-gap
attribute where you can enter the gap between center circle and small circles.
var cs = document.getElementsByClassName('c');
var center = document.getElementById("center");
var amount = cs.length;
var startAngle = -90;
var angleToAdd = 360 / amount;
var offsetPx = -(cs[0].offsetWidth / 2) + (center.offsetWidth / 2);
var radius = (center.offsetWidth / 2) + (cs[0].offsetWidth / 2) + parseInt(center.dataset.gap);
for (i = 0; i < cs.length; i++) {
angle = startAngle * Math.PI / 180;
var x = (radius * Math.cos(angle)) + offsetPx;
var y = (radius * Math.sin(angle)) + offsetPx;
cs[i].style.transform = "translate(" + x + "px," + y + "px)";
startAngle += angleToAdd;
}
#display {
background: gray;
width: 100%;
height: 300px;
border-radius: 10px;
position: relative;
}
#center {
width: 130px;
aspect-ratio: 1;
background: gold;
border: 2px solid teal;
color: white;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
}
.c {
width: 50px;
aspect-ratio: 1;
background: gold;
border: 2px solid teal;
color: white;
position: absolute;
border-radius: 100%;
}
<section id="display">
<div id="center" data-gap="15">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</section>
© 2022 - 2024 — McMap. All rights reserved.
n
elements in same distance? – Earthn
element with different distance. – Business