SVG二次貝塞爾曲線:繪製平滑邊緣的利器
本文將探討如何在HTML5 SVG中使用二次貝塞爾曲線繪製平滑邊緣。二次貝塞爾曲線通過SVG路徑d
屬性中的Q
指令定義,具有起點和終點,並通過單個控制點來確定曲線的彎曲程度。
關鍵要點:
d
屬性中的Q
指令用於定義二次貝塞爾曲線,它包含起點、控制點和終點三個坐標。 q
可以指定相對坐標,而T
和t
指令則可以用於連接多個曲線,系統會根據上一個曲線自動推斷控制點,以確保曲線平滑過渡。 <path></path>
代碼。 <animate></animate>
元素、CSS動畫或JavaScript進行動畫處理。 先前文章“如何在SVG中創建複雜的路徑”探討了<path></path>
元素,並展示瞭如何繪製一系列線段和弧線來創建任何形狀(常用於在無需下載完整字體的情況下複製字體)。 d
屬性提供了一些額外的技巧來繪製平滑曲線。本文將討論二次貝塞爾曲線,您還可以參考“如何在SVG圖像上繪製三次貝塞爾曲線”以了解更複雜的選擇。
什麼是二次貝塞爾曲線?
二次貝塞爾曲線具有起點(P0)和終點(P2)。單個控制點(P1)決定線的曲率。維基百科的貝塞爾曲線頁面提供了一個很好的生成圖示:
圖片源自維基百科
數學愛好者也可以在Wolfram MathWorld上查看令人頭疼的方程式。
二次曲線非常適合繪製平滑邊緣。從下圖可以看出,很容易指定一個控制點,而通常情況下會出現直角邊:
複雜的路徑
二次貝塞爾曲線使用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>
最後,還有簡寫T
和t
指令(通常,小寫字母表示相對坐標而不是絕對坐標)。這些指令接受進一步的結束坐標以將多個曲線連接在一起。控制點是從上次使用的點推斷出來的,以保證完美的平滑連續曲線。例如,考慮以下路徑:
<code class="language-xml"><path d="M100,250 q150,-150 300,0"></path></code>
它繪製一條從100,250到400,250的曲線,控制點位於250,100。然後繪製另一條曲線,結束於700,250,控制點被推斷為550,400。
推斷出的控制點在數學上是正確的,但可能並不總是您需要的!
二次貝塞爾曲線可能有點難以編碼和可視化,因此可以使用快速生成工具為您生成<path></path>
代碼:
拖動曲線兩端的控制點。單擊曲線本身以切換填充效果,該效果會添加結束Z
指令。
請注意,此工具必須將DOM頁面坐標轉換為SVG坐標才能確保其在所有屏幕尺寸下都能正常工作。這可能比您預期的要復雜一些,因此請參考“如何從DOM坐標轉換為SVG坐標並返回”以了解完整細節。
如果您準備好處理更複雜的問題,請嘗試在SVG圖像上創建三次貝塞爾曲線。
(此處應添加原文中提到的FAQ部分,內容已在原文中給出,此處不再重複)
以上是如何在HTML5 SVG上繪製二次Bézier曲線的詳細內容。更多資訊請關注PHP中文網其他相關文章!