惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
小众软件
小众软件
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - Franky
Jina AI
Jina AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Y
Y Combinator Blog
V
Visual Studio Blog
C
Check Point Blog
阮一峰的网络日志
阮一峰的网络日志
U
Unit 42
量子位
人人都是产品经理
人人都是产品经理
博客园 - 聂微东
M
MIT News - Artificial intelligence
爱范儿
爱范儿
B
Blog RSS Feed
MyScale Blog
MyScale Blog
H
Help Net Security
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
美团技术团队
L
LangChain Blog
D
Docker

中文博客 on 范叶亮 | Leo Van

多智能体系统 (Multi-Agent System) 确定性和掌控欲 - 你的 AI 不是你的 AI LLM Token 消耗节省计划 (How to Save Token for LLM) 智能体的角色定位和身份演化 (Agent Role Orientation and Identity Evolution) 本地部署 OpenClaw,QwenPaw 和 Hermes Agent (Local Deployment of OpenClaw, QwenPaw and Hermes Agent) 本地部署智能体 - OpenClaw,QwenPaw,Hermes Agent ... 部署 Matrix 服务器 Synapse (Deployment of Matrix Server Synapse) 部署 frp 内网穿透服务 (Deployment of frp NAT Traversal Service) 本地部署大模型服务 (Local Deployment of LLM Services) AI 时代的生产力和生产关系 (Forces and Relations of Production in AI Era) 业余无线电入门 - CQ, CQ, CQ, this is BD1CZP. Calling CQ and standing by. 重构 - 之于代码、之于工作、之于生活 大语言模型微调 (Fine-tuning Large Language Models) 提升图片分辨率和质量 - Invoke AI 101 教程 使用画布创建和组合生成新的图片 - Invoke AI 101 教程 探索 AI 模型和概念适配器 - Invoke AI 101 教程 理解图像到图像和降噪过程 - Invoke AI 101 教程 使用控制层和指示控制图片的生成 - Invoke AI 101 教程 使用 Invoke 创作你的第一张图片 - Invoke AI 101 教程 在 OpenWrt 和群晖中自动申请和部署证书 凡人歌 - 凡人,但不要烦心 Shell 调用方式 fork,exec 和 source (Run Shell with fork, exec and source) 重定向和管道 (Redirect and Pipe) 模型压缩和推理加速 (Model Compression and Inference Acceleration) 我们需要多少种编程语言 (How Many Programming Languages do We Need) 数据可视化小贴士 - 面向动态文档生成,秉承规范、统一和实用的理念 从 rm -rf * 说起 - 喜新、怀旧、再出发 当我谈摄影时,我谈些什么 - 色彩篇 Part 1 CSS 布局和定位 (CSS Layout and Position) 当我谈修图时,我谈些什么 - 色彩篇 Part 1
贝塞尔曲线 (Bézier Curve)
范叶亮 · 2019-02-19 · via 中文博客 on 范叶亮 | Leo Van

贝塞尔曲线

Bézier Curve

分类: 数学, 可视化 / 字数: 1207 / 标签: 贝塞尔曲线, Bézier Curve


知道贝塞尔曲线 (Bézier Curve) 这个名字已经有很长一段时间了,但一直没有去详细了解一番。直到最近想要绘制一个比较复杂的曲线,才发现很多工具都以贝塞尔曲线为基础的,这包括 Adobe 全家桶中的钢笔工具,还有 OmniGraffle 中的曲线。迫于仅靠猜其是如何工作的但一直没猜透的无奈,只能去详细了解一下其原理再使用了。

数学表示

贝塞尔曲线 (Bézier Curve) 是由法国工程师皮埃尔·贝兹 (Pierre Bézier) 于 1962 年所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计 1。贝塞尔曲线最初由保尔·德·卡斯特里奥 (Paul de Casteljau) 于 1959 年运用德卡斯特里奥算法 (De Casteljau’s Algorithm) 开发,以稳定数值的方法求出贝塞尔曲线。

线性贝塞尔曲线

给定点 $P_0, P_1$,线性贝塞尔曲线定义为:

$$ B \left(t\right) = \left(1 - t\right) P_0 + t P_1, t \in \left[0, 1\right] $$

不难看出,线性贝塞尔曲线即为点 $P_0$$P_1$ 之间的线段。

对于 $P_0 = \left(4, 6\right), P_1 = \left(10, 0\right)$,当 $t = 0.25$ 时,线性贝塞尔曲线如下图所示:

线性贝塞尔曲线

整个线性贝塞尔曲线生成过程如下图所示:

线性贝塞尔曲线生成过程

二次贝塞尔曲线

给定点 $P_0, P_1, P_2$,二次贝塞尔曲线定义为:

$$ B \left(t\right) = \left(1 - t\right)^2 P_0 + 2 t \left(1 - t\right) P_1 + t^2 P_2, t \in \left[0, 1\right] $$

对于 $P_0 = \left(0, 0\right), P_1 = \left(4, 6\right), P_2 = \left(10, 0\right)$,当 $t = 0.25$ 时,二次贝塞尔曲线如下图所示:

二次贝塞尔曲线

整个二次贝塞尔曲线生成过程如下图所示:

二次贝塞尔曲线生成过程

三次贝塞尔曲线

给定点 $P_0, P_1, P_2, P_3$,三次贝塞尔曲线定义为:

$$ B \left(t\right) = \left(1 - t\right)^3 P_0 + 3 t \left(1 - t\right)^2 P_1 + 3 t^2 \left(1 - t\right) P_2 + t^3 P_3, t \in \left[0, 1\right] $$

对于 $P_0 = \left(0, 0\right), P_1 = \left(-1, 6\right), P_2 = \left(6, 6\right), P_3 = \left(12, 0\right)$,当 $t = 0.25$ 时,三次贝塞尔曲线如下图所示:

三次贝塞尔曲线

整个三次贝塞尔曲线生成过程如下图所示:

三次贝塞尔曲线生成过程

一般化的贝塞尔曲线

对于一般化的贝塞尔曲线,给定点 $P_0, P_1, \cdots, P_n$$n$ 次贝塞尔曲线定义为:

$$ B \left(t\right) = \sum_{i=0}^{n}{\binom{n}{i} \left(1 - t\right)^{n - i} t^{i} P_i}, t \in \left[0, 1\right] $$

其中,

$$ b_{i, n} \left(t\right) = \binom{n}{i} \left(1 - t\right)^{n - i} t^{i} $$

称之为 $n$Bernstein 多项式,点 $P_i$ 称为贝塞尔曲线的控制点。从生成过程来看,贝塞尔曲线是通过 $n$中介点 ($Q_j, R_k, S_l$) 生成的,一个更加复杂的四次贝塞尔曲线 ($t = 0.25$) 如下图所示:

四次贝塞尔曲线

整个四次贝塞尔曲线生成过程如下图所示:

四次贝塞尔曲线生成过程

其中,$Q_0 = \left(1 - t\right) P_0 + t P_1$$R_0 = \left(1 - t\right) Q_0 + t Q_1$$S_0 = \left(1 - t\right) R_0 + t R_1$$B = \left(1 - t\right) S_0 + t S_1$ 为构成贝塞尔曲线的点。

上述图形和动画的绘制代码请参见这里

应用技巧

在很多绘图软件中,钢笔工具使用的是三次贝塞尔曲线,其中起始点结束点分别对应 $P_0$$P_1$,起始点和结束点的控制点分别对应 $P_2$$P_3$

在利用钢笔工具绘图时,可以参考如下建议来快速高效地完成绘图 2

  1. 控制点尽可能在曲线的最外侧或最内侧。
  2. 除了曲线的结束处外,控制点的控制柄尽可能水平或垂直。
  3. 合理安排控制点的密度。

下面两张图分别展示了一个原始的字母图案,以及参考上述建议利用贝塞尔曲线勾勒出来的字母图案边框:

Letters
Letters Buzier Curve

最后推荐一个网站 The Bezier Game,可以帮助更好的理解和掌握基于贝塞尔曲线的钢笔工具使用。