Чтобы не использовать size в качестве термина как для их визуального измерения на экране, так и для их начального value, давайте назовем их size (визуальное) и weight (их соответствующее число).
Довольно просто определить радиус на основе текущего веса (фактически, радиус может быть весом, если вы масштабируете весь результат вниз / вверх, чтобы соответствовать доступному пространству, после того как вы ' готово рисование).
Как только вы определили их радиус (размер), вы можете пойти дальше и нарисовать первый. На самом деле не имеет значения, где вы рисуете, потому что позже вы переместите всю композицию, основываясь на полученном окне просмотра.
Вам также понадобится предпочтительный угол, под которым рисуется второй (вероятно, -60 градусов). Другим параметром, который нужно установить, является расстояние между кругами, которое вы, вероятно, хотите установить постоянным. 10% самого большого размера кажется хорошим, но вы всегда можете вернуться и настроить его при необходимости. Используя все вышеперечисленное и координаты первого центра, вы можете определить координаты второго центра.
Вероятно, самая сложная часть - это определить координаты третьего центра, когда у вас есть первые два, и длину каждой стороны результирующего треугольника. Но это только тригонометрия .
Используя ту же технику, вы можете определить каждый из последующих центров. Вы можете определить центр 4 из центров 1 и 3, центр 5 из 1 и 4 и так далее. Чтобы ваш алгоритм был идеальным, вам нужен способ определить, когда вам больше не нужно использовать центр 1 + последний добавленный, а другой центр (когда улитка кругов делает полный круг и использование C1 приведет к перекрытию с круг 2 - это будет сложнее и потребует отслеживания угла - однако для вашего случая этот расчет не требуется).
Однако, если вам это нужно (для создания улиток), вам понадобится метод, который проверяет перекрытие, например:
- попытаться определить следующий круг, используя центры первого и последнего
- если центр результирующего круга ближе к любому другому центру, чем к сумме их радиусов плюс разрыв, вы перекрываетесь, попробуйте использовать 2-й и последний ...
- продолжайте, пока у вас не будет перекрытия
Когда вы закончите, все, что вам нужно сделать, это определить размер всего получающегося чертежа, чтобы вы могли правильно расположить и изменить его размер в доступном пространстве.
Что довольно просто (вы вычисляете верх, левый, нижний и правый для каждого круга по их центральным позициям и радиусам) и подаете их в несколько лотов (массивы - значения левых точек, значения правых точек, вершины и основания). Самый низкий из левых, самый низкий из низов, самый высокий из прав и самый высокий из вершин определяют ваш viewbox, в котором у вас есть ширина и высота, так что вы можете изменить размер и расположить всю композицию в родительском.
Опытному разработчику программного обеспечения понадобится ~ 1 час, чтобы написать все вышеперечисленное. В настоящее время вашей самой большой проблемой является то, что вы не записали логические этапы процедуры и не написали код ни для одного из этих этапов.
Я полагаю, что мой ответ поможет с логическими шагами, и я предлагаю вам написать ту часть, которую вы действительно знаете, как решить, и не учесть те моменты, которые вы не знаете (если таковые имеются). В этот момент вы сможете задать гораздо более подходящий и хорошо принятый вопрос о SO, на который многие люди, вероятно, ответят или помогут.
Редактировать Ваш вопрос вернулся, меня мучает (это тип проблемы, которую мне нравится решать). Поэтому я использовал его в качестве предлога, чтобы взять Vue.js за спин, что я и хотел делать в течение некоторого времени. Вот результат .
Примечание : в нем нет метода проверки перекрытия, о котором я говорил выше (он просто вращается вокруг первого круга), и, скорее всего, я не буду его кодировать. Признаюсь, мне никогда не нравилась тригонометрия. :)