동심원 둥근 사각형의 모서리 반경 (반경)을 계산하는 방법

다른 둥근 사각형 안에 포함하고 싶은 둥근 사각형 버튼이 있습니다. 포함 된 둥근 사각형은 항상 버튼에서 1px 떨어져 있어야합니다.

컨테이너의 반경을 너무 작게하면 모서리 주위에 더 큰 간격이 있습니다.

더 큰 원형 교정을 위해 반지름이 무엇인지 알아내는 데 사용할 수있는 좋은 "규칙"이 있습니까?

바깥 쪽 둥근 사각형을 안쪽 사각형에서 1px 떨어진 곳에 두려면 바깥 쪽 사각형의 모서리 반경도 안쪽 사각형의 모서리 반경보다 1px 커야합니다.

작동 방식을 확인할 수있는 간단한 다이어그램은 다음과 같습니다

. 내부 사각형의 모서리 반경은 r 픽셀입니다. 그것의 모서리는 내부 적색 원의 호를 따르며, 이는 r 픽셀 의 반경을 가지며 그 중심 은 사각형의 측면으로부터 r 픽셀만큼 떨어져있다.

외부 사각형의 모서리 반경은 r +1 픽셀입니다. 그것의 코너는 r +1 픽셀 의 반경 과 그에 상응하는 r +1 픽셀의 사각형의 측면 을 갖는 외부 적색 원의 호를 따른다 . 외부 사각형도 내부의 오른쪽과 오른쪽으로 한 픽셀 위로 이동하기 때문에 ( 보충하기 위해 두 픽셀이 더 넓고 더 크다고 가정 할 수 있음 ) 두 원은 동심이며, 그 사이의 거리는 항상 한 픽셀입니다.

모서리가 공유 중심을 갖도록하려면 외부 모양의 모서리 반경은 단순히 내부 모양의 모서리 반경에 모양 사이의 거리를 더한 것이어야합니다. 내부 모양의 둥근 모서리 반경이 5 픽셀이고 외부 모양이 1 픽셀 인 경우 외부 모양의 모서리 반경은 6 픽셀이어야합니다. (스트로크 가중치를 고려하지 않음)