Eu tenho um botão roundrect que eu quero conter dentro de outra roundrect. O roundrect contendo sempre deve estar 1px do botão.
Se eu diminuir o raio do contêiner, os cantos terão uma lacuna maior ao seu redor.
Existe uma boa "regra de ouro" que eu possa usar para descobrir qual deve ser o raio para o roundrect maior?
Respostas:
Se você deseja que o roundrect externo fique 1px distante do interno, o raio do canto do retângulo externo também deve ser 1px maior que o interno.
Aqui está um diagrama rápido que pode ajudá-lo a ver como funciona:
O retângulo interno possui um raio de canto de r pixels; seu canto segue o arco do círculo vermelho interno, que tem um raio de r pixels e seu centro correspondentemente r pixels de distância dos lados do retângulo.
O retângulo externo possui um raio de canto de r +1 pixels; seu canto segue o arco do círculo vermelho externo, que possui um raio de r +1 pixels e seu centro correspondentemente r +1 pixels longe dos lados do retângulo. Como o retângulo externo também é deslocado um pixel para cima e para a direita do interior (e, podemos presumir, é dois pixels mais largo e mais alto para compensar), os dois círculos são concêntricos e a distância entre eles é sempre um pixel.
Se você deseja que os cantos tenham centros compartilhados, o raio do canto da forma externa deve ser simplesmente o raio do canto da forma interna mais a distância entre as formas. Se sua forma interna tiver um raio de canto arredondado de 5 pixels e sua forma externa estiver a 1 pixel de distância, o raio de canto da forma externa deverá ser de 6 pixels. (Não levando em consideração nenhum peso de curso).
