円上で動的に成長する勾配

Question

tizen wearable 2.3.1のアプリケーションを書き始めました。私は、動的に成長する輻射線を円弧（それが円になるまで成長する）に追加したいと考えました。私のサークルはcairo2dを使って作成されています。

私は、キュービックベジェ曲線の近似について、this articleに従っています。私はいくつかの進歩を遂げました。私は円の前半のための動的なグラデーションを持っています - しかし、グラデーションは私のX1,Y1から始まらませんが、それは中心から成長するようです。

最初のステップは、私は割合に基づいて角度をカウントし、変数を初期化し、（SO中心が円の中央にあり、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％の周りにそれを描き始め、中に展開します双方向。私は間違って何をしていますか？

このグラフィックスは私が達成したいことを示しています（私の非常にプロフェッショナルなイメージには申し訳ありませんが、それは私ができる最高のものです）。

編集：私はいくつかのテストを行なったし、それは[OK]を、私は円錐勾配を作成する方法を発見し、少しひねりを私が作るために管理角度> = 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); 
}