У меня есть круглая кнопка, которую я хочу заключить в другую круглую кнопку. Содержащий округлый элемент всегда должен находиться на расстоянии 1 пикселя от кнопки.
Если я сделаю радиус на контейнере слишком маленьким, то вокруг углов будет больше зазор.
Есть ли хорошее эмпирическое правило, которое я могу использовать, чтобы выяснить, каким должен быть радиус для большего округлого угла?
Ответы:
Если вы хотите, чтобы внешний округлый прямоугольник находился на расстоянии 1 пикселя от внутреннего, то угловой радиус внешнего прямоугольника также должен быть на 1 пиксель больше радиуса внутреннего.
Вот краткая диаграмма, которая может помочь вам увидеть, как это работает:
внутренний прямоугольник имеет угловой радиус r пикселей; его угол следует дуге внутреннего красного круга, который имеет радиус r пикселей, а его центр, соответственно, на r пикселей от сторон прямоугольника.
Внешний прямоугольник имеет угловой радиус r +1 пикселей; его угол следует за дугой внешнего красного круга, который имеет радиус r +1 пикселей, а его центр соответственно на r +1 пикселей от сторон прямоугольника. Поскольку внешний прямоугольник также сдвинут на один пиксель вверх и вправо от внутреннего (и, как мы можем предположить, на два пикселя шире и выше для компенсации), эти два круга являются концентрическими, а расстояние между ними всегда составляет один пиксель.
Если вы хотите, чтобы углы имели общие центры, угловой радиус внешней фигуры должен быть просто угловым радиусом внутренней фигуры плюс расстояние между фигурами. Если ваша внутренняя форма имеет закругленный угловой радиус 5 пикселей, а ваша внешняя форма находится на расстоянии 1 пиксель, угловой радиус внешней формы должен составлять 6 пикселей. (Без учета каких-либо удельных весов.)
