贝赛尔工具在 photoshop 中叫“钢笔工具”;在 CorelDraw 中翻译成“贝赛尔工具”;而在 Fireworks 中叫“画笔”. 它是用来“画线”造型的一种专业工具. 当然还有很多工具也可以完成画线的工作,例如常用的photoshop里的直线、喷枪、画笔工具,Fireworks里的直线、铅笔和笔刷工具,CorelDraw里的自由笔,手绘工具等等.
很多设计师应该都知道贝塞尔曲线,习惯用 PS 的会用钢笔工具,习惯用AI 的会用贝塞尔,因为它所绘制出来的曲线很容易受控制,也很美观.
下面深入了解下贝塞尔曲线的数学原理和公式.
在数学中,贝塞尔曲线又分为很多种,如,一阶贝塞尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线,等等. 除了一阶贝塞尔曲线是直线外,剩下的多阶贝塞尔曲线都是抛物线. 贝塞尔曲线由起点、终点和控制点组成,根据控制点的个数和位置决定了这个曲线的最终样式.
1. 原理
先在一个平面内任选 3 个不共线的点,依次用线段连接,如图:
在第一条线段上任选一个点 D,计算该点到线段起点的距离 AD,与该线段总长 AB 的比例.
根据上一步得到的比例,从第二条线段上找出对应的点 E,使得 AD:AB = BE:BC.
连接这两点 DE.
从新的线段 DE 上再次找出相同比例的点 F,使得 DF:DE = AD:AB=BE:BC.
到这里,就确定了贝塞尔曲线上的一个点 F. 接下来,稍微回想一下中学所学的极限知识,让选取的点 D 在第一条线段上从起点 A 移动到终点 B,找出所有的贝塞尔曲线上的点 F. 所有的点找出来以后,也就得到了这条贝塞尔曲线.
如果想象不出来,可以看下面的动画.
到这里,已经大概了解贝塞尔曲线绘制的过程了.
下面看公式.
2. 公式
以下公式中:
$B(t)$ 为 $t$ 时间下点的坐标;
$P_0$ 为起点;$P_n$ 为终点,$P_i$ 为控制点.
2.1. 一阶贝塞尔曲线
一阶贝塞尔曲线只有起点和终点,并没有控制点,所以绘制出来的图形仅仅只是一条直线,那么在时间 t 为 1 秒的情况下,其公式为:
$$
B(t) = (1 – t) P_0 + tP_1, t \in [0, 1]
$$
意义:由 $P_0$ 至 $P_1$ 的连续点, 描述的一条线段.
2.2. 二阶贝塞尔曲线
二阶贝塞尔曲线只存在一个控制点,此时从起点到终点的线段发生变化,具体的变化是由控制点的位置而改变的. 图中,绿色的线段为红色曲线的切线.
$$
B(t) = (1 – t)^2 P_0 + 2t(1 – t)P_1 + t^2 P_2, t \in [0, 1]
$$
仅仅只是简单的一元二次方程式.
原理:由 $P_0$ 至 $P_1$ 的连续点 $Q_0$,描述一条线段;由 $P_1$ 至 $P_2$ 的连续点 $Q_1$,描述一条线段;由 $Q_0$ 至 $Q_1$ 的连续点 $B(t)$,描述一条二次贝塞尔曲线.
Python 示例如:#!/usr/bin/python3
#!–*– coding: utf-8 –*–
import numpy as np
import matplotlib.pyplot as plt
P0, P1, P2 = np.array([[0, 0], [2, 4], [5, 3]])
# 定义贝塞尔曲线
P = lambda t: (1 – t)**2 * P0 + 2 * t * (1 – t) * P1 + t**2 * P2
# 在 [0, 1] 范围内的 50 个点上验证贝塞尔曲线
points = np.array([P(t) for t in np.linspace(0, 1, 50)])
# 分别获取点的 x 坐标和 y 坐标
x, y = points[:, 0], points[:, 1]
#
plt.plot(x, y, ‘b-‘)
plt.plot(*P0, ‘r.’)
plt.plot(*P1, ‘r.’)
plt.plot(*P2, ‘r.’)
plt.show()
如:
<