SVG <path> Q指令 二次貝塞爾曲線
關於<path>元素的基本用法可以參閱SVG <path>路徑元素一章節。
Q指令可以用來繪製一條二次貝塞爾曲線,下面就通過程式碼例項對此做一下介紹。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> svg { border: 1px solid red; margin: 100px; width: 300px; height: 300px; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M20,20 Q20,100 200 20" stroke="black" fill="none" stroke-width="1"/> </svg> </body> </html>
上面的程式碼可以用如下圖示表示:
黃色的線條是為了便於觀察的輔助線。
語法結構:
[XML] 純文字檢視 複製程式碼Q(q)cpx cpy, x y
(1).cpx和cpy規定貝塞爾曲線的控制點位置。
(2).x和y規定貝塞爾曲線的結束點。
通過改變控制點的座標可以繪製出不同的曲線。
特別說明:控制點與開始點和結束點之間的連線與貝塞爾曲線是相切的。
相關文章
- SVG <path>元素Q指令二次貝塞爾曲線SVG
- SVG <path> C 指令 三次貝塞爾曲線SVG
- SVG <path>元素C指令三次貝塞爾曲線SVG
- SVG之Path路徑詳解(二),全面解析貝塞爾曲線SVG
- Path從懵逼到精通(2)——貝塞爾曲線
- canvas 二次貝塞爾曲線quadraticCurveTo()Canvas
- Android 貝塞爾曲線Android
- 貝塞爾曲線基礎部分
- UIBezierPath貝塞爾曲線UI
- 貝塞爾曲線理解與應用
- iOS UIBezierPath 貝塞爾曲線iOSUI
- 如何理解並應用貝塞爾曲線
- Android 自定義貝塞爾曲線工具Android
- 貝塞爾曲線開發的藝術
- canvas實現高階貝塞爾曲線Canvas
- canvas bezierCurveTo() 三次貝塞爾曲線Canvas
- iOS UIBezierPath貝塞爾曲線常用方法iOSUI
- 使用貝塞爾曲線裁圓優化tableView優化View
- js控制貝塞爾曲線程式碼例項JS線程
- 安卓自定義 View 進階:貝塞爾曲線安卓View
- 貝塞爾曲線(Bezier curve)實現節點連線
- 用canvas繪製一個曲線動畫——深入理解貝塞爾曲線Canvas動畫
- 自定義View合輯(6)-波浪(貝塞爾曲線)View
- webGL入門-四階貝塞爾曲線繪製Web
- html5中canvas繪製貝塞爾曲線HTMLCanvas
- iOS開發之畫圖板(貝塞爾曲線)iOS
- SVG <path> 元素A指令繪製弧線SVG
- 【Flutter高階玩法】 貝塞爾曲線的表象認知Flutter
- Flutter 自定義元件之貝塞爾曲線畫波浪球Flutter元件
- Android-貝塞爾曲線實現水波紋動畫Android動畫
- canvas基礎[二]教你編寫貝塞爾曲線工具Canvas
- html5中canvas貝塞爾曲線繪製菊花HTMLCanvas
- bezierMaker.js——N階貝塞爾曲線生成器JS
- 一個貝塞爾曲線編輯工具(2d)
- 貝塞爾曲線原理、推導及Matlab實現Matlab
- SVG (一) 圖形, 路徑, 變換總結; 以及橢圓弧線, 貝塞爾曲線的詳細解釋SVG
- 自定義View合輯(8)-跳躍的小球(貝塞爾曲線)View
- 包教包會-貝塞爾曲線的繪製原理與應用