在前端设计中，常使用border-radius属性构造圆角矩形，以形成视觉上的美感。在工业设计中，也存在大量圆角过渡设计。在工业设计中，根据两条线连接的方式，划分了G0-G4五个等级[1]参考资料。

  • G0——点连续：只要两个点碰到就可以；
  • G1——相切连续：没有棱角，所有点之间都是相切关系；
  • G2——曲率连续：平滑过渡，曲率是连续变化的；
  • G3——曲率变化率连续：更平滑，曲率的变化率也是连续的；
  • G4——曲率变化率的变化率连续：极致丝滑。

我们常用的border-radius可以实现G1级别的切线连续圆角，而现在，越来越多的设计开始使用G2以上级别的圆角。G2以上级别的圆角过渡更加平滑，也更美观、更耐看。
目前博客的音乐控制器、小组件等就是采用的G2级别的曲率连续圆角。

图1 切线连续圆角（左）与曲率连续圆角（右）对比[2]参考资料

新建paint.js

在路径source/js文件夹下新建一个paint.js文件，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class SmoothCorners {
    static get inputProperties() {
        return ['--smooth-level'];
    }
    paint(ctx, geom, properties) {
        const radius = parseInt(properties.get('--smooth-level').toString());
        const path = new Path2D();
        path.moveTo(radius, 0);
        path.lineTo(geom.width - radius, 0);
        path.quadraticCurveTo(geom.width, 0, geom.width, radius);
        path.lineTo(geom.width, geom.height - radius);
        path.quadraticCurveTo(geom.width, geom.height, geom.width - radius, geom.height);
        path.lineTo(radius, geom.height);
        path.quadraticCurveTo(0, geom.height, 0, geom.height - radius);
        path.lineTo(0, radius);
        path.quadraticCurveTo(0, 0, radius, 0);
        ctx.fill(path);
    }
}
registerPaint('smooth-corners', SmoothCorners);

注册为Paint Worklet

在自建js函数中加入以下代码：

1
if ('paintWorklet' in CSS) {CSS.paintWorklet.addModule('js/paint.js');}

或者，也可以在主题设置文件_config.butterfly.yml中更改：

1
2
3
4
inject:
  head:
  bottom:
+    - <script>if ('paintWorklet' in CSS) {CSS.paintWorklet.addModule('js/paint.js');}</script>

使用方法

在对应样式中添加以下属性参数即可，此时主要通过--smooth-level值调整圆角大小。

1
2
3
4
border-radius: 0;
mask-image: paint(smooth-corners);
-webkit-mask-image: paint(smooth-corners);
--smooth-level: 7; /*曲率连续圆角*/

参考文章

[1]

小米200万的Logo是如何绘制的？先掌握「连续曲率」知识点！

[2]

使用CSS Paint API实现曲率圆角效果