碼上快樂

相關內容    簡體    繁體

穿過已知點畫平滑曲線（3次貝塞爾曲線）

本文轉載自   查看原文   2017-01-12 18:53   2851    積累資源

為了把一串點連成光滑的曲線，先研究貝塞爾曲線，又搞B樣條插值。。。。都沒有成功(數學沒那么強)。

后來在

“[翻譯] AGG 之貝塞爾插值 ”http://liyiwen.javaeye.com/blog/705489  。看到一種比較好的方法：

運用貝塞爾曲線的光滑性來穿過這些點。

大致思路就是 先算出相鄰原始點的中點，在把相鄰中點連成的線段平移到對應的原始點，以平移后的中點作為控制點，相鄰原始點為起始點畫貝塞爾曲線，這樣就保證了連接處的光滑。而貝塞爾曲線本身是光滑的，所以就把這些原始點用光滑曲線連起來了。


我封裝了一個函數，留着以后用。

（c++版，其它語言只要把數組和可變數組稍微變一下就能用）

 

 

[cpp]  view plain  copy
 
  1. void createCurve(CvPoint *originPoint,int originCount,vector<CvPoint> &curvePoint){  
  2.     //控制點收縮系數 ，經調試0.6較好，CvPoint是<a href="http://lib.csdn.net/base/opencv" class='replace_word' title="OpenCV知識庫" target='_blank' style='color:#df3434; font-weight:bold;'>OpenCV</a>的，可自行定義結構體(x,y)  
  3.     float scale = 0.6;  
  4.     CvPoint midpoints[originCount];  
  5.     //生成中點       
  6.     for(int i = 0 ;i < originCount ; i++){      
  7.         int nexti = (i + 1) % originCount;  
  8.         midpoints[i].x = (originPoint[i].x + originPoint[nexti].x)/2.0;  
  9.         midpoints[i].y = (originPoint[i].y + originPoint[nexti].y)/2.0;  
  10.     }      
  11.       
  12.     //平移中點  
  13.     CvPoint extrapoints[2 * originCount];   
  14.     for(int i = 0 ;i < originCount ; i++){  
  15.          int nexti = (i + 1) % originCount;  
  16.          int backi = (i + originCount - 1) % originCount;  
  17.          CvPoint midinmid;  
  18.          midinmid.x = (midpoints[i].x + midpoints[backi].x)/2.0;  
  19.          midinmid.y = (midpoints[i].y + midpoints[backi].y)/2.0;  
  20.          int offsetx = originPoint[i].x - midinmid.x;  
  21.          int offsety = originPoint[i].y - midinmid.y;  
  22.          int extraindex = 2 * i;  
  23.          extrapoints[extraindex].x = midpoints[backi].x + offsetx;  
  24.          extrapoints[extraindex].y = midpoints[backi].y + offsety;  
  25.          //朝 originPoint[i]方向收縮   
  26.          int addx = (extrapoints[extraindex].x - originPoint[i].x) * scale;  
  27.          int addy = (extrapoints[extraindex].y - originPoint[i].y) * scale;  
  28.          extrapoints[extraindex].x = originPoint[i].x + addx;  
  29.          extrapoints[extraindex].y = originPoint[i].y + addy;  
  30.            
  31.          int extranexti = (extraindex + 1)%(2 * originCount);  
  32.          extrapoints[extranexti].x = midpoints[i].x + offsetx;  
  33.          extrapoints[extranexti].y = midpoints[i].y + offsety;  
  34.          //朝 originPoint[i]方向收縮   
  35.          addx = (extrapoints[extranexti].x - originPoint[i].x) * scale;  
  36.          addy = (extrapoints[extranexti].y - originPoint[i].y) * scale;  
  37.          extrapoints[extranexti].x = originPoint[i].x + addx;  
  38.          extrapoints[extranexti].y = originPoint[i].y + addy;  
  39.            
  40.     }      
  41.       
  42.     CvPoint controlPoint[4];  
  43.     //生成4控制點，產生貝塞爾曲線  
  44.     for(int i = 0 ;i < originCount ; i++){  
  45.            controlPoint[0] = originPoint[i];  
  46.            int extraindex = 2 * i;  
  47.            controlPoint[1] = extrapoints[extraindex + 1];  
  48.            int extranexti = (extraindex + 2) % (2 * originCount);  
  49.            controlPoint[2] = extrapoints[extranexti];  
  50.            int nexti = (i + 1) % originCount;  
  51.            controlPoint[3] = originPoint[nexti];      
  52.            float u = 1;  
  53.            while(u >= 0){  
  54.                int px = bezier3funcX(u,controlPoint);  
  55.                int py = bezier3funcY(u,controlPoint);  
  56.                //u的步長決定曲線的疏密  
  57.                u -= 0.005;  
  58.                CvPoint tempP = cvPoint(px,py);  
  59.                //存入曲線點   
  60.                curvePoint.push_back(tempP);  
  61.            }      
  62.     }  
  63. }  
  64. //三次貝塞爾曲線  
  65. float bezier3funcX(float uu,CvPoint *controlP){  
  66.    float part0 = controlP[0].x * uu * uu * uu;  
  67.    float part1 = 3 * controlP[1].x * uu * uu * (1 - uu);  
  68.    float part2 = 3 * controlP[2].x * uu * (1 - uu) * (1 - uu);  
  69.    float part3 = controlP[3].x * (1 - uu) * (1 - uu) * (1 - uu);     
  70.    return part0 + part1 + part2 + part3;   
  71. }      
  72. float bezier3funcY(float uu,CvPoint *controlP){  
  73.    float part0 = controlP[0].y * uu * uu * uu;  
  74.    float part1 = 3 * controlP[1].y * uu * uu * (1 - uu);  
  75.    float part2 = 3 * controlP[2].y * uu * (1 - uu) * (1 - uu);  
  76.    float part3 = controlP[3].y * (1 - uu) * (1 - uu) * (1 - uu);     
  77.    return part0 + part1 + part2 + part3;   
  78. }   

 

翻譯] AGG 之貝塞爾插值

文章分類:綜合技術

原文地址：http://www.antigrain.com/research/ 
bezier_interpolation/index.html#PAGE_BEZIER_INTERPOLATION

Interpolation with Bezier Curves  貝塞爾插值

 

A very simple method of smoothing polygons 一種非常簡單的多邊形平滑方法

 

翻譯：唐風

之前 comp.graphic.algorithms 上有一個討論，是關於怎么樣使用曲線對多邊形進行插值處理，使得最終產生的曲線是光滑的而且能通過所有的頂點。Gernot Hoffmann 建議說使用著名的 B-Spline 來進行插值。這里有他當時的文章。B-Spline 在這里效果很好，它看起來就像是一個固定在多邊形頂點上的橡皮尺（elastic ruler）。

 

spline_polygon1    spline_polygon2

 

 

bezier_interpolation但我有個大膽的推測，我覺得肯定還存在更簡單的方法。比如，使用三次貝塞曲線(cubic Bezier)進行近似。貝塞爾曲線有兩個固定點（起點和終點），另加兩個決定曲線形狀的控制點(CP）。關於貝塞爾曲線的更多知識可以在搜索引擎中找到，比如，你可以參考 Paul Bourke 的站點 。 現在給貝塞爾曲線的錨點（固定點），也就是多邊形的某一對頂點，那么問題是，我們怎么計算控制點的位置？我運行 Xara X 然后畫出了右邊這個圖形，這很簡單，所以我決定嘗試下計算出它們的坐標。很顯然，多邊形兩條相鄰邊的兩個控制點與這兩個控制點之間的頂點應該在一條直線 上，只有這樣，兩條相鄰的插值曲線才能平滑地連接在一起。所以，這兩個控制點應該是相對於頂點是對稱的，不過，也不全是……，因為真正的對稱就要求它們與 中心點的距離應該是相等的，但對於我們的情況中並不完全是這樣的。一開始，我試着先算出多邊形兩條邊的角平分線，然后把控制點放在這條角平分線的垂直線 上。但從圖上可以看到，控制點的連線並不會總是垂直於角平分線的。

 

 

 

最終，我找到一個非常簡單的辦法，不需要任何復雜的數學計算。首先，我們計算出多邊形所有邊線的中點，Ai。

 

bezier_interpolation_s1

 

 

然后連接起相鄰邊中點，得到很多線段，記為 Ci 。並用圖記的方法計算出 Bi 點。

bezier_interpolation_s2

 

 

最后一步，只需要簡單地將 Ci 進行平移，平移的路徑就是每條線段上 Bi 到對應頂點的路徑。就這樣，我們計算出了貝塞爾曲線的控制點，平滑的結果看起來也很棒。

bezier_interpolation_s3

 

 

這里還可以做一點小小的改進，因為我們已經得到了一條決定控制點的直線，所以，我們可以根據需要，使控制點在這條直線上移動，這樣可以改變插值曲線 的狀態。我使用了一個與控制點和頂點初始距離相關的系數 K ，用來沿直線移動控制點。控制點離頂點越遠，圖形看起來就越銳利。

bezier_interpolation_s4

 

 

下面是用原始形狀和系統K=1.0的貝塞爾插值兩種方法來描畫的 SVG 的獅子。

bezier_lion1   bezier_lion2

 

 

下面是放大圖

bezier_lion3   bezier_lion4

 

 

這個方法對於自相關的多邊形也適用，下面的例子可以看到，結果非常有意思：

 

bezier_self_intersecting1

 

 

 

bezier_self_intersecting2

 

 

bezier_self_intersecting3

 

 

 

這個方法只是探索和經驗式的，如果從嚴格的數學模型的角度看它可能是錯誤的。但在實際使用中的效果已經足夠好了，而 且這個方法只需要最小的計算量。下面的代碼就是用來畫出上面獅子圖像的。這些代碼並沒有進行優化，只是用來演示的。里面有些變量計算了兩次，在實際程序 中，如果連續的步驟中都用到同一個變量值，我們可以先緩存變量值進行復用（以避免重復的計算）。

This method is pure heuristic and empiric. It probably gives 

a wrong result from the point of view of strict mathematical 

modeling. But in practice the result is good enough and it 

requires absolute minimum of calculations. Below is the source code

that has been used to generate the lions shown above. It's

not optimal and just an illustration. It calculates some variables 

twice, while in real programs we can store and reuse them in the
[cpp] view plain copy
 
  1. // Assume we need to calculate the control  
  2.    // points between (x1,y1) and (x2,y2).  
  3.    // Then x0,y0 - the previous vertex,  
  4.    //      x3,y3 - the next one.  
  5.   
  6.    double xc1 = (x0 + x1) / 2.0;  
  7.    double yc1 = (y0 + y1) / 2.0;  
  8.    double xc2 = (x1 + x2) / 2.0;  
  9.    double yc2 = (y1 + y2) / 2.0;  
  10.    double xc3 = (x2 + x3) / 2.0;  
  11.    double yc3 = (y2 + y3) / 2.0;  
  12.   
  13.    double len1 = sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));  
  14.    double len2 = sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));  
  15.    double len3 = sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));  
  16.   
  17.    double k1 = len1 / (len1 + len2);  
  18.    double k2 = len2 / (len2 + len3);  
  19.   
  20.    double xm1 = xc1 + (xc2 - xc1) * k1;  
  21.    double ym1 = yc1 + (yc2 - yc1) * k1;  
  22.   
  23.    double xm2 = xc2 + (xc3 - xc2) * k2;  
  24.    double ym2 = yc2 + (yc3 - yc2) * k2;  
  25.   
  26.    // Resulting control points. Here smooth_value is mentioned  
  27.    // above coefficient K whose value should be in range [0...1].  
  28.    ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;  
  29.    ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;  
  30.   
  31.    ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;  
  32.    ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;  
 



consecutive steps.

使用三次貝塞爾近似的代碼：

[cpp] view plain copy
 
  1. // Number of intermediate points between two source ones,  
  2. // Actually, this value should be calculated in some way,  
  3. // Obviously, depending on the real length of the curve.  
  4. // But I don't know any elegant and fast solution for this  
  5. // problem.  
  6. #define NUM_STEPS 20  
  7.   
  8. void curve4(Polygon* p,  
  9.             double x1, double y1,   //Anchor1  
  10.             double x2, double y2,   //Control1  
  11.             double x3, double y3,   //Control2  
  12.             double x4, double y4)   //Anchor2  
  13. {  
  14.     double dx1 = x2 - x1;  
  15.     double dy1 = y2 - y1;  
  16.     double dx2 = x3 - x2;  
  17.     double dy2 = y3 - y2;  
  18.     double dx3 = x4 - x3;  
  19.     double dy3 = y4 - y3;  
  20.   
  21.     double subdiv_step  = 1.0 / (NUM_STEPS + 1);  
  22.     double subdiv_step2 = subdiv_step*subdiv_step;  
  23.     double subdiv_step3 = subdiv_step*subdiv_step*subdiv_step;  
  24.   
  25.     double pre1 = 3.0 * subdiv_step;  
  26.     double pre2 = 3.0 * subdiv_step2;  
  27.     double pre4 = 6.0 * subdiv_step2;  
  28.     double pre5 = 6.0 * subdiv_step3;  
  29.   
  30.     double tmp1x = x1 - x2 * 2.0 + x3;  
  31.     double tmp1y = y1 - y2 * 2.0 + y3;  
  32.   
  33.     double tmp2x = (x2 - x3)*3.0 - x1 + x4;  
  34.     double tmp2y = (y2 - y3)*3.0 - y1 + y4;  
  35.   
  36.     double fx = x1;  
  37.     double fy = y1;  
  38.   
  39.     double dfx = (x2 - x1)*pre1 + tmp1x*pre2 + tmp2x*subdiv_step3;  
  40.     double dfy = (y2 - y1)*pre1 + tmp1y*pre2 + tmp2y*subdiv_step3;  
  41.   
  42.     double ddfx = tmp1x*pre4 + tmp2x*pre5;  
  43.     double ddfy = tmp1y*pre4 + tmp2y*pre5;  
  44.   
  45.     double dddfx = tmp2x*pre5;  
  46.     double dddfy = tmp2y*pre5;  
  47.   
  48.     int step = NUM_STEPS;  
  49.   
  50.     // Suppose, we have some abstract object Polygon which  
  51.     // has method AddVertex(x, y), similar to LineTo in  
  52.     // many graphical APIs.  
  53.     // Note, that the loop has only operation add!  
  54.     while(step--)  
  55.     {  
  56.         fx   += dfx;  
  57.         fy   += dfy;  
  58.         dfx  += ddfx;  
  59.         dfy  += ddfy;  
  60.         ddfx += dddfx;  
  61.         ddfy += dddfy;  
  62.         p->AddVertex(fx, fy);  
  63.     }  
  64.     p->AddVertex(x4, y4); // Last step must go exactly to x4, y4  
  65. }  

你可以下載一個能運行的畫獅子的例子，對它進行旋轉和縮放，也可以生成一些隨機的多邊形。點左鍵並拖動它可以圍繞中 心點旋轉和縮放圖像。點右鍵並從左向右拖動，可以改變系統數K。 K＝1時大約是距窗口左邊100像素處。每次雙擊會產生一個隨機的多邊形，對於這些多邊形，也可以進行旋轉、縮放以及改變K值的操作。

來自：穿過已知點畫平滑曲線（3次貝塞爾曲線）


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 平滑曲線生成：貝塞爾曲線擬合 貝塞爾曲線 貝塞爾曲線 二次貝塞爾曲線公式 怎樣繪制二次貝塞爾曲線 怎樣繪制三次貝塞爾曲線 Bezier貝塞爾曲線的原理、二次貝塞爾曲線的實現 MATLAB 貝塞爾曲線 貝塞爾曲線基本用法 關於貝塞爾曲線的故事
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM