SVG二次貝塞爾曲線(xiàn)：繪制平滑邊緣的利器

本文將探討如何在HTML5 SVG中使用二次貝塞爾曲線(xiàn)繪制平滑邊緣。二次貝塞爾曲線(xiàn)通過(guò)SVG路徑d屬性中的Q指令定義，具有起點(diǎn)和終點(diǎn)，并通過(guò)單個(gè)控制點(diǎn)來(lái)確定曲線(xiàn)的彎曲程度。

關(guān)鍵要點(diǎn):

• SVG路徑d屬性中的Q指令用于定義二次貝塞爾曲線(xiàn)，它包含起點(diǎn)、控制點(diǎn)和終點(diǎn)三個(gè)坐標(biāo)。
• 使用小寫(xiě)字母q可以指定相對(duì)坐標(biāo)，而T和t指令則可以用于連接多個(gè)曲線(xiàn)，系統(tǒng)會(huì)根據(jù)上一個(gè)曲線(xiàn)自動(dòng)推斷控制點(diǎn)，以確保曲線(xiàn)平滑過(guò)渡。
• 雖然編碼和可視化二次貝塞爾曲線(xiàn)可能具有挑戰(zhàn)性，但可以使用工具生成<path></path>代碼。
• 二次貝塞爾曲線(xiàn)可用于創(chuàng)建復(fù)雜的形狀，并可以通過(guò)<animate></animate>元素、CSS動(dòng)畫(huà)或JavaScript進(jìn)行動(dòng)畫(huà)處理。

先前文章“如何在SVG中創(chuàng)建復(fù)雜的路徑”探討了<path></path>元素，并展示了如何繪制一系列線(xiàn)段和弧線(xiàn)來(lái)創(chuàng)建任何形狀（常用于在無(wú)需下載完整字體的情況下復(fù)制字體）。d屬性提供了一些額外的技巧來(lái)繪制平滑曲線(xiàn)。本文將討論二次貝塞爾曲線(xiàn)，您還可以參考“如何在SVG圖像上繪制三次貝塞爾曲線(xiàn)”以了解更復(fù)雜的選擇。

什么是二次貝塞爾曲線(xiàn)？

二次貝塞爾曲線(xiàn)具有起點(diǎn)（P0）和終點(diǎn)（P2）。單個(gè)控制點(diǎn)（P1）決定線(xiàn)的曲率。維基百科的貝塞爾曲線(xiàn)頁(yè)面提供了一個(gè)很好的生成圖示：

圖片源自維基百科

數(shù)學(xué)愛(ài)好者也可以在Wolfram MathWorld上查看令人頭疼的方程式。

二次曲線(xiàn)非常適合繪制平滑邊緣。從下圖可以看出，很容易指定一個(gè)控制點(diǎn)，而通常情況下會(huì)出現(xiàn)直角邊：

復(fù)雜的路徑

二次貝塞爾曲線(xiàn)使用SVG路徑d屬性中的Q指令定義：

<path d="M100,250 Q250,100 400,250" />

初始M指令將筆移動(dòng)到第一點(diǎn)（100,250）。Q之后跟隨兩個(gè)坐標(biāo)：?jiǎn)蝹€(gè)控制點(diǎn)（250,100）和最終繪制到的點(diǎn)（400,250）。

您也可以使用小寫(xiě)字母q來(lái)表示相對(duì)坐標(biāo)而不是絕對(duì)坐標(biāo)。以下曲線(xiàn)將是相同的，并且可能更容易編碼：

<path d="M100,250 Q250,100 400,250" />

最后，還有簡(jiǎn)寫(xiě)T和t指令（通常，小寫(xiě)字母表示相對(duì)坐標(biāo)而不是絕對(duì)坐標(biāo)）。這些指令接受進(jìn)一步的結(jié)束坐標(biāo)以將多個(gè)曲線(xiàn)連接在一起?？刂泣c(diǎn)是從上次使用的點(diǎn)推斷出來(lái)的，以保證完美的平滑連續(xù)曲線(xiàn)。例如，考慮以下路徑：

<path d="M100,250 q150,-150 300,0" />

它繪制一條從100,250到400,250的曲線(xiàn)，控制點(diǎn)位于250,100。然后繪制另一條曲線(xiàn)，結(jié)束于700,250，控制點(diǎn)被推斷為550,400。

推斷出的控制點(diǎn)在數(shù)學(xué)上是正確的，但可能并不總是您需要的！

二次貝塞爾曲線(xiàn)可能有點(diǎn)難以編碼和可視化，因此可以使用快速生成工具為您生成<path></path>代碼：

CodePen鏈接

拖動(dòng)曲線(xiàn)兩端的控制點(diǎn)。單擊曲線(xiàn)本身以切換填充效果，該效果會(huì)添加結(jié)束Z指令。

請(qǐng)注意，此工具必須將DOM頁(yè)面坐標(biāo)轉(zhuǎn)換為SVG坐標(biāo)才能確保其在所有屏幕尺寸下都能正常工作。這可能比您預(yù)期的要復(fù)雜一些，因此請(qǐng)參考“如何從DOM坐標(biāo)轉(zhuǎn)換為SVG坐標(biāo)并返回”以了解完整細(xì)節(jié)。

如果您準(zhǔn)備好處理更復(fù)雜的問(wèn)題，請(qǐng)嘗試在SVG圖像上創(chuàng)建三次貝塞爾曲線(xiàn)。

(此處應(yīng)添加原文中提到的FAQ部分，內(nèi)容已在原文中給出，此處不再重復(fù))

以上是如何在HTML5 SVG上繪制二次Bézier曲線(xiàn)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！