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

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

一、引言

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

二、曲線的描述與繪制

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

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

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

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

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

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

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

（2）

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

（3）

可由若干Pn點(diǎn)構(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開(kāi)始，按照一定步長(zhǎng)依次取值可得到對(duì)應(yīng)的一階Bezier曲線An和Bn的若干取值，然后對(duì)以A為起始點(diǎn)、以B為結(jié)束點(diǎn)的一階二次Bezier曲線以滿足線段AP與線段PB長(zhǎng)度比值與AP0和AP1長(zhǎng)度比值相同的條件，取得若干個(gè)Pn 點(diǎn)，由一階Bezier曲線得到的Pn 即為以P0和P2分別為起始點(diǎn)和結(jié)束點(diǎn)、以P1為控制點(diǎn)的二階Bezier曲線。將若干個(gè)Pn點(diǎn)平滑連接，則可得到圖2（b）所示的二階Bezier曲線。

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

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

四、Bezier曲線的擬合與繪制

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

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

圖3 Bezier曲線擬合效果

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

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

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

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

六、結(jié)束語(yǔ)

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

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

參考文獻(xiàn)

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

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

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