首頁 >科技週邊 >IT業界 >如何在HTML5 SVG上繪製二次Bézier曲線

如何在HTML5 SVG上繪製二次Bézier曲線

Joseph Gordon-Levitt
Joseph Gordon-Levitt原創
2025-02-10 14:07:09946瀏覽

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

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

關鍵要點:

  • SVG路徑d屬性中的Q指令用於定義二次貝塞爾曲線,它包含起點、控制點和終點三個坐標。
  • 使用小寫字母q可以指定相對坐標,而Tt指令則可以用於連接多個曲線,系統會根據上一個曲線自動推斷控制點,以確保曲線平滑過渡。
  • 雖然編碼和可視化二次貝塞爾曲線可能具有挑戰性,但可以使用工俱生成<path></path>代碼。
  • 二次貝塞爾曲線可用於創建複雜的形狀,並可以通過<animate></animate>元素、CSS動畫或JavaScript進行動畫處理。

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

什麼是二次貝塞爾曲線?

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

How to Draw Quadratic Bézier Curves on HTML5 SVGs

圖片源自維基百科

數學愛好者也可以在Wolfram MathWorld上查看令人頭疼的方程式。

二次曲線非常適合繪製平滑邊緣。從下圖可以看出,很容易指定一個控制點,而通常情況下會出現直角邊:

How to Draw Quadratic Bézier Curves on HTML5 SVGs

複雜的路徑

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

<code class="language-xml"><path d="M100,250 Q250,100 400,250"></path></code>

初始M指令將筆移動到第一點(100,250)。 Q之後跟隨兩個坐標:單個控制點(250,100)和最終繪製到的點(400,250)。

您也可以使用小寫字母q來表示相對坐標而不是絕對坐標。以下曲線將是相同的,並且可能更容易編碼:

<code class="language-xml"><path d="M100,250 Q250,100 400,250"></path></code>

最後,還有簡寫Tt指令(通常,小寫字母表示相對坐標而不是絕對坐標)。這些指令接受進一步的結束坐標以將多個曲線連接在一起。控制點是從上次使用的點推斷出來的,以保證完美的平滑連續曲線。例如,考慮以下路徑:

<code class="language-xml"><path d="M100,250 q150,-150 300,0"></path></code>

它繪製一條從100,250到400,250的曲線,控制點位於250,100。然後繪製另一條曲線,結束於700,250,控制點被推斷為550,400。

How to Draw Quadratic Bézier Curves on HTML5 SVGs

推斷出的控制點在數學上是正確的,但可能並不總是您需要的!

二次貝塞爾曲線可能有點難以編碼和可視化,因此可以使用快速生成工具為您生成<path></path>代碼:

CodePen鏈接

拖動曲線兩端的控制點。單擊曲線本身以切換填充效果,該效果會添加結束Z指令。

請注意,此工具必須將DOM頁面坐標轉換為SVG坐標才能確保其在所有屏幕尺寸下都能正常工作。這可能比您預期的要復雜一些,因此請參考“如何從DOM坐標轉換為SVG坐標並返回”以了解完整細節。

如果您準備好處理更複雜的問題,請嘗試在SVG圖像上創建三次貝塞爾曲線。

(此處應添加原文中提到的FAQ部分,內容已在原文中給出,此處不再重複)

以上是如何在HTML5 SVG上繪製二次Bézier曲線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn