」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 簡單理解貝塞爾曲線。

簡單理解貝塞爾曲線。

發佈於2024-08-25
瀏覽:879

想象一下,如果只能用直线、椭圆、圆,设计一辆线条流畅、外观复杂的汽车不是很困难吗?

1962年,法国工程师Pierre Bézier发表了贝塞尔曲线,最初用于汽车主体设计。

Simply understanding Bézier curves.

贝塞尔曲线可以通过一系列控制点定义一条平滑的曲线。曲线始终经过第一个和最后一个控制点,并受中间控制点形状的影响。此外,贝塞尔曲线具有凸包的属性。

贝塞尔曲线广泛应用于计算机图形和图像建模,例如动画、字体设计和工业设计。

公式

Simply understanding Bézier curves.

让我们了解一下。

P(t) 表示曲线上 t 处的点(t 是分数,取值范围为 0 到 1)。 t 处曲线上的点是什么?常见的曲线描述是:y = f(x),现在让我们将 P(t) 理解为 f(x)。不同的是,P(t)是参数表示(并且计算结果是[x,y]这样的“向量”),后面会详细解释

接下来,Pi表示第i个控制点(i从0开始)。以上图为例,有4个控制点,分别是P0、P1、P2、P3。公式中的n为控制点的最后一个索引,即n = 3(注意不是控制点的个数,而是计数减1)。

Bi,n(t) 是 Bernstein 基函数,也称为基函数。对于每个特定的(i,n),都有一个不同的基函数与之对应。如果从加权的角度理解,可以将基函数视为权重函数,表示第i个控制点Pi对t位置处的曲线坐标的“贡献”。

基函数的公式如下:

Simply understanding Bézier curves.

(ni)\binom{n}{i} ( in) 是组合数(从n中选择i有多少种方法?)。至于为什么基函数是这样的,可以结合De Casteljau算法来理解(见文中后面)

回到P(t)公式, Σi=0n\sum_{i=0}^{n} Σi=0n 为求和符号,表示后续部分( 垃圾桶(t)PiB_{i,n}(t) \cdot P_iBi,n(t )⋅Pi ) 将从 i=0 到 i=n 求和。 以上图为例,假设我们要计算P(0.1),该怎么做呢?展开如下:

代入t=0.1得到:

Simply understanding Bézier curves.

Simply understanding Bézier curves. 曲线的参数表示

这里直接引用了网友的一篇文章(链接)

Simply understanding Bézier curves.

让我们重点关注上面的公式。

如上图所示,我们熟悉的直线可以从另一个角度来理解:用t(即|AP|从点P到已知点(x0,y0)的长度),那么通过上述三角函数就可以确定P点。

更一般的,可以写成:Simply understanding Bézier curves.

这里,P0是向量[x0,y0],v也是向量。加在一起时,P(t) 是向量 [x,y].

再看一下圆圈:

Simply understanding Bézier curves.

如图所示,圆可以看作有已知的圆心,圆上的任意点由旋转角度和半径确定。也可以写成:

Simply understanding Bézier curves.参数方程保持几何不变性,并且可以表示圆形等形状(其中一个 x 对应多个 y 值)。

德卡斯特里奥

De Casteljau 算法是实际应用中用于评估和近似 Bézier 曲线以进行绘图和其他操作的方法。相比之前基于定义的评价方法,速度更快、更稳定,更接近Bézier曲线的特性。Simply understanding Bézier curves.

这里引用了两篇文章:link1和link2

首先定义如下:

看上面的β。上标和下标有点混乱;可以用下面的三角递归来理解:

Simply understanding Bézier curves.上图中三角形的红边就是t0分割的两条线段的控制点。为了更形象地理解t0,P(t0)(即

Simply understanding Bézier curves.

β0(n)\beta_0^{(n)} β0(n) ),两条曲线的控制点,可以参考下图: 上图展示了当t=0.5时各点之间的关系。 从“插值”的角度来看,计算过程也可以理解为:

Simply understanding Bézier curves.求每对相邻控制点的中点(因为t=0.5),即b01,b11,b21(请原谅我的记法;用LaTeX写太麻烦)

在b01−b11上求中点b02,在b11-b21上求中点b12

求 b02−b12 上的中点 b03 ​ 事实上,De Casteljau算法的本质就是插值和迭代。

  1. 基于 De Casteljau 的曲线绘制
  2. 目前观察到两种方法。
  3. 一种方法涉及以小步长增量将 t 从 0 遍历到 1(即0.01)。每次求 P(t) 时,都会使用递归公式来确定

β0(n)\beta_0^{(n)} β0(n) . 另一种方法是求P(t=0.5),然后对于两条划分曲线,分别求P(t=0.5)...这样的细分一直持续到曲线逼近为止。 执行 光看而不练习总感觉不真实。

于是我自己写了曲线绘制的实现代码,整理成一个工具包:Compilelife的Toolkit

对应的核心代码在这里

版本聲明 本文轉載於:https://dev.to/compilelife/simply-understanding-bezier-curves-39kh?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用 Savitzky-Golay 濾波平滑雜訊曲線?
    如何使用 Savitzky-Golay 濾波平滑雜訊曲線?
    雜訊資料的平滑曲線:探討Savitzky-Golay 濾波在分析資料集的過程中,平滑雜訊曲線的挑戰出現在提高清晰度並揭示潛在模式。對於此任務,特別有效的方法是 Savitzky-Golay 濾波器。 Savitzky-Golay 濾波器在資料可以透過多項式函數進行局部近似的假設下運作。它利用最小二乘...
    程式設計 發佈於2024-11-06
  • 重載可變參數方法
    重載可變參數方法
    重載可變參數方法 我們可以重載一個採用可變長度參數的方法。 此程式示範了兩種重載可變參數方法的方法: 1 各種可變參數類型:可以重載具有不同可變參數類型的方法,例如 vaTest(int...) 和 vaTest(boolean...)。 varargs 參數的類型決定了要呼叫哪個方法。 2 新...
    程式設計 發佈於2024-11-06
  • 如何在經典類別元件中利用 React Hooks?
    如何在經典類別元件中利用 React Hooks?
    將React Hooks 與經典類組件集成雖然React hooks 提供了基於類的組件設計的替代方案,但可以通過將它們合併到現有類中來逐步採用它們成分。這可以使用高階組件 (HOC) 來實現。 考慮以下類別元件:class MyDiv extends React.component { co...
    程式設計 發佈於2024-11-06
  • 如何使用 Vite 和 React 建立更快的單頁應用程式 (SPA)
    如何使用 Vite 和 React 建立更快的單頁應用程式 (SPA)
    在現代 Web 開發領域,單頁應用程式 (SPA) 已成為建立動態、快速載入網站的熱門選擇。 React 是用於建立使用者介面的最廣泛使用的 JavaScript 程式庫之一,使 SPA 開發變得簡單。然而,如果你想進一步提高你的開發速度和應用程式的整體效能,Vite 是一個可以發揮重大作用的工具。...
    程式設計 發佈於2024-11-06
  • JavaScript 中字串連接的逐步指南
    JavaScript 中字串連接的逐步指南
    JavaScript 中的字串連接 是將兩個或多個字串連接起來形成單一字串的過程。本指南探討了實現此目的的不同方法,包括使用運算子、= 運算子、concat() 方法和範本文字。 每種方法都簡單有效,允許開發人員為各種用例(例如用戶訊息或 URL)建立動態字串。 模板文字尤其為字串連接提供了現...
    程式設計 發佈於2024-11-06
  • Web UX:向使用者顯示有意義的錯誤
    Web UX:向使用者顯示有意義的錯誤
    擁有一個用戶驅動且用戶友好的網站有時可能會很棘手,因為它會讓整個開發團隊將更多時間花在不會為功能和核心業務增加價值的事情上。然而,它可以在短期內幫助用戶並在長期內增加價值。對截止日期嚴格要求的專案經理可能會低估長期的附加價值。我不確定蘋果網站團隊是否屬實,但他們缺少一些出色的使用者體驗。 最近,我...
    程式設計 發佈於2024-11-06
  • 小型機械手
    小型機械手
    小型機械手臂新重大發布 代碼已完全重構並編碼為屬性操作的新支援 這是一個操作範例: $classFile = \Small\ClassManipulator\ClassManipulator::fromProject(__DIR__ . '/../..') ->getC...
    程式設計 發佈於2024-11-06
  • 機器學習專案中有效的模型版本管理
    機器學習專案中有效的模型版本管理
    在机器学习 (ML) 项目中,最关键的组件之一是版本管理。与传统软件开发不同,管理机器学习项目不仅涉及源代码,还涉及随着时间的推移而演变的数据和模型。这就需要一个强大的系统来确保所有这些组件的同步和可追溯性,以管理实验、选择最佳模型并最终将其部署到生产中。在这篇博文中,我们将探索有效管理 ML 模型...
    程式設計 發佈於2024-11-06
  • 如何在 PHP 中保留鍵的同時按列值對關聯數組進行分組?
    如何在 PHP 中保留鍵的同時按列值對關聯數組進行分組?
    在保留鍵的同時按列值對關聯數組進行分組考慮一個關聯數組的數組,每個數組代表一個具有“id”等屬性的實體和“名字”。面臨的挑戰是根據特定列“id”對這些數組進行分組,同時保留原始鍵。 為了實現這一點,我們可以使用 PHP 的 foreach 迴圈來迭代陣列。對於每個內部數組,我們提取“id”值並將其用...
    程式設計 發佈於2024-11-06
  • 如何在 Gradle 中排除特定的傳遞依賴?
    如何在 Gradle 中排除特定的傳遞依賴?
    用Gradle 排除傳遞依賴在Gradle 中,使用應用程式外掛程式產生jar 檔案時,可能會遇到傳遞依賴,您可能想要排除。為此,可以使用排除方法。 排除的預設行為最初,嘗試排除 org.slf4j:slf4j- 的所有實例log4j12 使用以下程式碼:configurations { run...
    程式設計 發佈於2024-11-06
  • 極簡生活的藝術
    極簡生活的藝術
    什麼是極簡生活? 極簡生活是一種有意減少擁有的財產數量和生活中雜亂的生活方式。這不僅是為了整理您的空間,也是為了簡化您的生活,專注於真正重要的事情,並減少干擾。 為什麼採用極簡主義? 頭腦清晰:擁有的東西越少,需要擔心的事情就越少,頭腦就越清晰。 財務自由:透過...
    程式設計 發佈於2024-11-06
  • Java 混淆之謎
    Java 混淆之謎
    Come play with our Java Obfuscator & try to deobfuscate this output. The price is the free activation code! Obfuscated Java code Your goal...
    程式設計 發佈於2024-11-06
  • 如何在沒有圖像的 Outlook 電子郵件中建立圓角?
    如何在沒有圖像的 Outlook 電子郵件中建立圓角?
    在沒有圖像的 Outlook 中設定圓角樣式使用 CSS 在電子郵件用戶端中建立圓角可以非常簡單。但是,使用 CSS border-radius 屬性的傳統方法在 Microsoft Outlook 中不起作用。在設計具有圓角元素的電子郵件時,此限制提出了挑戰。 不用擔心,有一個解決方案可以讓您在 ...
    程式設計 發佈於2024-11-06
  • 如何在Python中高效比較字典中相等的鍵值對?
    如何在Python中高效比較字典中相等的鍵值對?
    比較字典是否相等的鍵值對在Python中,比較字典以檢查鍵值對是否相等是一項常見任務。一種方法是迭代字典並使用 zip 和 iteritems 方法比較每一對字典。然而,還有一些替代方法可以提供更好的程式碼優雅性。 其中一種方法是使用字典理解來建立僅包含共享鍵值對的新字典。代碼如下:shared_i...
    程式設計 發佈於2024-11-06
  • 如何在 PHP 中使用數組函數向左旋轉數組元素?
    如何在 PHP 中使用數組函數向左旋轉數組元素?
    在PHP 中向左旋轉數組元素在PHP 中旋轉數組,將第一個元素移動到最後一個元素並重新索引數組,可以使用PHP 的array_push() 和array_shift() 函數組合來實現。 PHP 函數:PHP 沒有專門用於旋轉的內建函數數組。但是,以下程式碼片段示範如何模擬所需的旋轉行為:$numb...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3