我开始为tizen可穿戴设备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% 左右,它开始在两个方向上绘制和扩展。我做错了什么?
This graphics shows what I want to achieve (sorry for my not very professional image, but that's the best I can do).
编辑:我做了一些测试,它开始在角度 >= 45 的情况下工作。
最佳答案
好吧,我找到了一种创建圆锥形渐变的方法,并且经过一些小改动,我设法使其作为动态渐变工作。解决方案是创建补丁(圆的三角形切割)并设置它们的渐变。
补丁扇区方法:
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);
}
关于c - 圆上动态增长的梯度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43230827/