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

簡單理解貝塞爾曲線。

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

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

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]刪除
最新教學 更多>
  • string-width-cjs npm 包的神秘供應鏈問題
    string-width-cjs npm 包的神秘供應鏈問題
    这个故事始于 Docusaurus(基于 React 的开源文档项目)的维护者 Sébastien Lorber 注意到对包清单的 Pull 请求更改。以下是对流行的 cliui npm 包提出的更改: 具体来说,让我们注意使用不熟悉的语法的 npm 依赖项更改: "dependencies":...
    程式設計 發佈於2024-11-07
  • 使用 Playwright-Network-Cache 增強您的 ETests
    使用 Playwright-Network-Cache 增強您的 ETests
    简介 当使用像 Playwright 这样的端到端测试框架时,处理网络请求通常是一项复杂的任务。依赖外部 API 的测试可能会很慢且不一致,从而引入不必要的不​​稳定。由于服务器缓慢或不可靠,在一次测试运行中成功的网络调用可能在下一次测试运行中失败,从而导致结果不一致。为了解决这个...
    程式設計 發佈於2024-11-07
  • Django Stack 入門:建立完整項目
    Django Stack 入門:建立完整項目
    如果您是 Python 世界的新手,并且想知道 Django 到底是什么,这里有一篇文章可能会有所帮助,作为实用的介绍。 Django 就像您希望一直拥有的工具包。它使得构建强大的、可扩展的 Web 应用程序不仅成为可能,而且真正变得有趣。你猜怎么着?您无需成为专家即可开始。 在本指南中,我们将采...
    程式設計 發佈於2024-11-07
  • 掌握“專案:使用 Vue.js 實現主頁資料的動態化”
    掌握“專案:使用 Vue.js 實現主頁資料的動態化”
    您是否希望提高您的網頁開發技能並創建動態的、具有視覺吸引力的主頁? LabEx 提供的項目:主頁資料動態化課程就是您的最佳選擇。 在這個基於專案的綜合學習體驗中,您將深入了解 Vue.js 的世界,這是一個強大的 JavaScript 框架,使開發人員能夠建立迷人的使用者介面。透過逐步方法,您將學...
    程式設計 發佈於2024-11-07
  • 如何將參數傳遞給使用「chrome.tabs.executeScript()」注入的內容腳本?
    如何將參數傳遞給使用「chrome.tabs.executeScript()」注入的內容腳本?
    將參數傳遞給使用chrome.tabs.executeScript() 注入的內容腳本使用chrome.tabs.executeScript 注入內容腳本文件時({file: "content.js"}),出現一個常見問題:如何在內容腳本檔案中向JavaScript 傳遞參數? ...
    程式設計 發佈於2024-11-07
  • 自訂 Django 面板:逐步指南
    自訂 Django 面板:逐步指南
    在本指南中,我將引導您了解如何修改和擴展 Django 預設管理面板/介面,使其更加用戶友好。 1.設定項目: 首先在 Django 中創建一個全新的專案和應用程式 django-admin startproject myprojectname cd myprojectname python ma...
    程式設計 發佈於2024-11-07
  • 了解身分驗證流程
    了解身分驗證流程
    什麼是身分驗證流程? 身分驗證流程是確認使用者身分並管理他們對應用程式某些部分的存取的過程。當您使用網路應用程式(例如社交媒體網站)時,這涉及檢查使用者是否是他們所說的人(登入),然後授予他們存取某些功能的權限。 它在 React 中是如何運作的? 在 React...
    程式設計 發佈於2024-11-07
  • 如何使用 mysqli_pconnect() 在 PHP 中實作 MySQL 連線池?
    如何使用 mysqli_pconnect() 在 PHP 中實作 MySQL 連線池?
    MySQL 的 PHP 連線池在 PHP 中,維護資料庫連線會影響效能。為了優化這一點,開發人員經常考慮使用連接池技術。 MySQL 的連線池MySQL 沒有內建的連線池機制。然而,MySQLi 擴充功能提供了mysqli_pconnect() 函數,其作用與mysqli_connect() 類似,...
    程式設計 發佈於2024-11-07
  • 將 HTMX 加入 GO
    將 HTMX 加入 GO
    HTMX 是 intercooler.js 的後繼者,用於使用 HTTP 指令擴充 HTML,而無需編寫 API。現在,我知道一開始我說我要刪除抽象層,但是我更多的是系統/工具程式設計師,所以我仍然需要一些抽象,直到我掌握了底層實際發生的情況。 基本概念 HTMX 部署 AJAX ...
    程式設計 發佈於2024-11-07
  • 發現 itertools
    發現 itertools
    Itertools 是最有趣的 Python 函式庫之一。它包含一系列受函數式語言啟發的函數,用於與迭代器一起使用。 在這篇文章中,我將提到一些最引起我注意並且值得牢記的內容,以免每次都重新發明輪子。 數數 好幾次我都實現了無限數(好吧,結束了 明確地在某一點用中斷)使用 whi...
    程式設計 發佈於2024-11-07
  • 為什麼每個人都應該學習 Go(即使您認為生活中不需要另一種語言)
    為什麼每個人都應該學習 Go(即使您認為生活中不需要另一種語言)
    啊,Go,编程语言。您可能听说过,也许是从办公室里一位过于热情的开发人员那里听说过的,他总是不停地谈论他们的 API 现在有多“快得惊人”。当然,您已经涉足过其他语言,也许您会想:“我真的需要另一种语言吗?”剧透警报:是的,是的,你知道。 Go 就是那种语言。让我以最讽刺、最真诚的方式为你解释一下。...
    程式設計 發佈於2024-11-07
  • 如何計算 Pandas 中多列的最大值?
    如何計算 Pandas 中多列的最大值?
    在Pandas 中尋找多列的最大值假設您有一個包含多列的資料框,並且希望建立一個包含兩個或多個列中的最大值的新列現有的列。例如,給定A 列和B 列,您需要建立C 列,其中:C = max(A, B)要完成此任務:使用max 函數和axis=1 計算指定列中每行的最大值:df[["A&quo...
    程式設計 發佈於2024-11-07
  • 如何在 PHP 中從目錄中檢索檔案名稱?
    如何在 PHP 中從目錄中檢索檔案名稱?
    從 PHP 中的目錄中擷取檔案如何在 PHP 中存取目錄中的檔案名稱?事實證明,確定正確的命令具有挑戰性。這個問題旨在為尋求類似解決方案的個人提供幫助。 PHP提供了幾種從目錄獲取文件清單的方法:DirectoryIterator(建議)此類允許對目錄中的文件進行迭代:foreach (new Di...
    程式設計 發佈於2024-11-07
  • 使用 Linq、Criteria API 和 Query Over 擴充 NHibernate 的 Ardalis.Specification
    使用 Linq、Criteria API 和 Query Over 擴充 NHibernate 的 Ardalis.Specification
    Ardalis.Specification is a powerful library that enables the specification pattern for querying databases, primarily designed for Entity Framework Cor...
    程式設計 發佈於2024-11-07

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

Copyright© 2022 湘ICP备2022001581号-3