使用 CSS Houdini 绘制平滑圆角
原文链接: http://iamvdo.me/en/blog/smooth-corners-with-css-houdini
已得到原文作者 Vincent De Oliveira 许可
最近,我在推特分享了一篇关于人机交互界面的视错觉的文章。我向来喜欢视错觉,但这篇文章传达了一个新观点:与几何上的正圆比起来,一个微调过的圆形有可能给人以更加圆的感觉,而这一点对于圆角矩形同样适用。同时,我也惊奇地发现苹果从 iOS 7 开始就对系统图标做了同样的调整。在数学上,我们称这个调整过的圆角矩形在为超椭圆。
iOS 6 与 iOS 7 的图标外形差异
与此同时,为了准备一场讲演,我做了一些关于 CSS Houdini 的绘图 API(Paint API)的实验。这个 API 定义了一种新的在浏览器的渲染阶段往 CSS 图像中添加内容的方式。简单地说,浏览器给我们提供了用程序绘制一个 CSS 图像并用作背景的能力。因此,我们应该可以很简单地绘制一个超椭圆。
几个星期后,Sketch 添加了一个平滑圆角(smooth corners)的功能。据我所知,平滑圆角实际上就是超椭圆。我喜欢「平滑圆角」这个名字,于是在这