貝茲路徑，以及用滑鼠和貝茲路徑互動

by 野比喵
這段時間感覺很蛋疼。。雖然各種遊戲玩的很開心。。還是多少要學習一下唄。。
做了個小東西，貼出來得瑟下。。能力有限，就先這麼著了。
別試圖找我要任何代碼之類的。。我只是個amateur，這種文章認真你就輸了。。
別試圖接分。。那是不可能的。。

當你對生活不滿意，工作不滿意，妹妹不滿意。。。
如果不想付出金錢去改變，活該苦逼。
如果不想付出精力去改變，活該苦逼。
如果不想付出生命去改變，活該苦逼。
如果不能忍受別人的鄙視，親，請給別人一個不鄙視你的理由先。。

其實這篇沒什麼技術含量，類似Photoshop裡的“鋼筆”工具。。
（代碼裡面的招數我經常用，可以在前面的文章裡翻到。。

前半部分是理論，可以在數學書上翻。後半部分是實踐，其實很簡單。。

本文開始

貝茲路徑
貝茲路徑（The Bézier Curves），是一種在電腦圖形學中相當重要的參數曲線（2D，3D的稱為曲面）。貝茲路徑於1962年，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發表，他運用貝茲路徑來為汽車的主體進行設計。

線性曲線
給定點P0、P1，線性貝茲路徑只是一條兩點之間的直線。這條線由下式給出：

當參數t變化時，其過程如下：

線性貝茲路徑函數中的t會經過由P0至P1的B（t）所描述的曲線。例如當t=0.25時，B（t）即一條由點P0至P1路徑的四分之一處。就像由0至1的連續t，B（t）描述一條由P0至P1的直線。
二次曲線
二次方貝茲路徑的路徑由給定點P0、P1、P2的函數B（t）追蹤：

為建構二次方貝茲曲線，可以中介點Q0和Q1作為由0至1的t：
* 由P0至P1的連續點Q0，描述一條線性貝茲路徑。
* 由P1至P2的連續點Q1，描述一條線性貝茲路徑。
* 由Q0至Q1的連續點B（t），描述一條二次方貝茲曲線。
二次曲線看起來就是這樣的：

三次曲線
為建構高階曲線，便需要相應更多的中介點。對於三次曲線，可由線性貝茲路徑描述的中介點Q0、Q1、Q2，和由二次曲線描述的點R0、R1所建構。
P0、P1、P2、P3四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P0走向P1，並從P2的方向來到P3。一般不會經過P1或P2；這兩個點只是在那裡提供方向資訊。P0和P1之間的間距，決定了曲線在轉而趨進P3之前，走向P2方向的“長度有多長”。
曲線的參數形式為：

看起來就是這樣的：

高階曲線
更高階的貝茲路徑，可以用以下公式表示：
用表示由點P0、P1、…、Pn所決定的貝茲路徑。則有：

更多的關於貝茲路徑的內容，你可以去查閱各種數學書。加油，求知的騷年。
應用
在幾乎所有的進階映像軟體中，均使用到了三次貝茲路徑來實現“平滑曲線”繪製功能。例如Photoshop中的“鋼筆”，CoralDraw中的“貝塞爾工具”，Fireworks中的“畫筆”。

在編程中實現
電腦繪圖
要“畫”出貝茲路徑，一般需要進行較多的計算，然後繪製出來，類似這樣：

繪製的代碼可以在各類電腦圖形學書籍中找到。
GDI+
幸運的是，GDI+已經封裝好了貝茲路徑的繪製代碼，如果你想畫出貝茲路徑，只用調用Graphics.DrawBezier方法：

這是一個三次貝茲路徑，其中4個點分別為：起點，起點控制點，終點，終點控制點。繪製出來的效果如下：

與滑鼠的互動
怎麼實現Photoshop裡那樣可以調整的貝茲路徑呢？兩種方法：
* 輸入新參數產生曲線
* 用滑鼠互動調整曲線
很顯然第二種看起來會拉風很多，那麼就來試試看。
你想要獲得是這樣的效果：

這是一條三次貝茲路徑，圖中應該這樣解讀：

所以需要幾個需要解決的：
* 表示貝茲路徑的錨點和控制點
* 繪製曲線和控制點/控制項控點
* 滑鼠互動
看起來不是很難的樣子，那麼就來化整為零，各個擊破吧。
錨點
對於三次貝茲路徑而言，有兩個錨點：起始點和結束點。每個錨點有兩個座標：本身座標和控制點座標。於是，可以用這樣的類來描述：

三次貝茲路徑
三次曲線前面已經說過原理了，那麼它的結構應該就是這樣的：

畫出來
為了簡單，就用一個最基本的渲染器來畫，代碼如下：

畫出曲線和控制點及其手柄：


畫出來的效果就是這樣的：

滑鼠互動
和滑鼠實際上是這樣互動的：
* 按下滑鼠，如果落點在某個控制點上，就表示選中了該點，否則落空
* 移動滑鼠，如果選中了某個控制點，則調整控制點座標至新座標，否則忽略
* 放開滑鼠，取消任何選擇
看起來只需要處理MouseDown，MouseMove和MouseUp這三個事件就夠了，很容易嘛。
先弄一個全域標記：

然後處理滑鼠事件：
MouseDown：

MouseMove：

MouseUp：

為了簡單，重新整理就這麼弄了：

更高效的重新整理應該只處理髒區。
效果
最後看起來就像這樣。

就這麼簡單。

擴充和最佳化
要實現Photoshop那種曲線效果，需要多個錨點串連起來。上面的方法在效率上也還有可以提高的地方。
怎麼辦？
自己看著辦。
（完）