如果在工作時間摸魚(咳咳)
為啥畫個曲線還有公式，還要寫**？
在各位使用各種編輯軟體的時候，其實到處都有貝塞爾曲線的影子。photoshop、ae、flash，除了鋼筆工具，還有調色曲線、運動曲線等等，有些是畫在畫布上的曲線，有些則影響了**度、亮度、運動速度等等，這類曲線最大的特點是可以通過拖動幾個控制點去調整整個曲線的軌跡
貝塞爾曲線的應用
ps的鋼筆工具
ps的調整顏色曲線
an的動畫曲線
ae的運動曲線
科普版啥是貝塞爾曲線，它不是你隨手畫的曲線，也不是圓規描出來的，它是通過套用乙個固定的公式經過差值計算畫出來的，這個公式大致長這樣
公式中的pn便是貝塞爾曲線中的n個控制點，除了第乙個和最後乙個，其他控制點都不會直接與曲線相交
貝塞爾曲線差值過程
一階二階
三階四階
五階
差值分解動作
是不是有點意思？但上手好像又一臉懵逼？那就繼續往下看吧
自製版先看效果
貝塞爾曲線其實是由差值算出的點的集合，差值的原理和過程上面都說了，下面說下更通俗的理解
要實現貝塞爾曲線，就要知道如何差值，從公式去理解顯然還是有一定gap的，哪怕有**，有時候也會有種好像明白但不知道如何入手的感覺
在查閱不少資料和自己動手實踐後，大致總結出乙個通用步驟(其實也就是求解pn的過程)
設定好起點、終點和控制點集，按順序排列，以起點為第乙個點，終點始終在最後 [start, p1, p2, ..., end]
設定曲線精度(曲線由多少個點組成，精度不夠的話會有明顯的折線)
進行差值
實現方法舉個栗子：
這裡先列一下假設條件，曲線有2個控制點(p1、p2)，算上起點(start)和終點(end)一共4個點，我們需要得到100個點集來繪製這個曲線計算的分解動作：
輸入控制點集[start, p1, p2, end]，需要得到的點的個數100
根據點的個數計算出每次差值的步長，step=1/99(為啥是99，因為第一次是0，而差值迭代是100次，所以最後一次step是99/99)
進行一次差值，假設已經進行到了第n次
第n次差值後的步長是step=n/99
根據公式，此次差值後的點應該是pn = start x step³+ 3 x p1 x step² x (1-step) + 3 x p2 x step x (1-step)² + end x (1-step)³將pn加入曲線點集
返回所有差值後的點集
這裡可以看到，pn的公式還是有規律可循的，大致規律是
因此，2個控制點的貝塞爾曲線的係數固定是1、3、3、1，單個控制點固定是1、2、1，多個控制點則根據數量算一遍楊輝三角就行
至此，貝塞爾曲線再也沒啥秘密了，整個差值計算也很單純，最後貼乙個自己寫的渣**，祝大家中秋國慶節日快樂~
/*貝塞爾曲線演算法輸入：controls：控制點count：需要生成的點的數量輸出：生成的點集 */function curve(controls, count) for(i = 0; i < count + 1; i++)var t = i / count; var s = 1 - t; for(var j = 0; j < c_count; j++)var mn = 1; for(k = 1; k <= yang - j; k++)var p1 = math.pow(s, c_count-j-1); var p2 = math.pow(t, j); p.x += n / (m * mn) * controls[j].x * p1 * p2; p.y += n / (m * mn) * controls[j].y * p1 * p2; }
res.push(p); }return res;}
貝塞爾曲線的生成
貝塞爾曲線的動態圖 該 包含了簡單的一階二階三階曲線的公式.貝塞爾曲線可以表示如下 b t i 0nc in 1 t n iti pib t sum c i 1 t t ip i b t i 0 n cin 1 t n itip i 其中 cin n i n i c i n frac cin i n...
貝塞爾曲線生成演算法
從網上蒐集來的兩控制點貝塞爾曲線生成法 int n controlpoint.size 1 vector儲存控制點 int i,r float u cvpoint p new cvpoint n 1 bezierpoint.clear u的步長決定了曲線點的精度 for u 0 u 1 u 0.01...
在AutoCAD中生成貝塞爾曲線
貝賽爾曲線的定義 貝塞爾曲線 b zier curve 是由法國雷諾公司的設計師pierre b zier設計。它的具體定義如下 其中pi i 0,1,2,n 稱作曲線的控制向量，他們組成的連續多段線叫做曲線的控制多邊形 t 0，1 即 t 從0連續變化到1時所生成的曲線就叫做貝賽爾曲線。而函式 叫...