在圆上动态增长梯度

Question

我开始为tizen wearable 2.3.1 编写应用程序。我想在弧上添加动态增长的辐射（一直增长直到它变成一个圆）。我的圈子是使用cairo2d 创建的。

我一直在关注this article 关于三次贝塞尔曲线的近似。我已经取得了一些进展。我在圆圈的前半部分有一个动态渐变 - 但渐变不是从我的X1,Y1 开始的，而是从中心开始增长的。

第一步是移动cairo中心并旋转（所以中心在圆的中间，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);
}