圆角矩形不是圆：圆角的画法和二阶连续性

【2023-2-21】更新：本文逻辑存在严重缺陷，请查看修订后的新文章。

本文中的所有重要图片都会给出基于Matplotlib的Python绘制代码以供参考

引言

如果在百度搜索圆角矩形的画法，那么多数结果都会告诉你，就是把一个普通矩形的拐角换成相切的 $\frac{1}{4}$ 圆弧，就像 引文1 和 引文2 说的那样。然而，圆角就是圆弧加直线吗？诸君且看下面这张图片，试问哪条曲线更顺滑、圆角更圆润？

毫无疑问是黄线更顺滑一些，蓝线的转角在和直线的连接处（红色箭头）有种折断的感觉。如果我告诉你，蓝线就是 $\frac{1}{4}$ 圆弧和直线连接得到的，你会不会感觉很奇怪：明明连切线都对上了，怎么还会有折断感？

那么，这两条曲线的差别在哪里呢？答：黄线是二阶连续的，而蓝线仅仅是一阶连续。

二阶连续性

为了理解这里“二阶连续”的含义，首先要具备一个基础知识：如何表达和绘制二维平面上的曲线？

相信这篇文章的绝大多数读者都知道函数和函数图像的关系——我们可以使用函数来表达曲线。但是，我们不能用形如 $y=f(x)$ 这样的函数，因为函数是一个单射，如果使用这样的函数，那么在表达会绕回来的曲线时就会有困难，因为这时横坐标 $x$ 对应了两个 $y$ 值：

对于一般的情况，我们可以使用 $x$ 和 $y$ 间的隐函数来表达，引入一个隐变量 $t$ 就行了：$\{\begin{array}{c}x=f_x(t)\\ y=f_y(t)\end{array}$。如果把 $t$ 理解为时间，那么这个方程组实际上就描述了曲线的画法：对应任意的时间点 $t$，方程组给出了要绘制的点 $⟨x,y⟩$。

有了这个基础知识之后，就可以理解“二阶连续”了，这里的“二阶”则是指这 $f_x$ 和 $f_y$ 的二阶导，“连续”就是 $f_x^{\prime \prime }$ 和 $f_y^{\prime \prime }$ 连续的意思。那么问题来了：为什么偏偏要“二阶”呢？

二阶连续的物理含义

“二阶”的要求可以追溯到物理意义上。让我们回忆一下，在物理学中，速度是位置关于时间的导数：$\vec{v}=\frac{\mathrm{d}\vec{x}}{\mathrm{d}t}$，加速度是速度关于时间的导数：$\vec{a}=\frac{\mathrm{d}\vec{v}}{\mathrm{d}t}$，所以加速度是位置关于时间的二阶导数：$\vec{a}=\frac{{\mathrm{d}}^2\vec{x}}{{\mathrm{d}t}^2}$；物体的加速度不是凭空而来，而是由受力决定：$\vec{a}=\frac{\vec{F}}{m}$，加速度与物体的受力情况直接关联。

在这个模型中，由于在任意时刻位置都要满足二阶可导，因此物体的位置和速度都是不能突变的，也就是说，如下的两种运动都是不可能发生的：

而加速度就可以突变了，因为物体的受力可能发生突变，比如两个物体发生了碰撞——事实上，如果不考虑外力，碰撞就是系统内物体加速度突变的充要条件。

现在回到圆角矩形的绘制，让我们想象自己用手抚摸过圆角，这就将曲线的绘制和上面的物理模型联系了起来：

如果曲线不是二阶连续的，那么当手沿着曲线的轨迹运动时，在间断点处二阶导数发生突变，就意味着手就会突然受力，好像撞上了什么东西，因此我们就会感觉到“硌手”。下面这张动图绘制了沿圆弧+直线的轨迹的运动参数变化，可以直观地看到加速度的突变：

设计圆角曲线的函数

有了物理上的运动模型后，我们的思维就不再局限于圆和直线，从而可以重新设计圆角曲线的函数了。我们还是以左上角的圆角为例，目标是设计这样一组函数：$\{\begin{array}{l}x=f_x(t)\\ y=f_y(t)\end{array}$，使得其满足：

$$\{\begin{array}{rlr}& f_x(0)=0,f_y(0)=0& (起点)\\ & f_x(1)=1,f_y(1)=1& (终点)\\ & f_x^{\prime }(0)=0,f_y^{\prime }(0)=1& (起始速度)\\ & f_x^{\prime }(1)=1,f_y^{\prime }(1)=0& (终末速度)\\ & f_x^{\prime \prime }(0)=f_y^{\prime \prime }(0)=f_x^{\prime \prime }(1)=f_y^{\prime \prime }(1)=0& (与直线的连接点二阶连续)\\ & f_x^{\prime \prime },f_y^{\prime \prime }\in C[0,1]& (加速度在闭区间[0,1]上连续)\\ & \forall t\in [0,1]\{\begin{array}{rl}& \frac{f_x(t)+f_x(1-t)}{2}+\frac{f_y(t)+f_y(1-t)}{2}=1\\ & f_y(1-t)-f_y(t)=f_x(1-t)-f_x(t)\end{array}& (关于对角线对称)\end{array}$$

满足要求的函数当然不止一条，事实上，我们有很大的设计空间，那么，怎么从中找一条出来呢？

我们从二阶导数，也就是加速度函数入手，在设计出加速度函数后，只需要求解不定积分，就可以轻松满足前四项约束了。为此，我们首先分析上述约束对加速度函数的要求：

• 速度约束

  $$\begin{gathered} f_x^{\prime }(1)-f_x^{\prime }(0)={\int }_0^1{f}_x^{\prime \prime }(t)\mathrm{d}t=1 \\ {f}_y^{\prime }(1)-f_y^{\prime }(0)={\int }_0^1{f}_y^{\prime \prime }(t)\mathrm{d}t=-1 \end{gathered}$$

• 对称约束

  我们希望画出的圆弧是关于拐角的平分线 $x+y=1$ 对称的，更进一步地，我们不光希望最终轨迹是对称的，最好绘制过程也是关于这条直线对称的，也就是说：

  $$\{\begin{array}{rl}& f_y(1-t)=1-f_x(t)\\ & f_x(1-t)=1-f_y(t)\end{array}$$

  上面的两个公式其实说了同一件事：$f_y(t)=1-f_x(1-t)$，这意味着我们在设计时只需设计 $f_x^{\prime \prime }$ 即可，$f_y^{\prime \prime }$ 可以直接由此求出来。

现在，问题已经很简单了：设计 $f_x^{\prime \prime }(t)$ 使它在 $0$ 和 $1$ 处为 $0$，并且在 $[0,1]$ 上的积分为 $1$。

这样的函数还不好找吗？一个最简单的函数就是画个三角形：

也可以用正弦函数，更丝滑：

进一步探讨

• 匀速约束

  如果运动的过程是匀速的，那么就意味着我们在绘制曲线时在相同的长度上花费了相同的时间，如果我们画的是虚线而非实线，那么虚线点之间的距离就是均匀的。另一方面，从性能的角度来看，这也很重要，因为我们只关心绘制的最终结果，而不关心过程，如果不均匀，那么就意味着我们绘制的开销和曲线的直观长度不符，这可能会限制我们绘制很长的曲线。

  但其实这是一个伪约束，因为我们总可以通过一个后期处理得到一个均匀化的新解析式。在现实中的直观理解就是，施工队可能花了很多时间找到一条从A到B的路线，然而一旦路修好之后，我们总可以按自己喜欢的速度将这段路走完。在数学上，这就是对原运动过程进行时间上的放缩：

  给定轨迹描述函数 $\{\begin{array}{c}x=f_x(t)\\ y=f_y(t)\end{array}$，我们总可以通过设计一个时间放缩函数 $s$，使得新轨迹函数 $\{\begin{array}{c}x=f_x(s(t))\\ y=f_y(s(t))\end{array}$ 满足 $\sqrt{(\frac{\mathrm{d}x}{\mathrm{d}t}{)}^2+(\frac{\mathrm{d}y}{\mathrm{d}t}{)}^2}=C$，其中 $C$ 为任意设定的速度常数。

  要想求出这个 $s$ 函数，只需要解一个和原轨迹函数相关的微分方程即可，具体过程就不赘述啦！

• 高阶连续

  从最开始的对比图上，我们可以得知，人眼是能分辨一阶连续和二阶连续的区别的，那么肯定有人就会问了：是不是更高阶的更丝滑？如果是，那么能不能做到在连接点处无穷阶连续，不就达到极致丝滑了吗？

  其实设计一个高阶连续的函数并不是什么难事，事实上，我们可以用多项式凑出任意高阶的函数 $P(t)={\sum }_{i=0}^N{a}_i{t}^i$，假设目标为 $k$ 阶连续，则为了求出 $f_x^{\prime \prime }$ 可构建方程组：

  $$\{\begin{array}{rlr}& {\int }_0^{1}P(t)\mathrm{d}t=1& \\ & P^{(m)}(0)=0& \forall m\in [0,k]\\ & P^{(m)}(1)=0& \forall m\in [0,k]\end{array}$$

  由 $P(t)$ 是 $N$ 阶多项式可以得出：
  $$\begin{gathered} {\int }_0^{1}P(t)\mathrm{d}t=\sum _{i=0}^N\frac{a_i}{i+1} \\ {P}^m(t)=\sum _{i=m}^N\left(a_i\cdot \frac{i!}{(i-m)!}\cdot t^{i-m}\right) \end{gathered}$$

  可见前面的方程组实际上是线性方程组，组中共 $2k+3$ 个方程，因此 $P(t)$ 必须要至少为 $2k+2$ 阶多项式才能得到实数解。

  使用上面的方法，我绘制出了 $f_x^{\prime \prime }$ 0~11阶连续对应的曲线：

  
  除了弧变得越来越小了之外，我个人觉得，这些曲线在连接处的顺滑度上看不出什么区别。这也许说明，经过漫长的自然演化后，人类的肉眼恰好进化到了能识别出有危险的二阶不连续拐角，而对高阶不连续就不敏感了。

  现在，我们讨论第二个问题：能不能做到无穷阶连续？答案是不能的，因为如果无穷阶连续，就是在连接点处的无穷阶导数都为零，那么根据泰勒展开式，这条曲线就是 $f(t)\equiv 0$……，那就不可能拐弯了。也许，从另一方面来说，直线就是极致顺滑的曲线。

总结

本文系统讨论了圆角曲线的绘制方法，不仅给出了其数学解析式，更介绍了解析式的设计方法，最后本文通过绘制更高阶的连续曲线，证明了人类肉眼具备且仅具备区分二阶连续曲线的能力（不过也许有眼力好的人能看出最后一张图片曲线的差别）。本文所介绍的方法不仅适用于绘制 90° 拐角的曲线，稍加修改可以实现在任意两条线的断点处绘制任意阶连续的曲线。

附录

文中所有函数图片的绘制代码（按出现顺序给出）：

# %%
from math import cos, pi, sin, factorial
from timeit import repeat
from tkinter import Y

import matplotlib as mpl
import matplotlib.pyplot as plt
import numpy as np
from matplotlib.animation import FuncAnimation

mpl.rcParams["font.family"] = "Microsoft YaHei"


# %%
fig, ax = plt.subplots(1, 1, layout="constrained")
fig.suptitle("哪个更圆润？")
fig.set_size_inches(4, 4)
ax.axis("scaled")
ax.set_xlim([-0.5, 2.5]), ax.set_ylim([-1.5, 1.5])


def circle(t):
    if t < 0:
        return 0, t
    if t > 1:
        return t, 1
    rad = pi / 2 * t
    return 1 - cos(rad), sin(rad)


def sin_acc(t):
    if t < 0:
        return 0, t
    if t > 1:
        return t, 1
    return (
        2 * (1 / 2 * t - sin(pi * t) / (2 * pi)),
        2 * (1 / 2 * t + sin(pi * t) / (2 * pi)),
    )


arr_t = np.arange(-0.5, 1.5, 0.01)
arr_x = np.empty_like(arr_t)
arr_y = np.empty_like(arr_t)

for i, t in enumerate(arr_t):
    arr_x[i], arr_y[i] = circle(t)
ax.plot(arr_x, arr_y)

for i, t in enumerate(arr_t):
    arr_x[i], arr_y[i] = sin_acc(t)
    arr_x[i] += 0.5
    arr_y[i] -= 0.5
ax.plot(arr_x, arr_y)

ax.quiver(-0.2, 0.1, 0.3, 0, color="red")

fig.savefig("1.png")


# %%
fig, ax = plt.subplots(1, 1, layout="constrained")
fig.suptitle("无法用 $y=f(x)$ 表达的曲线")
fig.set_size_inches(4, 4)
ax.axis("scaled")
ax.set_xlim([-2.5, 0.5]), ax.set_ylim([-1.5, 1.5])

arr_t = np.arange(0.5 * pi, 1.5 * pi, 0.01)
arr_x = np.empty_like(arr_t)
arr_y = np.empty_like(arr_t)

for i, t in enumerate(arr_t):
    arr_x[i], arr_y[i] = cos(t) * 2, sin(t)
ax.plot(arr_x, arr_y)
ax.axvline(-1, color="red")

ax.text(-0.9, 0, "$f(x)=?$")

fig.savefig("2.png")


# %%
fig, (ax_l, ax_r) = plt.subplots(1, 2, layout="constrained")
fig.suptitle("不可能发生的两种运动")
fig.set_size_inches(8, 4)

ax_l.set_title("位置传送")
ax_l.axis("scaled")
ax_l.set_xlim([-0.5, 2.5]), ax_l.set_ylim([-0.5, 2.5])

ax_r.set_title("瞬间变速")
ax_r.axis("scaled")
ax_r.set_xlim([-0.5, 2.5]), ax_r.set_ylim([-0.5, 2.5])

dt = 0.05


def animate():
    for t in np.arange(0, 2, dt):
        lx = 0 if t < 1 else t
        ly = t if t < 1 else 2
        ax_l.scatter(lx, ly, 3, color="blue")

        rx = 0 if t < 1 else t - 1
        ry = t
        ax_r.scatter(rx, ry, 3, color="blue")

        yield


ani = FuncAnimation(
    fig, lambda x: None, animate, interval=1000 * dt, repeat=True
)
ani.save("3.gif")


# %%
fig, axd = plt.subplot_mosaic(
    [
        ["p", "p", "x", "v_x", "a_x"],
        ["p", "p", "y", "v_y", "a_y"],
    ],
    layout="constrained",
)

fig.suptitle("圆弧+直线轨迹的运动过程")
fig.set_size_inches(13, 5)

ax_p = axd["p"]
ax_p.set_title(r"$\left$")
ax_p.axis("scaled")
ax_p.set_xlim([-1, 1.5]), ax_p.set_ylim([-1, 1.5])

ax_x, ax_y = axd["x"], axd["y"]
ax_vx, ax_vy = axd["v_x"], axd["v_y"]
ax_ax, ax_ay = axd["a_x"], axd["a_y"]

for axn in ["x", "y", "v_x", "v_y", "a_x", "a_y"]:
    ax = axd[axn]
    ax.set_title(rf"${axn}$")
    ax.set_xlim([-0.5, 1.5]), ax.set_ylim([-1.5, 1.5])
    # ax.axis("scaled")

dt = 0.05


def animate():
    for t in np.arange(-0.5, 0, dt):
        x = -0.5
        y = t
        ax_p.scatter(x, y, 5, color="blue")
        ax_x.scatter(t, x, 3, color="blue")
        ax_y.scatter(t, y, 3, color="blue")

        vx = 0
        vy = 1
        ax_vx.scatter(t, vx, 3, color="blue")
        ax_vy.scatter(t, vy, 3, color="blue")

        ax = 0
        ay = 0
        ax_ax.scatter(t, ax, 3, color="blue")
        ax_ay.scatter(t, ay, 3, color="blue")

        yield

    for t in np.arange(0, 1, dt):
        ang = t * pi / 2

        x = 0.5 - cos(ang)
        y = sin(ang)
        ax_p.scatter(x, y, 5, color="red")
        ax_x.scatter(t, x, 3, color="red")
        ax_y.scatter(t, y, 3, color="red")

        vx = sin(ang)
        vy = cos(ang)
        ax_vx.scatter(t, vx, 3, color="red")
        ax_vy.scatter(t, vy, 3, color="red")

        ax = cos(ang)
        ay = -sin(ang)
        ax_ax.scatter(t, ax, 3, color="red")
        ax_ay.scatter(t, ay, 3, color="red")

        yield

    for t in np.arange(1, 1.5, dt):
        x = t - 0.5
        y = 1
        ax_p.scatter(x, y, 5, color="blue")
        ax_x.scatter(t, x, 3, color="blue")
        ax_y.scatter(t, y, 3, color="blue")

        vx = 1
        vy = 0
        ax_vx.scatter(t, vx, 3, color="blue")
        ax_vy.scatter(t, vy, 3, color="blue")

        ax = 0
        ay = 0
        ax_ax.scatter(t, ax, 3, color="blue")
        ax_ay.scatter(t, ay, 3, color="blue")

        yield


ani = FuncAnimation(
    fig, lambda x: print(".", end=""), animate, interval=1000 * dt, repeat=True
)
ani.save("4.gif")


# %%
fig, axd = plt.subplot_mosaic(
    [
        ["p", "p", "x", "v_x", "a_x"],
        ["p", "p", "y", "v_y", "a_y"],
    ],
    layout="constrained",
)

fig.suptitle("加速度采用线性连续函数")
fig.set_size_inches(13, 5)

ax_p = axd["p"]
ax_p.set_title(r"$\left$")
ax_p.axis("scaled")
ax_p.set_xlim([-1, 1.5]), ax_p.set_ylim([-1, 1.5])

ax_x, ax_y = axd["x"], axd["y"]
ax_vx, ax_vy = axd["v_x"], axd["v_y"]
ax_ax, ax_ay = axd["a_x"], axd["a_y"]

for axn in ["x", "y", "v_x", "v_y", "a_x", "a_y"]:
    ax = axd[axn]
    ax.set_title(rf"${axn}$")
    ax.set_xlim([-0.5, 1.5]), ax.set_ylim([-1.5, 1.5])
    # ax.axis("scaled")

dt = 0.05


def animate():
    for t in np.arange(-0.5, 0, dt):
        x = -0.5
        y = t
        ax_p.scatter(x, y, 5, color="blue")
        ax_x.scatter(t, x, 3, color="blue")
        ax_y.scatter(t, y, 3, color="blue")

        vx = 0
        vy = 1
        ax_vx.scatter(t, vx, 3, color="blue")
        ax_vy.scatter(t, vy, 3, color="blue")

        ax = 0
        ay = 0
        ax_ax.scatter(t, ax, 3, color="blue")
        ax_ay.scatter(t, ay, 3, color="blue")

        yield

    for t in np.arange(0, 1, dt):
        ang = t * pi / 2

        x = 0.5 - cos(ang)
        y = sin(ang)
        ax_p.scatter(x, y, 5, color="red")
        ax_x.scatter(t, x, 3, color="red")
        ax_y.scatter(t, y, 3, color="red")

        vx = t**2 if t < 0.5 else 2 * t - 0.5 * (t - 0.5) ** 2
        vy = 1 - vx
        ax_vx.scatter(t, vx, 3, color="red")
        ax_vy.scatter(t, vy, 3, color="red")

        ax = 2 * t if t < 0.5 else 2 - (t - 0.5)
        ay = -ax
        ax_ax.scatter(t, ax, 3, color="red")
        ax_ay.scatter(t, ay, 3, color="red")

        yield

    for t in np.arange(1, 1.5, dt):
        x = t - 0.5
        y = 1
        ax_p.scatter(x, y, 5, color="blue")
        ax_x.scatter(t, x, 3, color="blue")
        ax_y.scatter(t, y, 3, color="blue")

        vx = 1
        vy = 0
        ax_vx.scatter(t, vx, 3, color="blue")
        ax_vy.scatter(t, vy, 3, color="blue")

        ax = 0
        ay = 0
        ax_ax.scatter(t, ax, 3, color="blue")
        ax_ay.scatter(t, ay, 3, color="blue")

        yield


ani = FuncAnimation(
    fig, lambda x: print(".", end=""), animate, interval=1000 * dt, repeat=True
)
ani.save("5.gif")


# %%
def poly_fx_d2(k: int):
    N = 2 * k + 3  # 2k+2 阶多项式共 2k+3 个待确定系数
    A = np.ndarray((N, N), dtype=np.float64)

    # 积分为 1
    for i in range(N):
        A[0, i] = 1 / (i + 1)

    # P(m)(0) = 0
    for m in range(0, k + 1):
        row = m + 1
        A[row, :m] = 0
        for i in range(m, N):
            A[row, i] = factorial(i) / factorial(i - m) * 0 ** (i - m)

    # P(m)(1) = 0
    for m in range(0, k + 1):
        row = m + 1 + k + 1
        A[row, :m] = 0
        for i in range(m, N):
            A[row, i] = factorial(i) / factorial(i - m) * 1 ** (i - m)

    b = np.zeros(N)
    b[0] = 1

    # print(A, b)
    d2_ai = np.linalg.solve(A, b)
    # fx_d2 = lambda t: d2_ai @ t ** np.arange(len(ai))

    d1_ai = np.ndarray([len(d2_ai) + 1], dtype=np.float64)
    d1_ai[0] = 0
    d1_ai[1:] = d2_ai / np.arange(1, len(d2_ai) + 1, dtype=np.float64)

    ai = np.ndarray([len(d1_ai) + 1], dtype=np.float64)
    ai[0] = 0
    ai[1:] = d1_ai / np.arange(1, len(d1_ai) + 1, dtype=np.float64)

    return lambda t: ai @ t ** np.arange(len(ai))


def plot(ax, k, dx, dy):
    _fx = poly_fx_d2(k)

    def f(t):
        if t < 0:
            x, y = 0, t
        elif t > 1:
            x, y = t, 1
        else:
            x, y = _fx(t), 1 - _fx(1 - t)
        return x + dx, y + dy

    arr_t = np.arange(-0.5, 1.5, 0.01)
    arr_x = np.empty_like(arr_t)
    arr_y = np.empty_like(arr_t)

    for i, t in enumerate(arr_t):
        arr_x[i], arr_y[i] = f(t)
    ax.plot(arr_x, arr_y)


fig, ax = plt.subplots(1, 1, layout="constrained")
fig.set_size_inches(8, 8)
ax.axis("scaled")
ax.set_xlim([0, 3]), ax.set_ylim([-2, 1])

N = 11
dx = dy = 0.0
for k in range(N + 1):
    dx += 0.2
    dy -= 0.2
    plot(ax, k, dx, dy)
    ax.text(dx, dy + 1, k)

fig.suptitle(f"$f_x''$ 0~{N} 阶连续的对比")
fig.savefig("6.png")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387