SVG <path>元素C指令三次貝塞爾曲線

admin發表於2018-02-04
SVG
關於<path>元素的基本用法可以參閱SVG <path>路徑元素一章節。

二次貝塞爾曲線可以參閱SVG <path>元素Q指令二次貝塞爾曲線一章節。

二次貝塞爾曲線只能夠在一側彎曲，因為只有一個控制點。

而三次貝塞爾曲線則有兩個控制點，可以繪製出兩側都有彎曲的曲線。

語法結構如下:

[XML] 純文字檢視 複製程式碼
C cp1x cp1y , cp2x cp2y , x y

引數解析如下:

（1）.cp1x cp1y規定第一個控制點的座標。

（2）.cp2x cp2y規定第二個控制點的座標。

（3）. x y規定賽貝爾曲線的結束點座標。

看一段程式碼例項:

[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
        C20,100 200,100 200,20"
        stroke="black"
        fill="none"
        stroke-width="1"/>
  </svg>
</body>
</html>

上面的程式碼可以用下面的圖示表示:

1.gif

特別說明:黑色的曲線是真正繪製出的貝塞爾曲線，黃色的只是輔助線。

可以看到開始點與控制點1連成的線段與曲線是相切的，結束點與控制點2連成的線段也是相切的。

不是說bezierCurveTo()可以繪製出兩側都有完全的曲線嗎，為什麼上面只有一個彎曲。

這是因為控制點都在開始點與結束點連線的一側，如果控制1和控制點2一邊一個，那麼就會出現兩個彎曲。

程式碼例項如下:

[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
        C20,100 200,20 200,50"
        stroke="black"
        fill="none"
        stroke-width="1"/>
  </svg>
</body>
</html>

相關文章