貝茲曲線：修訂版本之間的差異

2024年8月2日 (五) 00:36的最新修訂版本

一次貝茲曲線

B(t)＝P₀＋(P₁－P₀)t＝(1-t)P₀＋tP₁, t∈[0,1]

B(t)描述一條由P₀至P₁的直線。例如當t=0.25時，B(t)即一條由點P₀至P₁路徑的四分之一處。

等同於線性插值。

二次貝茲曲線


二次貝茲曲線的結構

二次貝茲曲線演示 t在[0,1]區間

重點：

二次貝茲曲線畫出的是拋物線，無法畫出橢圓和雙曲線。故無法畫出正圓。
所有拋物線都「相似」(不是相等)，且所有曲率(0~∞)的微線段都有。
兩端點外只有一個控制點。
拋物線方程式 ax²+bxy+cy²+dx+ey+f=0 則 b² - 4ac=0 ，即前三項為完全平方式。

由二次貝茲曲線參數方程推導出四性質

二次貝茲曲線圖形(以下簡稱圖形)是拋物線的一段。
t=½ 時弦與圖形垂直距離最大，圖形此處稱為頂點。
弦的中點、頂點、控制點三點共線，且頂點為弦中點與控制點的中點。
控制點與弦的兩端點連線分別切圖形於兩端點。

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

B(t)＝(1−t)²×P₀＋2(1−t)t×P₁＋t²×P₂, t∈[0,1]

將弦水平放置後，其中：

t 是一個介於 0 到 1 之間的參數
P₀ 是起點，座標設為 (0,0)
P₁ 是控制點，座標設為 (α,β)
P₂ 是終點，座標設為 (ɭ,0)

圖形為：

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

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

(一)先求控制點與最低點的 y 值關係

將控制點的 y 值代入 B_y(t) 的方程式，我們得到：

B_y(t)＝(1−t)²×0＋2(1−t)t×β＋t²×0＝2β×t(1−t)＝2β×(t−t²)

對其進行微分：

B_y′(t)=2β(1-2t)

將斜率設為 0 以解 t：

1−2t=0

t=½

將 t=½ 代入 B_y(t) ，我們得到：

B_y(½)=2β(½)(½)=½ β

因此，最低點的 y 值是 ½ β 。

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

起迄點水平排列時， y 的極值均在 t=½ 處。

由上一段推理得到 b=½ β，此時 t=½ 。

B(t)＝(1−t)²×P₀＋2(1−t)t×P₁＋t²×P₂, t∈[0,1]

B_x(½)＝2(½)(½)α＋(½)(½)ɭ＝½ α＋¼ ɭ＝a

結合上段，可以發現弦的中點、頂點(最低點)、控制點三點共線，且頂點為弦中點與控制點的中點。

(三)求端點的切線斜率

切線斜率為 B_y′(t) / B_x′(t)＝2β(1-2t) / 2α+2(ɭ-2α)t＝β(1-2t) / α+(ɭ-2α)t

當 t=0 ，斜率為 β / α ，恰為 P₁P₀ 的斜率

當 t=1 ，斜率為 -β / ɭ-α，恰為 P₁P₂ 的斜率

(四)二次貝茲曲線的圖形是拋物線

將起點、迄點、控制點的座標一般化：

P₀ 座標 (x₀,y₀)

P₁ 座標 (α,β)

P₂ 座標 (x₂,y₂)

B_y(t)＝(1−t)²×y₀＋2(1−t)t×β＋t²×y₂＝y₀＋2(β-y₀)t＋(y₀-2β+y₂)t²

由於 B_y(t)＝mt²＋nt＋ɭ 的形式，所以 B_y(t) 對 t 是一拋物線方程。

若 B_x(t) 為一線性函數，則 B_y(t) 對 x 也將是一拋物線方程。

若 B_x(t) 為一線性函數，則 (x-x₀)=t×(x₂-x₀)

代入 B_y(t) 得到將為 m′x²＋n′x＋ɭ′ 的形式，也是拋物線方程。

(五)總結

所以有：

t=½ 時弦對圖形垂直距離最大。
Q=½ (P+P₁) ，P,Q,P₁，三點共線，且 Q 為 PP₁ 的中點。
P₁P₀, P₁P₂ 分別切二次貝茲曲線 P₀QP₂ 於 P₀, P₂
二次貝茲曲線 P₀QP₂ 為拋物線。

二次貝茲曲線在 SVG path 中的路徑表達語法

Q or q
(quadratic
Bézier
curve)

x1 y1 x y

從目前點的座標畫條
二次貝茲曲線到指定
點的 x,y 座標：其中
x1,y1 為控制點

三次貝茲曲線


三次貝茲曲線的結構

三次貝茲曲線演示 t在[0,1]區間

如右圖：P₀、P₁、P₂、P₃四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P₀(起點)，走向P₁(控制點)，並從P₂(控制點)的方向來到P₃(迄點)。貝茲曲線不會經過P₁或P₂；這兩個點只是在那裡提供方向資訊，也叫「控制點」。

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

B(t)＝(1−t)³×P₀＋3(1−t)²t×P₁＋3(1−t)t²×P₂＋t³×P₃ , t∈[0,1]

我們將弦水平放置後，令： P₀ 座標為 (0,0) ，P₃ 座標為 (ɭ,0) ，不須考慮 ɭ 大小，僅由兩個控制點對弦的垂直高度，即可找到貝茲曲線上對弦的最大垂直距離( y 的極值)；我們可以對 y 的方程進行微分，並將其設為 0 以找到可能的極值。

將弦水平放置後，其中：

t 是一個介於 0 到 1 之間的參數
P₀ 是起點，座標設為 (0,0)
P₁,P₂ 是控制點，對弦的垂直距離分別為 h₁,h₂
P₃ 是終點，座標設為 (ɭ,0)

(一)先求兩控制點與最低點的 y 值關係

將控制點的 y 值代入 B_y(t) 的方程式，我們得到：

B_y(t)＝(1−t)³×0＋3(1−t)²t×h₁＋3(1−t)t²×h₂＋t³×0＝3×t(1−t)[h₁-h₁t+h₂t]

＝3×t(1−t)[h₁＋(h₂−h₁)t]＝3×[h₁t＋(h₂−2h₁)t²＋(h₁−h₂)t³]

對其進行微分：

B_y′(t)＝3[h₁＋2(h₂-2h₁)t＋3(h₁-h₂)t²]

將斜率設為 0 以解 t：

t＝[2(2h₁-h₂)±√4(h₂²-4h₁h₂+4h₂²)-4×3(h₁-h₂)h₁] / 2×3(h₁-h₂)

＝[(2h₁-h₂)±√h₂²-4h₁h₂+4h₁²-3h₁²+3h₁h₂] / 3(h₁-h₂)

＝[(2h₁-h₂)±√h₁²-h₁h₂+h₂²] / 3(h₁-h₂)

(二)特殊解：求兩控制點等高時

若 h₁＝h₂＝h

B_y′(t)＝3[h＋2(-h)t]＝0

h＋2(-h)t＝0 => h=2ht => t=½

B_y(½)＝3[½h-¼h]＝¾h

參考文章

貝茲曲線
連續平滑的貝塞爾曲線
二元二次方程式圖形判別的例題
---------- 擬合圓 (須四塊三次貝茲曲線組合，二次貝茲曲線要更多塊組合) ----------

@@ 第 1 行： / 第 1 行： @@
-[[分類:數學]][[分類:HTML]]
+[[分類:數學]][[分類:SVG]]
+==一次貝茲曲線==
+<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~∞)的微線段都有。
 #兩端點外只有一個控制點。
-#拋物線方程式的二次項係數a,b,c，b<sup>2</sup>–4ac=0。
+#拋物線方程式 ax<sup>2</sup>+bxy+cy<sup>2</sup>+dx+ey+f=0 則 b<sup>2</sup> - 4ac=0 ，即前三項為完全平方式。
-===參考===
-#[https://tw.answers.yahoo.com/question/index?qid=20080427000016KK01361 為什麼b^2 – 4ac為二次曲線的判別式?]
+===由二次貝茲曲線參數方程推導出四性質===
-#[http://www.kut.com.tw/Upload//ProductProbation/File/數學高三甲上第二章第3節主題4觀念一.pdf 例題]
+#二次貝茲曲線圖形(以下簡稱圖形)是拋物線的一段。
+#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> 的斜率
+====(四)二次貝茲曲線的圖形是拋物線====
+將起點、迄點、控制點的座標一般化：
+: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)＝mt<sup>2</sup>＋nt＋ɭ 的形式，所以 B<sub>y</sub>(t) 對 t 是一拋物線方程。
+若 B<sub>x</sub>(t) 為一線性函數，則 B<sub>y</sub>(t) 對 x 也將是一拋物線方程。
+:若 B<sub>x</sub>(t) 為一線性函數，則 (x-x<sub>0</sub>)=t×(x<sub>2</sub>-x<sub>0</sub>)
+:代入 B<sub>y</sub>(t) 得到將為 m′x<sup>2</sup>＋n′x＋ɭ′ 的形式，也是拋物線方程。
+====(五)總結====
+所以有：
+#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 class='overline-segment'>PP<sub>1</sub></span> 的中點。
+#<span class='overline-segment'>P<sub>1</sub>P<sub>0</sub></span>, <span class='overline-segment'>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>
+==三次貝茲曲線==
+<table class='putInto' align=right>
+<tr><th><img src='https://upload.wikimedia.org/wikipedia/commons/8/89/B%C3%A9zier_3_big.svg' width=240 height=100 /></th></tr>
+<tr><th>三次貝茲曲線的結構</th></tr>
+<tr><th><img src='https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif' width=240 height=100 /></th></tr>
+<tr><th>三次貝茲曲線演示<br/>t在[0,1]區間</th></tr>
+</table>
+如右圖：'''P'''<sub>0</sub>、'''P'''<sub>1</sub>、'''P'''<sub>2</sub>、'''P'''<sub>3</sub>四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於'''P'''<sub>0</sub>(起點)，走向'''P'''<sub>1</sub>(控制點)，並從'''P'''<sub>2</sub>(控制點)的方向來到'''P'''<sub>3</sub>(迄點)。貝茲曲線不會經過'''P'''<sub>1</sub>或'''P'''<sub>2</sub>；這兩個點只是在那裡提供方向資訊，也叫「控制點」。
+三次貝茲曲線的參數方程為：
+B(t)＝(1−t)<sup>3</sup>×P<sub>0</sub>＋3(1−t)<sup>2</sup>t×P<sub>1</sub>＋3(1−t)t<sup>2</sup>×P<sub>2</sub>＋t<sup>3</sup>×P<sub>3</sub> , t∈[0,1]
+我們將弦水平放置後，令： '''P'''<sub>0</sub> 座標為 (0,0) ，'''P'''<sub>3</sub> 座標為 (ɭ,0) ，不須考慮 ɭ 大小，僅由兩個控制點對弦的垂直高度，即可找到貝茲曲線上對弦的最大垂直距離( y 的極值)；我們可以對 y 的方程進行微分，並將其設為 0 以找到可能的極值。
+將弦水平放置後，其中：
+#t 是一個介於 0 到 1 之間的參數
+#P<sub>0</sub> 是起點，座標設為 (0,0)
+#P<sub>1</sub>,P<sub>2</sub> 是控制點，對弦的垂直距離分別為 h<sub>1</sub>,h<sub>2</sub>
+#P<sub>3</sub> 是終點，座標設為 (ɭ,0)
+====(一)先求兩控制點與最低點的 y 值關係====
+將控制點的 y 值代入 B<sub>y</sub>(t) 的方程式，我們得到：
+:B<sub>y</sub>(t)＝(1−t)<sup>3</sup>×0＋3(1−t)<sup>2</sup>t×h<sub>1</sub>＋3(1−t)t<sup>2</sup>×h<sub>2</sub>＋t<sup>3</sup>×0＝3×t(1−t)[h<sub>1</sub>-h<sub>1</sub>t+h<sub>2</sub>t]
+:&emsp;＝3×t(1−t)[h<sub>1</sub>＋(h<sub>2</sub>−h<sub>1</sub>)t]＝3×[h<sub>1</sub>t＋(h<sub>2</sub>−2h<sub>1</sub>)t<sup>2</sup>＋(h<sub>1</sub>−h<sub>2</sub>)t<sup>3</sup>]
+對其進行微分：
+:B<sub>y</sub>′(t)＝3[h<sub>1</sub>＋2(h<sub>2</sub>-2h<sub>1</sub>)t＋3(h<sub>1</sub>-h<sub>2</sub>)t<sup>2</sup>]
+將斜率設為 0 以解 t：
+:t＝[2(2h<sub>1</sub>-h<sub>2</sub>)±√<span class='overline-segment'>4(h<sub>2</sub><sup>2</sup>-4h<sub>1</sub>h<sub>2</sub>+4h<sub>2</sub><sup>2</sup>)-4×3(h<sub>1</sub>-h<sub>2</sub>)h<sub>1</sub></span>] / 2×3(h<sub>1</sub>-h<sub>2</sub>)
+:&ensp;＝[(2h<sub>1</sub>-h<sub>2</sub>)±√<span class='overline-segment'>h<sub>2</sub><sup>2</sup>-4h<sub>1</sub>h<sub>2</sub>+4h<sub>1</sub><sup>2</sup>-3h<sub>1</sub><sup>2</sup>+3h<sub>1</sub>h<sub>2</sub></span>] / 3(h<sub>1</sub>-h<sub>2</sub>)
+:&ensp;＝[(2h<sub>1</sub>-h<sub>2</sub>)±√<span class='overline-segment'>h<sub>1</sub><sup>2</sup>-h<sub>1</sub>h<sub>2</sub>+h<sub>2</sub><sup>2</sup></span>] / 3(h<sub>1</sub>-h<sub>2</sub>)
+====(二)特殊解：求兩控制點等高時====
+若 h<sub>1</sub>＝h<sub>2</sub>＝h
+:B<sub>y</sub>′(t)＝3[h＋2(-h)t]＝0
+:h＋2(-h)t＝0 => h=2ht => t=½
+B<sub>y</sub>(½)＝3[½h-¼h]＝¾h
 ==參考文章==
 *[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 用三阶贝塞尔曲线拟合圆]