동그라미에서 동적으로 증가하는 그래디언트

Question

tizen wearable 2.3.1에 대한 신청서를 작성하기 시작했습니다. 필자는 동적으로 커지는 복사열을 호 (원이 될 때까지 커짐)에 추가하고 싶었습니다. 내 서클은 cairo2d을 사용하여 만듭니다.

나는 큐빅 베 지어 곡선의 근사치에 대해 this article을 따라 왔습니다. 나는 진전을 이루었습니다. 서클의 첫 번째 절반에 대한 동적 그라디언트가 있습니다. 그러나 그래디언트는 내 X1,Y1에서 시작하지 않지만 중심에서 커지는 것으로 보입니다.

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); 

:

첫 단계는 변수 카이로 중심을 이동하고, 그때 비율에 기초하여 각도를 계산 (그래서 중심 원의 중간에 있고, X,Y 적절한 축있는) 회전 초기화한다

는 그런 말에, 나는 나의 패턴을 만들어 내 아크 그릴 :

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); 
}