檢視貝茲曲線的原始碼

[[分類:數學]][[分類:HTML]]
==一次貝茲曲線==
<div style='float:right'><img src='https://upload.wikimedia.org/wikipedia/commons/0/00/B%C3%A9zier_1_big.gif'/></div>
B(t)＝P<sub>0</sub>＋(P<sub>1</sub>－P<sub>0</sub>)t＝(1-t)P<sub>0</sub>＋tP<sub>1</sub>, t∈[0,1]

B(t)描述一條由P<sub>0</sub>至P<sub>1</sub>的直線。例如當t=0.25時，B(t)即一條由點P<sub>0</sub>至P<sub>1</sub>路徑的四分之一處。

等同於線性插值。

==二次貝茲曲線==
<table class='putInto' align=right>
<tr><th><img src='https://upload.wikimedia.org/wikipedia/commons/6/6b/B%C3%A9zier_2_big.svg' width=240 height=100 /></th></tr>
<tr><th>二次貝茲曲線的結構</th></tr>
<tr><th><img src='https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif' width=240 height=100 /></th></tr>
<tr><th>二次貝茲曲線演示<br/>t在[0,1]區間</th></tr>
</table>
重點：
#二次貝茲曲線畫出的是拋物線，無法畫出橢圓和雙曲線。故無法畫出正圓。
#所有拋物線都「相似」(不是相等)，且所有曲率(0~&infin;)的微線段都有。
#兩端點外只有一個控制點。
#拋物線方程式 ax<sup>2</sup>+bxy+cy<sup>2</sup>+dx+ey+f=0 則 b<sup>2</sup> - 4ac=0 ，即前三項為完全平方式。

===由二次貝茲曲線參數方程推導出四性質===
#二次貝茲曲線是拋物線
#t=<span style='font-stretch:condensed;'>½</span> 時弦垂直距離最大
#弦中點、與弦垂直距離最大點(簡稱弦高點)、控制點三點共線，且弦高點為弦中點與控制點的中點。
#控制點與兩端點連線分別切二次貝茲曲線於兩端點。


二次貝茲曲線的參數方程為：

B(t)＝(1−t)<sup>2</sup>×P<sub>0</sub>＋2(1−t)t×P<sub>1</sub>＋t<sup>2</sup>×P<sub>2</sub>, t∈[0,1]

將弦水平放置後，其中：
#t 是一個介於 0 到 1 之間的參數
#P<sub>0</sub> 是起點，座標設為 (0,0)
#P<sub>1</sub> 是控制點，座標設為 (α,β)
#P<sub>2</sub> 是終點，座標設為 (ɭ,0)
圖形為：
<img src='https://upload.wikimedia.org/wikipedia/commons/d/da/ControlPointsAndGraphicsOfQuadraticB%C3%A9zierCurve.svg' width='95%' height=* />

我們讓起迄點水平排列，並準備'''由控制點座標(α,β)，求出最低點座標(a,b)'''。

為了找到最大和最小的 y 值，我們可以對 y 的方程進行微分，並將其設為 0 以找到可能的極值。

====(一)先求控制點與最低點的 y 值關係====
將控制點的 y 值代入 B<sub>y</sub>(t) 的方程式，我們得到：
:B<sub>y</sub>(t)＝(1−t)<sup>2</sup>×0＋2(1−t)t×β＋t<sup>2</sup>×0＝2β×t(1−t)=2β×(t−t<sup>2</sup>)
對其進行微分：
:B<sub>y</sub>′(t)=2β(1-2t)
將斜率設為 0 以解 t：
:1−2t=0
:t=<span style='font-stretch:condensed;'>½</span>
將 t=<span style='font-stretch:condensed;'>½ </span>代入 B<sub>y</sub>(t) ，我們得到：
:B<sub>y</sub>(<span style='font-stretch:condensed;'>½</span>)=2β(<span style='font-stretch:condensed;'>½</span>)(<span style='font-stretch:condensed;'>½</span>)=<span style='font-stretch:condensed;'>½ </span>β
因此，最低點的 y 值是 <span style='font-stretch:condensed;'>½ </span>β 。

====(二)次求控制點與最低點的 x 值關係：====

'''起迄點水平排列時， y 的極值均在 t=<span style='font-stretch:condensed;'>½</span> 處'''。

由上一段推理得到 b=<span style='font-stretch:condensed;'>½ </span>β，此時 t=<span style='font-stretch:condensed;'>½</span> 。

B(t)＝(1−t)<sup>2</sup>×P<sub>0</sub>＋2(1−t)t×P<sub>1</sub>＋t<sup>2</sup>×P<sub>2</sub>, t∈[0,1]

B<sub>x</sub>(<span style='font-stretch:condensed;'>½</span>)＝2(<span style='font-stretch:condensed;'>½</span>)(<span style='font-stretch:condensed;'>½</span>)α＋(<span style='font-stretch:condensed;'>½</span>)(<span style='font-stretch:condensed;'>½</span>)ɭ＝<span style='font-stretch:condensed;'>½ </span>α＋<span style='font-stretch:condensed;'>¼ </span>ɭ＝a

====(三)求端點的切線斜率====
切線斜率為 B<sub>y</sub>′(t) / B<sub>x</sub>′(t)＝2β(1-2t) / 2α+2(ɭ-2α)t＝β(1-2t) / α+(ɭ-2α)t

當 t=0 ，斜率為 β / α ，恰為 <span class='overline-segment'>P<sub>1</sub>P<sub>0</sub></span> 的斜率

當 t=1 ，斜率為 -β / ɭ-α，恰為 <span class='overline-segment'>P<sub>1</sub>P<sub>2</sub></span> 的斜率

<math>AB</math>

====(四)二次貝茲曲線的圖形是拋物線====
將起點、迄點、控制點的座標一般化：
:P<sub>0</sub> 座標 (x<sub>0</sub>,y<sub>0</sub>)
:P<sub>1</sub> 座標 (α,β)
:P<sub>2</sub> 座標 (x<sub>2</sub>,y<sub>2</sub>)
B<sub>y</sub>(t)＝(1−t)<sup>2</sup>×y<sub>0</sub>＋2(1−t)t×β＋t<sup>2</sup>×y<sub>2</sub>＝y<sub>0</sub>＋2(β-y<sub>0</sub>)t＋(y<sub>0</sub>-2β+y<sub>2</sub>)t<sup>2</sup>
:B<sub>y</sub>(t) 對 t 是一拋物線方程。
若 B<sub>x</sub>(t) 為一線性函數，則 B<sub>y</sub>(t) 將是一拋物線方程。
:若 B<sub>x</sub>(t) 為一線性函數，則 (x-x<sub>0</sub>)=t×(x<sub>2</sub>-x<sub>0</sub>)
:代入 B<sub>y</sub>(t) 得到將為 mx<sup>2</sup>＋nx＋ɭ 的形式，也是拋物線方程。

====(五)總結====
所以有：
#t=<span style='font-stretch:condensed;'>½</span> 時弦垂直距離最大
#Q=<span style='font-stretch:condensed;'>½ </span>(P+P<sub>1</sub>) ，P,Q,P<sub>1</sub>，三點共線，且 Q 為 <span style='text-decoration:overline'>PP<sub>1</sub></span> 的中點。
#<span style='text-decoration:overline'>P<sub>1</sub>P<sub>0</sub></span>, <span style='text-decoration:overline'>P<sub>1</sub>P<sub>2</sub></span> 分別切二次貝茲曲線 P<sub>0</sub>QP<sub>2</sub> 於 P<sub>0</sub>, P<sub>2</sub>
#二次貝茲曲線 P<sub>0</sub>QP<sub>2</sub> 為拋物線。

===二次貝茲曲線在 SVG path 中的路徑表達語法===
<table class=nicetable><tr>
<td>Q or q<br/>(quadratic<br/>Bézier<br/>curve)</td>
<td colspan=2>x1 y1 x y<br/><img src='http://jendo.org/wiki1231/images/a/a8/SvgPathQ.png' width='200px' height='*'/><br/><span style='font-size:90%'>&lt;path d='M0,0 Q50,50 100,0' style='stroke:black'/&gt;<br/>&lt;path d='m0,0 q50,50 100,0' style='stroke:black'/&gt;</span></td>
<td>從目前點的座標畫條<br/>二次貝茲曲線到指定<br/>點的 x,y 座標：其中<br/> x1,y1 為控制點</td>
</tr></table>

==參考文章==
*[https://zh.wikipedia.org/wiki/貝茲曲線 貝茲曲線]
*[http://blog.iderzheng.com/continuous-and-smooth-bezier-curve/ 連續平滑的貝塞爾曲線]
*[http://www.kut.com.tw/Upload//ProductProbation/File/數學高三甲上第二章第3節主題4觀念一.pdf 二元二次方程式圖形判別的例題]<br/>---------- 擬合圓 ----------
#[https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%c3%a9zier-curves/1734859 How to create circle with Bézier curves?]
#[https://oomake.com/question/343212 如何使用Bézier曲線創建圓？]
#[https://www.jianshu.com/p/5198d8aa80c1 用三阶贝塞尔曲线拟合圆]