Как расположить элементы по кругу?

Question

[Дмитрий Винокуров]

Нужно в зависимости от кол-ва приходящих данных мапить элементы по данной схеме:

1 - если 1 элемент, отображать в верхней точки круга (круг условный отображаться не будет)


2 - последующие элементы отображаются по кругу с равным отступом друг от друга:



3 - нужно задать константу минимального отступа между элементами. Если следующий элемент "не помещается", нужно создать следующую окружность с радиусом R2= R1*2 и повторять предыдущие действия по добавлению элементов.


Вопрос: как расположить элементы по окружности?
Как высчитать расстояние по окружности и тд я знаю, не понимаю как расположить

Comments

[alex4answ]

а react причем ?

[Дмитрий Винокуров]

alex4answ, Убрал, доволен ? :)

[alex4answ]

Дмитрий Винокуров, да, теперь это не попадает в мою ленту вопросов по React)

[Дмитрий Винокуров]

alex4answ, обращайся ;)

[Максим]

Дмитрий Винокуров, https://codepen.io/topicstarter/pen/ZEQYmmK - вариант ?

[Дмитрий Винокуров]

Максим Ленский, не)

[Максим]

Дмитрий Винокуров, почему ?

[Rerurk]

И почему люди в школе не учат геометрию?

[Дмитрий Винокуров]

Максим Ленский, потому-что это хард, ты не знаешь колл-во которое тебе придет с бэка, и ты не можешь просто так взять и под каждое кол-во в константах прописать положение каждого элемента. Это мазохизм, а если их например 100шт?

[Максим]

Дмитрий Винокуров, ну вообще то можно ..это я просто криворукий - есть же типа svg.js или другие - там на автомате это делается

[Rerurk]

Дмитрий Винокуров, у вас квадратики если одинаковые, смотрите в проекцию на диаметр, с количеством уже определитесь, плюс те кто ниже вообрадаемой линии диаметра, таким образом можно и расстояние расчитать

Answer 1

[Дмитрий Винокуров]

Давно не заходил, решил так:

const calculateCoordinate = (count, r, cx, cy) => {
    const sectors = [];
    let startAngle = -90;
    let endAngle = 0;
    let maxCard = 6;
    for (let i=0; i<count; i++)  {
        if (i<=maxCard-1){
            const angle = 360/maxCard;
            endAngle += angle;
            const rad = Math.PI / 180;
            const x = cx + r * Math.cos(startAngle * rad);
            const y = cy + r * Math.sin(startAngle * rad);
            startAngle += angle;
            sectors.push({x, y});
        } else {
            const angle = 360/(count-maxCard);
            endAngle += angle;
            const rad = Math.PI / 180;
            const x = cx + r * 2 * Math.cos(startAngle * rad);
            const y = cy + r * 2 * Math.sin(startAngle * rad);
            startAngle += angle;
            sectors.push({x, y});
        }
    }
    return sectors;
};

При реализации учитывал максимальное кол-во фишек - 20шт. Максимальное кол-во радиусов - 2

Comments

[Дмитрий Винокуров]

count - кол-во,
r - радиус,
cx и cy - координаты центра окружности

Answer 2

[Александр Епихин]

Можно сделать так. Для каждого квадрата высчитывать только угол поворота.

Comments

[Mikha38]

Отличное решение! И не надо никаких формул. Мои вводные это динамичное количество точек, поэтому я сделал вот так!

{Array(6).fill(1).map((_, i, arr) => {
            return(
              <div key={i} className='points' style={{rotate: `${i * 360 / arr.length}deg`}}></div>
            )
          })}

Answer 3

[Денис Инешин]

https://hugogiraudel.com/2013/04/02/items-on-circle/