Discussion :

[Persistant]

Bonsoir à tous,

Je souhaite dessiner les bords rouge de l'image ci-dessous en fonction des données CSS présente dans l'image avec les fonctions Cairo.



Comment vous y prendriez-vous ?

PS: Le site de cairographics m'a donné une première piste pour dessiner des rectangle arrondi mais ca reste insuffisant car je souhaite utiliser des border-style:inset ce qui pose problème quand je veux dessiner le background.

[Persistant]

Petit retour pour ceux d'entre vous qui serrai éventuellement intéressé,

Je vais utiliser la fonction cairo_fill au lieu de cairo_stroke pour dessiner les border. Comme dans cette exemple: fill_style

J'ai crée cette fonction a l'instar de cairo_rectangle a la différence qu'elle gère les border en x et y pour chaque coin

Code C :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
struct _DevianceRadius {
    gdouble rx;
    gdouble ry;
};
 
struct _DevianceCorners {
    DevianceRadius top_left;
    DevianceRadius top_right;
    DevianceRadius bottom_right;
    DevianceRadius bottom_left;
};
 
 
void
deviance_graphics_data_path_rectangle(cairo_t *cr,
                                      DevianceRectangle *rect,
                                      DevianceCorners *corners)
{
    double x         = rect->x,
           y         = rect->y,
           width     = rect->width,
           height    = rect->height;
 
    cairo_new_sub_path (cr);
 
    if (0.0==corners->top_left.rx || 0.0==corners->top_left.ry) {
        cairo_move_to(cr, x, y);
    } else {
        cairo_move_to(cr, x+corners->top_left.rx, y);
    }
 
    if (0.0==corners->top_right.rx || 0.0==corners->top_right.ry) {
        cairo_line_to(cr, x+width, y);
    } else {
        cairo_line_to(cr, x+width-corners->top_right.rx, y);
        cairo_curve_to(cr,
                       x+width-corners->top_right.rx*0.44771525016, y,
                       x+width, y+corners->top_right.ry*0.44771525016,
                       x+width, y+corners->top_right.ry);
    }
 
    if (0.0==corners->bottom_right.rx || 0.0==corners->bottom_right.ry) {
        cairo_line_to(cr, x+width, y+height);
    } else {
        cairo_line_to(cr, x+width, y+height-corners->bottom_right.ry);
        cairo_curve_to(cr,
                       x+width, y+height-corners->bottom_right.ry*0.44771525016,
                       x+width-corners->bottom_right.rx*0.44771525016, y+height,
                       x+width-corners->bottom_right.rx, y+height);
    }
 
    if (0.0==corners->bottom_left.rx || 0.0==corners->bottom_left.ry) {
        cairo_line_to(cr, x+corners->bottom_left.rx, y+height);
    } else {
        cairo_line_to(cr, x+corners->bottom_left.rx, y+height);
        cairo_curve_to(cr,
                       x+corners->bottom_left.rx*0.44771525016, y+height,
                       x, y+height-corners->bottom_left.ry*0.44771525016,
                       x, y+height-corners->bottom_left.ry);
    }
 
 
    if (0.0==corners->top_left.rx || 0.0==corners->top_left.ry) {
        cairo_line_to(cr, x, y);
    } else {
        cairo_line_to(cr, x, y+corners->top_left.ry);
        cairo_curve_to(cr,
                       x, y+corners->top_left.ry*0.44771525016,
                       x+corners->top_left.rx*0.44771525016, y,
                       x+corners->top_left.rx, y);
    }
 
}
 
// @see: <a href="http://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves" target="_blank">http://stackoverflow.com/questions/1...%A9zier-curves</a>
// @note: 0.44771525016 = 1-0.552284749831

Utilisation:

Code C :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    DevianceRectangle rect = {10.0, 10.0, 100, 41};
    DevianceCorners corners = {
        {12.0, 12.0}, {12.0, 12.0},
        {12.0, 12.0}, {12.0, 12.0},
    };
    deviance_graphics_data_path_rectangle(cr, &rect, &corners);
 
    gdouble border_width[4] = {1.0, 8.0, 1.0, 8.0};
    DevianceRectangle r = {rect.x+border_width[0], rect.y+border_width[1], rect.width-border_width[0]-border_width[2], rect.height-border_width[1]-border_width[3]};
    DevianceCorners c = {
        {12.0, 12.0}, {12.0, 12.0},
        {12.0, 12.0}, {12.0, 12.0},
    };
    deviance_graphics_data_path_rectangle(cr, &r, &c);
 
    cairo_close_path (cr);
    cairo_set_source_rgb (cr, 1.0, 0.0, 0.0);
    cairo_set_fill_rule (cr, CAIRO_FILL_RULE_EVEN_ODD);
    cairo_fill (cr);

Résulat:

Code C : Sélectionner tout - Visualiser dans une fenêtre à part 1 2 3 4 DevianceCorners c = { {12.0, 12.0}, {12.0, 12.0}, {12.0, 12.0}, {12.0, 12.0}, };	Code C : Sélectionner tout - Visualiser dans une fenêtre à part 1 2 3 4 DevianceCorners c = { {8.0, 4.0}, {8.0, 4.0}, {8.0, 4.0}, {8.0, 4.0}, };

Bien à vous

[liberforce]

Bonjour,

je te conseille:

1. d'utiliser des define pour tes constantes magiques
2. de garder une api proche de cairo avec x, y, longueur, hauteur
3. de ne jamais faire de comparaison stricte (==) en float ou double http://floating-point-gui.de/

[Persistant]

garder une api proche de cairo avec x, y, longueur, hauteur

Je suis d'accord qu'il est préférable de conserver une certaine homogénéité dans les signatures des fonctions.
Mais quand je le fais, je suis agacé par le nombre de paramètre

Code C :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * @usage
 * coria_rounded_rectangle(cr, 0.0, 0.0, 100.0, 50.0, 4.0, 4.0, 4.0, 4.0, 4.0, 4.0, 4.0, 4.0); 
 */
void
coria_rounded_rectangle(cairo_t *cr,
                        gdouble x, gdouble y, gdouble width, gdouble height,
                        gdouble top_left_radius_x, gdouble top_left_radius_y,
                        gdouble top_right_radius_x, gdouble top_right_radius_y,
                        gdouble bottom_left_radius_x, gdouble bottom_left_radius_y,
                        gdouble bottom_right_radius_x, gdouble bottom_right_radius_y) {
}

Du coup, je vais me détacher de la couche "graphics" (cairo) et créer ou couche que je vais appeler "display" responsable de l'orchestration de cairo.

Code C :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
static cairo_path_t*
deviance_display_create_rounded_rectangle(DevianceRectangle *rect, DevianceCorners *corners) {
}
static void
deviance_display_update_rounded_rectangle(cairo_path_t *path, DevianceRectangle *rect, DevianceCorners *corners) {
}

Pour le 3ème point, je vais utiliser une fonction gboolean deviance_display_is_epsilon(gdouble value) qui vérifia si la valeur est entre -0.01 et 0.01

[Persistant]

Je re-ouvre cette discution car ma fonction deviance_graphics_data_path_rectangle a trop de bug et j'avoue bugger quand a les résoudre.

- Si les border sont trop large par rapport au rectangle ca bug
- si le radius est trop grand par rapport a la tail du rectangle ca bug

Si vous avez des solutions à me proposer je suis vraiment preneur...