Dynamiclly在一個圓上漸變漸變

Question

我開始爲tizen wearable 2.3.1編寫應用程序。我想在弧上增加動態增長的輻射（直到它變成一個圓）。我的圈子使用cairo2d創建。

我一直在關注三次貝塞爾曲線的近似值this article。我取得了一些進展。我有一個圓圈前半部分的動態漸變 - 但漸變不是從我的X1,Y1開始的，但它似乎從中心增長。

第一步是移動開羅中心和旋轉（因此該中心是在圓的中心和X,Y是適當的軸線），那麼我算基於所述百分比的角度並初始化變量：

double current_angle= (2 * M_PI * percent)/100; 
double R = 74; 
double K = 0.5522847498; // - magic number from article 

// start and end point 
double X1 = 0; 
double Y1 = R; 
double X4 = R * sin(current_angle); 
double Y4 = R * cos(current_angle); 
// bezier points 
double X2 = X1 + K * R * sin(current_angle); 
double Y2 = Y1 - K * R * cos(current_angle); 
double X3 = X4 + K * R * sin(current_angle); 
double Y3 = Y4 + K * R * cos(current_angle); 

那麼，在年底，創建我的模式，我的畫弧：

Evas_Coord_Point P1 = {X1, Y1}; 
Evas_Coord_Point P2 = {X2, Y2}; 
Evas_Coord_Point P3 = {X3, Y3}; 
Evas_Coord_Point P4 = {X4, Y4}; 

cairo_pattern_t *dynamic_pattern = cairo_pattern_create_mesh(); 
cairo_mesh_pattern_begin_patch (dynamic_pattern); 
cairo_mesh_pattern_move_to (dynamic_pattern, P1.x, P1.y); 
cairo_mesh_pattern_curve_to (dynamic_pattern, P2.x, P2.y, P3.x, P3.y, P4.x, P4.y); 
cairo_mesh_pattern_set_corner_color_rgb (dynamic_pattern, 1, 1, 1, 1); 
cairo_mesh_pattern_set_corner_color_rgb (dynamic_pattern, 0, 0, 1, 0); 
cairo_mesh_pattern_end_patch (dynamic_pattern); 
cairo_set_source(cairo, dynamic_pattern); 

cairo_arc(cairo, 0, 0, cairo_circle_radius, 0, current_angle); 
cairo_stroke(cairo); 

，並在最初的幾個百分比值，我沒有得到任何東西，但隨後在12％左右，它開始借鑑和擴展兩個方向。我究竟做錯了什麼？

這張圖片顯示了我想要達到的目標（抱歉，對於我不是很專業的圖片，但這是我能做的最好的）。

編輯：我做了一些測試，它開始對角工作> = 45

Answer 1

好吧，我發現了一個方法來創建錐形梯度，並與小波折我設法讓它以動態漸變方式工作。解決方案是創建補丁（圓形的三角形切割）並設置它們的漸變。

補丁部門方法：

static void sector_patch (cairo_pattern_t *pattern, 
     double angle_A, 
     double A_r, double A_g, double A_b, 
     double angle_B, 
     double B_r, double B_g, double B_b) 
{ 
    double r_sin_A, r_cos_A; 
    double r_sin_B, r_cos_B; 
    double h; 

    r_sin_A = RADIUS * sin (angle_A); 
    r_cos_A = RADIUS * cos (angle_A); 
    r_sin_B = RADIUS * sin (angle_B); 
    r_cos_B = RADIUS * cos (angle_B); 

    h = 4.0/3.0 * tan ((angle_B - angle_A)/4.0); 

    cairo_mesh_pattern_begin_patch (pattern); 

    cairo_mesh_pattern_move_to (pattern, CENTER_X, CENTER_Y); 
    cairo_mesh_pattern_line_to (pattern, 
      CENTER_X + r_cos_A, 
      CENTER_Y + r_sin_A); 

    cairo_mesh_pattern_curve_to (pattern, 
      CENTER_X + r_cos_A - h * r_sin_A, 
      CENTER_Y + r_sin_A + h * r_cos_A, 
      CENTER_X + r_cos_B + h * r_sin_B, 
      CENTER_Y + r_sin_B - h * r_cos_B, 
      CENTER_X + r_cos_B, 
      CENTER_Y + r_sin_B); 

    cairo_mesh_pattern_set_corner_color_rgb (pattern, 0, 1, 1, 1); 
    cairo_mesh_pattern_set_corner_color_rgb (pattern, 1, A_r, A_g, A_b); 
    cairo_mesh_pattern_set_corner_color_rgb (pattern, 2, B_r, B_g, B_b); 

    cairo_mesh_pattern_end_patch (pattern); 
} 

這裏是裝箱梯度完整的循環方法（如果你想繪製漸變添加cairo_paint（CR）;在設定梯度法結束）

static void set_conical_gradient(cairo_t *cr, int width, int height) 
{ 
    cairo_pattern_t *pattern; 

    pattern = cairo_pattern_create_mesh(); 
    sector_patch (pattern, 
     0,   1, 1, 1, 
     M_PI/4, 0.9, 0.96, 0.87); 
    sector_patch (pattern, 
     M_PI/4, 0.9, 0.96, 0.87, 
     M_PI/2, 0.81, 0.91, 0.75); 
    sector_patch (pattern, 
     M_PI/2, 0.81, 0.91, 0.75, 
     3*M_PI/4, 0.7, 0.87, 0.63); 
    sector_patch (pattern, 
     3*M_PI/4, 0.7, 0.87, 0.63, 
     M_PI,  0.62, 0.83, 0.5); 
    sector_patch (pattern, 
     -M_PI,  0.62, 0.83, 0.5, 
     -3*M_PI/4, 0.53, 0.78, 0.38); 
    sector_patch (pattern, 
     -3*M_PI/4, 0.53, 0.78, 0.38, 
     -M_PI/2, 0.43, 0.74, 0.25); 
    sector_patch (pattern, 
     -M_PI/2, 0.43, 0.74, 0.25, 
     -M_PI/4, 0.38, 0.72, 0.18); 
    sector_patch (pattern, 
     -M_PI/4, 0.38, 0.72, 0.18, 
     0,  0.34, 0.7, 0.13); 

    cairo_set_source(cr, pattern); 
}