[Cairo] rectangle arrondi : border-radius et border-width

Version imprimable

19/05/2017, 00h04
Persistant

1 pièce(s) jointe(s)

[Cairo] rectangle arrondi : border-radius et border-width

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.
Pièce jointe 277078

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.

2 pièce(s) jointe(s)

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:

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:

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:

1
2
3
4
    DevianceCorners c = {
        {12.0, 12.0}, {12.0, 12.0},
        {12.0, 12.0}, {12.0, 12.0},
    };

Code:

1
2
3
4
    DevianceCorners c = {
        {8.0, 4.0}, {8.0, 4.0},
        {8.0, 4.0}, {8.0, 4.0},
    };

Pièce jointe 277604

Pièce jointe 277611

Bien à vous

22/05/2017, 14h30
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/

Citation:

Envoyé par 2

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:

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:

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

09/06/2017, 19h52
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...