如何计算同心圆角矩形的角半径(半径)

平面设计 adobe-photoshop
2021-12-27 12:33:00

我有一个圆形按钮,我想包含在另一个圆形矩形中。包含的圆形矩形应始终距离按钮 1 像素。

如果我将容器上的半径设置得太小,那么角落周围的间隙就会更大。

是否有一个很好的“经验法则”可以用来确定较大圆形矩形的半径应该是多少?

2个回答

如果你想让外圆距内圆1px,那么外圆的圆角半径也应该比内圆大1px。

这是一个可以帮助您了解其工作原理的快速图表:
圆角半径图
内部矩形的角半径为r像素;它的角沿着内部红色圆圈的弧线,其半径为r个像素,其中心对应于远离矩形边的r个像素。

外矩形的角半径为r +1 个像素;它的角沿着外部红色圆圈的弧线,其半径为r +1 个像素,其中心相应地远离矩形的边r +1 个像素。由于外部矩形也向上和内部向右移动了一个像素(并且,我们可以假设,是宽和高两个像素来补偿),两个圆是同心的,它们之间的距离总是一个像素。

如果您希望拐角具有共享中心,则外部形状的拐角半径应该只是内部形状的拐角半径加上形状之间的距离。如果您的内部形状的圆角半径为 5 像素,而您的外部形状距离 1 像素,则外部形状的圆角半径应为 6 像素。(不考虑任何笔画权重。)

在此处输入图像描述