我有两个矩形-一个带有填充(蓝色)和一个带有笔触(红色)的矩形。红色矩形正在偏移(取决于笔触宽度),以使其显得紧实且位于蓝色矩形的边缘之外。

此设置非常有用,除了需要拐角时。

如您所见,我在矩形之间出现了缝隙,我一直在试图找出数学公式以计算外部矩形(红色)的正确圆度值。

有什么想法吗?



评论

我正在考虑对Nero的答案采取类似的解决方案,但是您已将此贝塞尔曲线弯曲了。您是要限制使用厚度的Bezier曲线,还是实际上可以选择绘制圆弧?

#1 楼

您(可能)想要实现的目标是这样的:



仔细观察其中一个角并添加几条线,我们看到:



黑线表示沿红色和蓝色框的边界的圆心相同。例如,如果红色框的外半径为$ 50px $,而红色框和蓝色框的外边界之间的距离为$ 25px $,则边框的半径为$ 50px-25px = 25px $蓝色的盒子。显然,该距离取决于红色笔触的笔触宽度。


注意:创建上述图像时,我只画了两个带有圆角的填充框。因此,首先是一个填充的红色框,然后是一个上方的较小的填充的蓝色框。这样也可以避免由于舍入误差(无双关)而使某些像素留白。

评论


$ \ begingroup $
是的,这就是我所追求的,但是仍然存在重叠。如果有帮助,我正在使用Adobe After Effects的形状图层和表达式来创建它。矩形1驱动矩形2的圆角值。例如矩形1的圆角= 30矩形2的笔划宽度= 40圆角= 60(30 * 2)产生以下效果:!rectangles2我将矩形1的不透明度设置为50%,这样您就可以看到重叠。较深的紫色是矩形2的笔触边缘。如果有帮助,我可以提供After Effects文件。
$ \ endgroup $
– Greg Gunn
15年11月18日在20:37

$ \ begingroup $
@GregGunn如果您的内部/蓝色框的边框半径为$ 30px $,而红色笔触的宽度为$ 40px $,则红色笔触中间的半径为$ 30px +(40px / 2 )= 50px $。
$ \ endgroup $
– Nero
2015年11月18日在20:46

$ \ begingroup $
@Nero钉了它。该方程式非常有效-谢谢。
$ \ endgroup $
– Greg Gunn
2015年11月18日在20:58