Как расположить точки на окружности?

Question

[Mark321]

Добрый день, ребят, признаюсь честно, зря я геометрию в школе прогуливал
помогите пожалуйста
Есть окружность (изначально размер неизвестен)
Есть количество точек(от 2ух до 6, в том числе нечетные)
Задача расположить на окружности точки на равномерном расстоянии друг от друга
https://codesandbox.io/s/t1ry9
Как тут, только тут захаркожено
Не обязательно решение, хотя бы подсказки, как это посчитать

Comments

[Ankhena]

Поделить 360 на количество точек не вариант?

[Mark321]

Ankhena, я так и сделал, получился некий гап между элементами
но т.к это окружность и элементы позиционируется относительно карусели абсолютом, их как-то еще загнуть надо на эту окружность ровно
я хз как это сделать в этом и вопрос

[Ankhena]

Mark321,

я так и сделал

Не очень видно как вы это сделали.

Вам поможет:
https://codepen.io/AnnaSummer/pen/eYVeWXR
https://codepen.io/AnnaSummer/pen/QWQOvzy

[v3shin]

Несколько transform подряд:
- отцентровать элемент
- повернуть на 360/n градусов
- двинуть вверх на r
- если надо, повернуть на -360/n градусов

[Сергей delphinpro]

Да ёлки-палки! Вы сколько классов окончили?
Вспомните школьную геометрию/тригонометрию.

Там делов-то
1. разделить окружность на равные части. получите значение угла между элементами.
2. далее тригонометрическими формулами по углу и радиусу, который будет гипотенузой в прямоугольном треугольнике, вычислите катеты, которые будут координатами x и y относительно центра окружности. Эти координаты являются центрами элементов.
Повторить для каждого элемента.
Когда они будут размещены на окружности, добавить анимацию простой трансформацией transform:rotate(угол между элементами)

Answer 1

[Okujava-script]

Этот пример не затрагивает CSS, а реализован только на JS. Так как углы на JS измеряются в радианах, а длина окружности равна количеству радиан, равному числу пи * 2, (приблизительно 6.28, это количество радиусов из которых состоит окружность) организовываем цикл от нуля до пи * 2. А вот шаг итераций задаём поделив 6.28 на количество точек, которое нам нужно равномерно расставить на окружности.
<canvas id=canvas width=200 height=200></canvas>

let r = 90; // радиус
let amountOfPoints = 7; // количество точек
let x, y;
let ctx = canvas.getContext('2d');
for(i = 0; i < Math.PI * 2; i += Math.PI * 2 / amountOfPoints){
	x = canvas.width / 2 + r * Math.sin(i);
	y = canvas.height / 2 + r * Math.cos(i);
	ctx.fillRect(x, y, 2, 2);
}

Answer 2

[otdameskapizm]

Не уверен, но мне кажется, что здесь то, что тебе нужно https://ru.stackoverflow.com/questions/791246/%D0%...

Answer 3

[alexalexes]

В вашем примере используется карусель, у которой прописаны стартовое положение:

state = {
    carouselDeg: 17,
    itemDeg: -17,

carouselDeg - поворот элементов основной окружности в градусах. Опытным путем можно понять, что оно задается как:
(360 / кол-во элементов) / 2
Элементов у вас 10, значит, должно быть 18 градусов, а не 17 (можно заметить, что с 17 неровное начальное смещение).
itemDeg - вращение контента внутри одного элемента. Если хотите, чтобы контент всегда был обращен горизонтально, то берете ту же формулу со знаком минус.
Далее, есть такие методы:

next = () => {
    this.getIdItems(true);
    this.setState(state => ({
      carouselDeg: state.carouselDeg - 36,
      itemDeg: state.itemDeg + 36
    }));
  };

  prev = () => {
    this.getIdItems(false);
    this.setState(state => ({
      carouselDeg: state.carouselDeg + 36,
      itemDeg: state.itemDeg - 36
    }));
  };

Число 36 - это шаг вращения, он вычисляется как:
360 / кол-во элементов
В принципе все, что нужно знать для правильной ориентации карусели.
Прорисовкой элементов карусели занимается сама библиотека, позиции элементов на плоскости вам вычислять не нужно.