SVG二次貝塞爾曲線：繪制平滑邊緣的利器

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

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

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

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

什么是二次貝塞爾曲線？

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

圖片源自維基百科

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

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

復(fù)雜的路徑

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

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

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

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

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

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

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

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

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

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

CodePen鏈接

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

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

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

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

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