基于Bezier曲線的圖形繪制技術(shù)的研究

摘要：針對現(xiàn)有繪圖軟件在對曲線圖形的繪制中，以拖動鼠標(biāo)的方式改變曲線形狀的操作具有控制精度不高且軟件消耗資源大等缺點，本文在詳細(xì)推導(dǎo)貝塞爾（Bezier）曲線的描述方程后，根據(jù)其幾何特性提出了一種易于操控且資源消耗小的曲線圖形繪制方法。在圖形的繪制中，采用數(shù)學(xué)語言精確描述曲線的起止點、彎曲程度等特征，然后用曲線擬合的方式將圖形可視化地表現(xiàn)出來。運用這種方法，用戶可鍵入曲線關(guān)鍵參數(shù)，十分便捷地進行圖形設(shè)計、繪制等工作。

關(guān)鍵詞：Bezier曲線；圖形設(shè)計；直線擬合

一、引言

二維圖形在社會生產(chǎn)生活中的圖像顯示場景中占據(jù)著主導(dǎo)地位，這是由于二維圖像的直觀顯示能夠快捷、高效地傳遞信息。與三維圖像相比，二維圖像的生成和顯示成本顯著更低。觀察市場上的顯示設(shè)備，如電腦屏幕、電影院投影幕布、電子儀表盤等，它們所展示的內(nèi)容都為二維圖像。二維圖像的廣泛使用也使得市場中有著大量的圖形設(shè)計需求，如品牌logo設(shè)計、電子宣傳牌圖形顯示設(shè)計等[1]。目前，市面上的圖形軟件種類繁多，其中廣泛使用的主要有支持高級圖像處理、深度應(yīng)用于圖像編輯和設(shè)計領(lǐng)域的Adobe Photoshop，大量應(yīng)用于矢量圖形設(shè)計和編輯的Adobe Illustrator等。這些繪圖軟件大多采用交互式的繪圖方案：用戶先用鼠標(biāo)選取曲線、折線等繪圖模式，再拖動鼠標(biāo)確定數(shù)個關(guān)鍵點，軟件根據(jù)繪圖模式將關(guān)鍵點用對應(yīng)的連接方式相連。然而，要想用這樣的繪圖方式得到較為精美的圖形，較大程度上依賴于用戶對鼠標(biāo)的控制能力和繪圖的熟練度。為了克服這一弊端，本文設(shè)計了一種基于數(shù)學(xué)語言描述的，能精確控制曲線的圖形繪制方法，用于更加精細(xì)地進行圖形設(shè)計和渲染。

二、曲線的描述與繪制

如何在計算機中繪制出一張二維圖像？對于任何一幅二維圖像，都可以將其分解為直線、曲線和填充色彩三部分。對于填充色彩，僅需要知道物體的輪廓，并在輪廓內(nèi)進行相應(yīng)的顏色填充，便能夠完成；對于直線的繪制，需要向計算機提供直線的起點坐標(biāo)和終點坐標(biāo)的數(shù)據(jù)，計算機將其連接后能產(chǎn)生特定的直線。如何繪制曲線？對于計算機而言，需要精確地知道待繪制曲線的描述函數(shù)才能實現(xiàn)繪制。本質(zhì)上，直線的繪制也需要知道其數(shù)學(xué)函數(shù)，但僅需要簡單的一次函數(shù)即可；而曲線由于其靈活多變、復(fù)雜多樣的特點，對其進行一般性的數(shù)學(xué)描述會變得相對困難。能在計算機中近似描述曲線的方程有許多，其中性能最為優(yōu)秀、使用最為廣泛的是Bezier曲線。Bezier曲線由法國數(shù)學(xué)家皮埃爾·貝塞爾于1962年提出，用于對二維和三維圖形的路徑和形狀進行數(shù)學(xué)描述[2]。由于其優(yōu)秀的性能和簡潔的描述，Bezier曲線廣泛運用于多個圖像相關(guān)的領(lǐng)域。在圖形設(shè)計領(lǐng)域，主要用于圖標(biāo)、字體的設(shè)計，較為有名和成功的應(yīng)用是矢量圖形（SVG）、OpenType字體和Photoshop的曲線繪制等；在醫(yī)學(xué)圖像處理領(lǐng)域，用于邊緣曲線的提取和重建，具體有醫(yī)學(xué)圖像中的器官分割、細(xì)胞邊緣提取等；在游戲開發(fā)領(lǐng)域，用于創(chuàng)建人物的運動軌跡、粒子特效和曲線路徑等；在數(shù)值擬合和插值技術(shù)中，用于解決數(shù)值分析中的曲線擬合問題[3]。一言以蔽之，在眾多與曲線有關(guān)的場景中，Bezier曲線被廣泛使用，起到了不可或缺的作用。

三、Bezier曲線的數(shù)學(xué)描述

Bezier曲線是一種由起始點、控制點和結(jié)束點三個基本元素構(gòu)成的幾何圖形。控制點數(shù)量越多，其能描述的曲線越復(fù)雜，一個二次Bezier曲線含有一個控制點，而一個三次Bezier曲線有兩個控制點，以此類推。隨著Bezier曲線的最高次數(shù)和控制點個數(shù)的增加，所描述曲線的自由度、復(fù)雜度和靈活性也相應(yīng)增加，隨之使得Bezier曲線能夠更加精確地逼近目標(biāo)曲線和路徑，但同時也會使得曲線的計算量和復(fù)雜度急劇增加。理論上，Bezier曲線的最高次數(shù)可以為任意正整數(shù)，但最為實用和常見的為二次和三次Bezier曲線，以下將對Bezier曲線方程進行詳細(xì)的推導(dǎo)。Bezier曲線由對若干條直線線性插值得到，一階Bezier曲線可由參數(shù)方程描述（1）表示為：

Pn （t） =P0+（P1 - P0） t （1）

式中，P0和P1為一階Bezier曲線的起始點和結(jié)束點；t為（0，1）區(qū)間內(nèi)的常量；n表示Bezier曲線上點的序數(shù)；Pn （t） 為Bezier曲線上參數(shù)t的第n個坐標(biāo)點。

圖1為一階Bezier曲線的示意圖，具體表現(xiàn)為一條直線段，可根據(jù)參數(shù)t的不同取值，依次計算得到Bezier曲線上的各點。

二次Bezier曲線由起始點P0、結(jié)束點P2和控制點P1插值得到，如圖2（a）所示，其中A為以P0和P1分別為起始點和結(jié)束點的一階Bezier曲線，B為以P1和P2分別為起始點和結(jié)束點的一階Bezier曲線，且滿足式（2）：

（2）

依次插值，求取滿足式（3）的Pn：

（3）

可由若干Pn點構(gòu)成圖2（b）所示的P0到P2的二次Bezier曲線Pn，可由式（4）表示為：

Pn= （1-t） An+Bn （4）

其中，

An=（1-t） P0+ P1

Bn =（1-t） P1+ P2

代入式（4）后，Pn可由式（5）表示為：

Pn =（1-t）2 P0+2t（1-t）P1+t2 P2 （5）

其中t∈[0，1]。將t從0開始，按照一定步長依次取值可得到對應(yīng)的一階Bezier曲線An和Bn的若干取值，然后對以A為起始點、以B為結(jié)束點的一階二次Bezier曲線以滿足線段AP與線段PB長度比值與AP0和AP1長度比值相同的條件，取得若干個Pn 點，由一階Bezier曲線得到的Pn 即為以P0和P2分別為起始點和結(jié)束點、以P1為控制點的二階Bezier曲線。將若干個Pn點平滑連接，則可得到圖2（b）所示的二階Bezier曲線。

按照上述邏輯，可相對容易地進一步推導(dǎo)出三階Bezier曲線。以A和D分別為起始點和終點，以B和C為兩個控制點的三階Bezier曲線可按照以下步驟得到：首先，求得分別以A和B為起始點和結(jié)束點的一階Bezier曲線E，以B和C分別為起始點和結(jié)束點的一階Bezier曲線F，和以C和D分別為起始點和結(jié)束點的一階Bezier曲線G；然后，繼續(xù)求取以E和F分別為起始點和結(jié)束點的一階Bezier曲線H，該一階Bezier曲線即為分別以A和C為起始點和結(jié)束點，以B為控制點的二階Bezier曲線；繼續(xù)求取以F和G分別為起始點和結(jié)束點的一階Bezier曲線I，該一階Bezier曲線即為以B和D為起始點和結(jié)束點、以C為控制點的二階Bezier曲線；進一步地，求取以H和I分別為起始點和結(jié)束點的一階Bezier曲線J，該一階Bezier曲線即為以E和G為起始點和結(jié)束點，以F為控制點的二階Bezier曲線，也即為以A和D分別為起始點和結(jié)束點，以B和C分別為兩個控制點的三階Bezier曲線。由此，便完成了三階Bezier曲線的推導(dǎo)。

用參數(shù)方程表示的Bezier曲線有其獨特的優(yōu)勢，一是在于參數(shù)方程具有一定的形狀不變性和獨立性，其形式不受坐標(biāo)系選取的影響；二是用切線的矢量形式表示其變化率，使得變化率具有有限性；三是以參數(shù)方程形式呈現(xiàn)的曲線具有較好的交互能力，能夠較為容易地實現(xiàn)旋轉(zhuǎn)、平移和縮放等幾何操作。

四、Bezier曲線的擬合與繪制

通過上文推導(dǎo)，可用確定的參數(shù)方程準(zhǔn)確表示Bezier曲線。在計算機中要想利用參數(shù)方程進一步繪制和顯示Bezier曲線，一種較為簡便的方法是利用多段直線來擬合出曲線。以下將以二次Bezier曲線的擬合為例進行介紹。

對于式（5）的參數(shù)t，其取值范圍為區(qū)間[0，1]，將t在定義域內(nèi)任意取值得到常數(shù)t1，將t1代入方程，可得到由P0和P2表示的Pn，并且P0和P2為二次Bezier曲線的起始點和結(jié)束點，其橫縱坐標(biāo)是已知的，因此可計算得到t=t1時，Pn的橫縱坐標(biāo)，由此便得到了位于Bezier曲線上的一個坐標(biāo)點。然后t在區(qū)間[0，1]內(nèi)任意取一個大于t1的值t2，將t2代入方程，可得到第二個Bezier曲線上的坐標(biāo)點。按此方法不斷地將t取值為t3， t4，…，tn，可取得若干個位于曲線上的點。不難發(fā)現(xiàn)，當(dāng)t取值的間隔值無限趨近于0時，可完整地獲取到該Bezier曲線上的所有點。但在實際的繪圖中，并不需要將曲線上的所有點都繪制出來，可采用多段短直線擬合多段短曲線，再將短直線依次首尾相連來近似地擬合曲線的方法。具體為，首先設(shè)置一個step參數(shù)，該參數(shù)的取值s表示將以P0和P1為起始點和結(jié)束點的Bezier曲線細(xì)分為數(shù)量為s的小段。將參數(shù)t依次取值1/step，2/step，3/step，…，然后將t依次代入二次Bezier曲線，可得到s個位于該曲線上的坐標(biāo)點，最后將這些點用直線依次連接，便得到了Bezier曲線的近似繪圖。

圖3 Bezier曲線擬合效果

圖3所示的（a）（b）（c）三幅子圖分別表示step取值為5、10、15時，Bezier曲線的擬合效果。由圖像可知，當(dāng)step取值為5時，圖形有多處明顯不平滑的轉(zhuǎn)折點；當(dāng)step取值為10時，圖形變得相對平滑，但依然能隱約看到輕微的轉(zhuǎn)折痕跡；當(dāng)step取值為15時，曲線變得十分光滑。由此可見，不斷地增大step的值，能夠無限逼近二次Bezier曲線的真實圖形。

五、一種基于Bezier曲線的繪制方法

以上述技術(shù)為基礎(chǔ)，本文利用Bezier曲線設(shè)計了一種交互式的圖形繪制方法和對應(yīng)的軟件程序。首先，由用戶設(shè)置所需要繪制的Bezier曲線的階數(shù)，并設(shè)定擬合段數(shù)n；其次，用戶在繪圖界面上按照起始點、控制點和結(jié)束點的順序依次用鼠標(biāo)選取若干個點，將其作為初始的繪圖參數(shù)。軟件由鼠標(biāo)交互事件獲取各選取點的坐標(biāo)數(shù)據(jù)，并根據(jù)擬合段數(shù)求得每一子段的步長，將步長、起始點、控制點、結(jié)束點等數(shù)據(jù)代入對應(yīng)階數(shù)的Bezier曲線方程即可計算得到將一條Bezier曲線拆分為n段后的子曲線的起始點和結(jié)束點坐標(biāo)，將這些坐標(biāo)點連接即可繪制出該Bezier曲線。軟件在獲取到用戶選取的關(guān)鍵點數(shù)據(jù)后，以SVG格式將這些數(shù)據(jù)存儲并顯示，而用戶在取得準(zhǔn)確的坐標(biāo)數(shù)據(jù)后，可通過鍵入坐標(biāo)點的方式修改起始點、控制點、結(jié)束點的坐標(biāo)以滿足實際的設(shè)計需求。在SVG文件中，通過簡易的參數(shù)修改即可個性化地繪制出精美的Bezier曲線，對曲線的外觀修改并不需要復(fù)雜的編程技能，而僅需要對相應(yīng)的屬性值進行簡單的調(diào)整和修改即可。例如，修改“stroke： rgb”屬性所對應(yīng)的值可設(shè)置曲線顏色，修改“stroke-width”屬性所對應(yīng)的值可設(shè)置曲線寬度等。SVG圖形渲染簡單，用瀏覽器打開即可顯示對應(yīng)的圖形，并且具有良好的矢量特性和內(nèi)存占用小、兼容性強等優(yōu)點，將設(shè)計完成的圖形保存為SVG文件能夠使得圖形便于修改和進一步的優(yōu)化，并可借助SVG的繪圖特性對曲線進行精細(xì)化設(shè)計。該繪圖方法同時也保留鼠標(biāo)交互式的曲線繪制模式，在用鼠標(biāo)選取Bezier曲線的起始點、結(jié)束點和若干個控制點后，可進一步地用鼠標(biāo)移動這些關(guān)鍵點，軟件自動記錄被移動后關(guān)鍵點的位置，更新至SVG文件中并渲染圖形，以便讓用戶直觀地看見改變關(guān)鍵點位置后圖形的顯示效果。

一種自適應(yīng)擬合段數(shù)的求取方法。前文所描述的曲線繪制方法中以默認(rèn)步長將Bezier曲線由多段直線擬合，而對于Bezier曲線的擬合段數(shù)這一參數(shù)，如果設(shè)置過小，會造成曲線分段明顯、弧線在繪制中不夠圓滑而影響顯示效果；但如果該值設(shè)置過大，則會由于計算量的突增而降低曲線繪制速度，影響軟件性能，合理設(shè)置擬合段數(shù)顯得十分重要。本文提出的繪圖方法中設(shè)計了一種基于曲線長度的擬合段數(shù)自適應(yīng)求取方法，用于向用戶提供一個相對合理的擬合段數(shù)默認(rèn)值。在Bezier曲線的繪制過程中曲線越長、彎曲程度越大，則平滑地繪制Bezier曲線需要的擬合段數(shù)就越多，因此需要得到待繪制Bezier曲線的長度和彎曲程度的信息。對于Bezier曲線的長度，計算方法具體為：首先將參數(shù)t從0開始，每間隔0.05依次取值并代入曲線方程，可得到該曲線上20個點的坐標(biāo)信息，接著將相鄰的兩點用距離公式分別計算間距，最后分段累加即可得到該Bezier曲線長度的近似值。大量實驗結(jié)果表明，在Bezier曲線上每間隔15像素距離進行一次分段擬合能夠使得曲線擁有較好的顯示效果，因此將曲線長度與上述間隔像素距離的比值作為Bezier曲線的擬合段數(shù)。然后依照擬合段數(shù)依次求得Bezier曲線上對應(yīng)的像素點，并分別計算其一階導(dǎo)數(shù)和二階導(dǎo)數(shù)后，進一步求取其曲率。如果該點的曲率大于一定閾值，則將該點與下一個分隔點之間增加一個分隔點，最后由曲線長度與間隔像素距離的比值加上增加的分隔點數(shù)即為推薦的擬合段數(shù)。

六、結(jié)束語

本文利用Bezier曲線提出了一種圖形繪制方法，能夠讓用戶通過鼠標(biāo)與屏幕交互的方式選取關(guān)鍵點，然后由軟件自動地繪制出對應(yīng)的Bezier曲線。相較于常規(guī)的繪圖軟件，本文設(shè)計的繪圖方法的優(yōu)勢在于，一方面，能夠用量化的坐標(biāo)精確地設(shè)計曲線圖形；另一方面，保留了交互式的繪圖方式，使其具有精確性的同時又不失靈活性。此外，該方法設(shè)計出的曲線采用矢量圖的形式保存，在對圖形進行修改、打印、顯示時，無論是將圖形進行放大、縮小還是旋轉(zhuǎn)等操作，圖形都能保持原有清晰度而不失真。

作者單位：馬秀紅 宋麗娟 德州市無線電檢測中心；黃守麗 成都大公博創(chuàng)信息技術(shù)有限公司

參考文獻

[1]周寅飛，張立華，賈帥東，等.最大可航窗口序列約束貝塞爾曲線的無人船自主航行航線規(guī)劃方法[J].武漢大學(xué)學(xué)報（信息科學(xué)版），2023：1-13.

[2]謝春麗，高勝寒，孫學(xué)志.融合改進A～*算法和Bezier曲線優(yōu)化的路徑規(guī)劃算法[J].重慶理工大學(xué)學(xué)報（自然科學(xué)），2022，36（07）：177-187.

[3]楊洋，溫興，馬強龍，等.基于Bezier曲線的動態(tài)識別區(qū)農(nóng)機避障路徑實時規(guī)劃[J].農(nóng)業(yè)工程學(xué)報， 2022，38（06）：34-43.