Как построить залитую перемычку, касающуюся двух окружностей по краям

Перемычка может касаться окружности, не соединяясь плавно с её контуром. Если расположить её углы в произвольных точках окружности, получится соприкосновение, но сторона перемычки всё ещё может образовать заметный угол. Чтобы переход был плавным, эта сторона должна идти по касательной к окружности в точке касания.

Для двух раздельных окружностей используйте пару внешних общих касательных — прямых, проходящих с внешней стороны обеих окружностей. Каждая точка касания лежит на своей окружности, а радиус, проведённый через неё, перпендикулярен касательной. Именно эти условия описаны в уравнениях касательных к двум окружностям в Wolfram MathWorld.

Четыре точки касания задают четырёхугольник, по которому строится перемычка. Две его длинные стороны образуют видимые края перемычки; две замыкающие стороны проходят через окружности. Эти замыкающие стороны исчезнут при объединении фигур или удалении областей пересечения с окружностями.

Так строится соединитель с прямыми сторонами. Для соединителя, сужающегося внутрь и изгибающегося внутрь, понадобится другой способ построения кривых: одних точек касания недостаточно, чтобы задать такую форму.

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

В Inkscape выберите инструмент «Эллипс» клавишей E, затем, удерживая Ctrl, перетащите курсор, чтобы создать окружность. Чтобы задать точные размеры, введите одинаковые значения Rx и Ry в настройках инструмента. Если объект является дугой или сегментом, перед продолжением нажмите Сделать эллипс целым. Эти настройки описаны в руководстве Inkscape по окружностям, эллипсам и дугам.

Откройте Объект → Заливка и обводка. Задайте сплошную заливку и выберите значок в виде крестика Без заливки в разделе «Цвет обводки». При проверке построения оставьте непрозрачность равной 100%. Настройки описаны в разделе Диалоговое окно «Заливка и обводка».

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

Используйте приведённые ниже размеры для примера. Они намеренно задают сильно сужающийся соединитель, чтобы точки касания было легче рассмотреть. Координаты указаны в пикселях; x увеличивается вправо, а y — вниз.

Объект	Центр	Радиус	Ограничивающий прямоугольник
Окружность A	(100, 100)	70	x = 30–170; y = 30–170
Окружность B	(200, 100)	10	x = 190–210; y = 90–110

Расстояние между центрами равно 100 единицам. Вычитая радиусы, получаем зазор в 20 единиц между ближайшими краями окружностей. Перемычка должна перекрывать этот зазор и плавно переходить в контуры окружностей.

Для этих окружностей четыре точки касания касательных имеют следующие координаты:

Точка	Расположение	Координаты
A верхняя	Верхняя точка касания окружности A	(142, 44)
B верхняя	Верхняя точка касания окружности B	(206, 92)
B нижняя	Нижняя точка касания окружности B	(206, 108)
A нижняя	Нижняя точка касания окружности A	(142, 156)

Выберите инструмент Безье/Перо и создайте контур с четырьмя углами в порядке, указанном в таблице. Щёлкните по каждому углу, не перетаскивая курсор, затем щёлкните по начальной точке, чтобы замкнуть контур. Задайте ему ту же сплошную заливку, что и окружностям, и удалите обводку.

Чтобы точно расположить точки, сначала нарисуйте четырёхугольник приблизительно. Переключитесь на инструмент «Узлы» клавишей N, выбирайте по одному узлу и вводите его координаты x и y в настройках инструмента. В качестве единицы измерения выберите пиксели. Числовые поля описаны в разделе Параметры инструмента «Узлы».

При соединении точек обходите периметр: A верхняя → B верхняя → B нижняя → A нижняя → замкнуть. Если соединить точки по диагонали через фигуру, получится пересекающийся контур вместо задуманной залитой перемычки.

Приведённые координаты были проверены детерминированным расчётом: расстояние от каждой точки касания до центра её окружности правильное, а каждая длинная сторона перемычки перпендикулярна соответствующим радиусам, проведённым к точкам касания.

Выберите итоговую структуру в зависимости от того, как вы хотите редактировать или раскрашивать персонажа.

Желаемый результат	Построение
Единый силуэт одного цвета	Объединить обе окружности и четырёхугольник
Перемычка отдельного цвета, заканчивающаяся у окружностей	Вычесть копии окружностей из четырёхугольника
Построение, которое можно корректировать позднее	Сохранить исходные окружности и четырёхугольник до выполнения любой из операций

Чтобы получить единый силуэт, выделите обе окружности и четырёхугольник, затем выберите Контур → Объединить. Чтобы получить отдельную перемычку, продублируйте окружности, объедините копии в один вычитающий объект и поместите его над четырёхугольником. Выделите вычитающий объект и четырёхугольник, затем выберите Контур → Разность. Исходные окружности в это выделение включать не нужно.

Операция «Разность» удаляет перекрывающиеся области окружностей, оставляя изогнутые концы перемычки, повторяющие обращённые друг к другу границы окружностей. Операция «Объединить» сохраняет общий залитый контур. Эти операции и важность порядка наложения объяснены в руководстве Inkscape по логическим операциям.

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

Следующая формула — выведенный вспомогательный метод, основанный на условиях длины радиуса и перпендикулярности из уравнений касательных в MathWorld. Она подходит для окружностей в произвольных положениях, поэтому горизонтальное выравнивание не требуется.

Пусть центры окружностей равны A = (ax, ay) и B = (bx, by), а радиусы rA и rB положительны. Сначала рассчитайте расстояние между центрами и единичный вектор, направленный от A к B:

d = sqrt((bx − ax)² + (by − ay)²)

u = (ux, uy) = ((bx − ax) / d, (by − ay) / d)

Постройте перпендикулярный ему единичный вектор v = (−uy, ux). Затем рассчитайте:

q = (rA − rB) / d

s = sqrt(1 − q²)

n₁ = q·u + s·v

n₂ = q·u − s·v

Здесь умножение вектора означает умножение каждой его компоненты на скаляр. Каждый вектор n направлен от центра к точке касания. Четыре точки имеют координаты:

• A₁ = A + rA·n₁
• B₁ = B + rB·n₁
• A₂ = A + rA·n₂
• B₂ = B + rB·n₂

Нарисуйте периметр в порядке A₁ → B₁ → B₂ → A₂ → замкнуть. В зависимости от расположения окружностей и ориентации координат верхней стороной может оказаться любая из нормалей.

В примере u = (1, 0), q = 0.6, а s = 0.8. Две нормали равны (0.6, 0.8) и (0.6, −0.8). Умножение каждой из них на соответствующий радиус и прибавление координат центра дают четыре координаты, приведённые выше.

Построение напрямую следует из этих векторов: длина каждой нормали равна единице, поэтому точка касания лежит на окружности. Скалярное произведение этой нормали на отрезок между соответствующими точками касания равно нулю, что и задаёт касание. Для окружностей одинакового радиуса q = 0, поэтому стороны перемычки параллельны линии, соединяющей центры.

Для задачи с раздельными окружностями требуется условие d > rA + rB. Тогда между ними остаётся зазор, который нужно заполнить перемычкой. Если окружности уже пересекаются, их объединение всё ещё может быть полезным, но получится решение другой задачи построения.

Для самой формулы требуется условие d > |rA − rB|, чтобы существовали две различные внешние касательные. При равенстве построение касательных вырождается. Ниже этого предела одна окружность находится внутри другой, и подкоренное выражение не имеет действительного значения. При совпадающих центрах расчёт единичного вектора также не определён. Эти ограничения следуют из приведённой выше формулы.

Пересчитывайте точки касания при каждом перемещении или изменении размера любой окружности. Если подправить угол перемычки на глаз, можно сохранить соприкосновение, но потерять касание. Растяжение окружности в эллипс также изменяет геометрию: эта формула для окружностей к нему уже неприменима.

Рассмотрите результат и при большом увеличении, и в предполагаемом размере отображения. Чтобы определить причину видимого дефекта, выполните следующие действия:

1. Проверьте заливку. Убедитесь, что четырёхугольник замкнут, залит и не содержит пересекающихся отрезков.
2. Проверьте геометрию окружностей. Сверьте центры, радиусы и единицы измерения с расчётом.
3. Проверьте четыре точки касания. Исправьте координаты узлов, прежде чем менять управляющие маркеры кривых.
4. Проверьте итоговую структуру. Убедитесь, что операция «Объединить» или «Разность» создала задуманный силуэт или отдельную перемычку.
5. Проверьте обводку. Добавьте обводку готовому силуэту, если этого требует дизайн; если обводка задана отдельным частям, проверьте, не появились ли нежелательные внутренние границы.

Для численной проверки измерьте расстояние от каждой точки касания до её центра: оно должно равняться радиусу окружности. Затем проверьте, перпендикулярна ли каждая видимая сторона перемычки соответствующим радиусам. Так можно отличить точное соединение от того, которое лишь кажется ровным.

Когда точки касания заданы правильно, остаётся выбрать структуру изображения: единый силуэт или отдельные залитые фигуры. Сохраните исходные окружности и рассчитанные точки, и вы сможете заново построить такую перемычку с точным прилеганием к краям, когда изменятся пропорции персонажа.

• Окружности, эллипсы и дуги — руководство для начинающих по Inkscape
• Диалоговое окно «Заливка и обводка» — руководство для начинающих по Inkscape
• Параметры инструмента «Узлы» — руководство для начинающих по Inkscape
• Логические операции — руководство для начинающих по Inkscape
• Касательные к двум окружностям — Wolfram MathWorld