Как рассчитать радиусы (радиусы) углов для концентрических закругленных ребер

9

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

Если я сделаю радиус на контейнере слишком маленьким, то вокруг углов будет больше зазор.

Есть ли хорошее эмпирическое правило, которое я могу использовать, чтобы выяснить, каким должен быть радиус для большего округлого угла?

adobe-photoshop Майк Брэнд
источник

Ответы:

12

Если вы хотите, чтобы внешний округлый прямоугольник находился на расстоянии 1 пикселя от внутреннего, то угловой радиус внешнего прямоугольника также должен быть на 1 пиксель больше радиуса внутреннего.

Вот краткая диаграмма, которая может помочь вам увидеть, как это работает:
Диаграмма углового радиуса
внутренний прямоугольник имеет угловой радиус r пикселей; его угол следует дуге внутреннего красного круга, который имеет радиус r пикселей, а его центр, соответственно, на r пикселей от сторон прямоугольника.

Внешний прямоугольник имеет угловой радиус r +1 пикселей; его угол следует за дугой внешнего красного круга, который имеет радиус r +1 пикселей, а его центр соответственно на r +1 пикселей от сторон прямоугольника. Поскольку внешний прямоугольник также сдвинут на один пиксель вверх и вправо от внутреннего (и, как мы можем предположить, на два пикселя шире и выше для компенсации), эти два круга являются концентрическими, а расстояние между ними всегда составляет один пиксель.

Илмари Каронен
источник
Я рад, что ответ так прост!
Майк Брэнд
Я попытался воссоздать это, сравнив круглый прямоугольник с внешней границей 50 пикселей и новый (на 50 пикселей шире и выше) круглый прямоугольник с радиусом более 50 пикселей. Они не совсем совпадают, но теперь я представляю, что это в основном причудливая схема рендеринга Photoshop. Спасибо за ваш ответ!
Майк Брэнд
@ Майк: Помните, что расстояние должно быть добавлено к обеим сторонам прямоугольника. Поэтому, если вы хотите, чтобы внешняя граница прямоугольника была в 50 пикселей от внутренней, вам нужно сделать внешний прямоугольник на 100 пикселей шире и выше внутреннего (и увеличить радиус угла на 50 пикселей).
Илмари Каронен
6

Если вы хотите, чтобы углы имели общие центры, угловой радиус внешней фигуры должен быть просто угловым радиусом внутренней фигуры плюс расстояние между фигурами. Если ваша внутренняя форма имеет закругленный угловой радиус 5 пикселей, а ваша внешняя форма находится на расстоянии 1 пиксель, угловой радиус внешней формы должен составлять 6 пикселей. (Без учета каких-либо удельных весов.)

введите описание изображения здесь

Farray
источник