Cómo calcular los radios (radios) de las esquinas para rectificados redondeados concéntricos

9

Tengo un botón roundrect que quiero contener dentro de otro roundrect. El roundrect que contiene siempre debe estar a 1 px del botón.

Si hago que el radio en el contenedor sea demasiado pequeño, entonces las esquinas tienen un espacio más grande a su alrededor.

¿Existe una buena "regla de oro" que pueda usar para determinar cuál debería ser el radio para el rectángulo redondo más grande?

adobe-photoshop Mike Brand
fuente

Respuestas:

12

Si desea que el rectángulo externo esté a 1 px de distancia del interno, entonces el radio de la esquina del rectángulo externo también debe ser 1 px mayor que el del interno.

Aquí hay un diagrama rápido que puede ayudarlo a ver cómo funciona:
Diagrama de radio de esquina
el rectángulo interno tiene un radio de esquina de r píxeles; su esquina sigue el arco del círculo rojo interno, que tiene un radio de r píxeles y su centro correspondiente r píxeles lejos de los lados del rectángulo.

El rectángulo exterior tiene un radio de esquina de r +1 píxeles; su esquina sigue el arco del círculo rojo exterior, que tiene un radio de r +1 píxeles y su centro correspondiente r +1 píxeles lejos de los lados del rectángulo. Dado que el rectángulo exterior también se desplaza un píxel hacia arriba y hacia la derecha del interior (y, podemos suponer, es dos píxeles más ancho y más alto para compensar), los dos círculos son concéntricos, y la distancia entre ellos es siempre un píxel.

Ilmari Karonen
fuente
¡Me alegra que la respuesta sea tan fácil!
Mike Brand el
Intenté recrear esto comparando un rectángulo redondo con un borde exterior de 50 px, y un rectángulo redondo nuevo (50px más ancho y más alto) con un radio 50px más alto. No coincidían del todo, pero ahora imagino que eso es principalmente una peculiaridad de la representación del contorno de Photoshop ¡Gracias por su respuesta!
Mike Brand el
@ Mike: recuerda que la distancia debe agregarse a ambos lados del rectángulo. Entonces, si desea que el borde del rectángulo externo esté a 50 px del interno, debe hacer que el rectángulo externo sea 100 px más ancho y más alto que el interno (y aumentar el radio de la esquina en 50 px).
Ilmari Karonen
6

Si desea que las esquinas tengan centros compartidos, el radio de la esquina de la forma externa debe ser simplemente el radio de la esquina de la forma interna más la distancia entre las formas. Si su forma interna tiene un radio de esquina redondeado de 5 píxeles y su forma externa está a 1 píxel de distancia, el radio de esquina de la forma externa debe ser de 6 píxeles. (No tiene en cuenta ningún peso de carrera).

ingrese la descripción de la imagen aquí

Farray
fuente