[GTK+ 2] Dessiner du vectoriel

**eric1708** · 13/03/2014, 16h39

Bonjour à tous,

Ma question est semble t'il une question de débutant. Désolé. En fait, je commence à bien connaitre GTK, mais je dois à présent développer du code qui trace des graphiques vectoriels dans un drawable. Il y a pas mal d'années, j’utilisais des GdkGC et autres gdk_gc_new() et gdk_draw_line(), etc. avec succès, mais le passage à GTK+ change tout (en mieux si j'ai bien saisi).

Je cherche des des tutos pour apprendre à faire ça, donc apprendre les rudiments de cairo, donc. J'en ai trouve quelques uns, mais pas forcément vraiment explicites. Vous auriez des liens à me proposer ?

Par ailleurs, je suis actuellement en 2.24.0 (pour des raisons de fuites mémoire dans des versions plus récentes - et ne souhaite pas trop passer en GTK 3, vu que je n'ai pas trop envie de reprendre tous mes codes pour migration..). J'ai bien essayé de compiler des codes d'essai, en linkant avec la cairo.lib, mais gdk_cairo_create() n'est pas une fonction reconnue, par exemple, par mon compilateur.

Bref, je patauge, pour l'instant, et toute aide ou pointeur sur ce point me serait utile et me ferait gagner du temps.

Merci d'avance aux gurus qui trainent sur ce forum.

AMitiés à tous, Eric.

**gerald3d** · 14/03/2014, 10h09

Pourrais-tu nous montrer un bout de code pour qu'on comprenne ce que tu dessines exactement ? On pourra à partir de là te montrer comment faire avec cairo.

**pvincent** · 14/03/2014, 10h12

Bonjour,

Pour débuter avec Cairo, il y a cette introduction http://www.dil.univ-mrs.fr/~regis/CM-CAIRO/index.html
Il y a aussi ceci http://zetcode.com/gfx/cairo/

Normalement gdk_cairo_create() devrait être connue

Pour pouvoir me servir de toutes les surfaces disponibles (Postscript, PDF et SVG), j'utilise l'en-tête suivant:

Code :

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

1
2
3
4
5
6
7
 
#include <gtk/gtk.h>
#include <gdk/gdk.h>
#include <cairo.h>
#include <cairo-ps.h>
#include <cairo-pdf.h>
#include <cairo-svg.h>

La compilation et l'édition de liens utilisent les variables suivantes:

Code :

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

1
2
3
4
5
6
 
# GUI flags
GUI_FLAGS=-pthread -I/usr/include/gtk-2.0 -I/usr/lib/gtk-2.0/include -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/pango-1.0 -I/usr/include/gio-unix-2.0/ -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng12 -I/usr/include/glib-2.0 -I/usr/lib/glib-2.0/include  
 
# GUI libraries
GUI_LIBS= -pthread -lgtk-x11-2.0 -lgdk-x11-2.0 -latk-1.0 -lpangoft2-1.0 -lgdk_pixbuf-2.0 -lm -lpangocairo-1.0 -lcairo -lgio-2.0 -lpango-1.0 -lfreetype -lfontconfig -lgobject-2.0 -lgmodule-2.0 -lgthread-2.0 -lrt -lglib-2.0

J'espère que tout ça peut te servir.

**eric1708** · 14/03/2014, 11h13

Ok, merci.

Oui, j'avais vu ces deux tutos. Merci pvincent !

Pour gerald3d, voici ci-dessus un code que je viens d'écrire, qui - cette fois-ci - compile bien et ouvre une fenetre effectivement. Mais elle est complètement vide :

Code :

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
/* travail avec cairo */
#include <stdio.h>
#include <cairo.h>
#include <gtk/gtk.h>
 
int main(int argc, char *argv[])
{
    GtkWidget *window;
    GtkWidget *darea;
    gboolean on_expose_event(GtkWidget *, cairo_t *, gpointer);
    gtk_init(&argc, &argv);
    window=gtk_window_new(GTK_WINDOW_TOPLEVEL);
    darea=gtk_drawing_area_new();
    gtk_widget_set_size_request (darea, 400, 100);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_window_set_default_size(GTK_WINDOW(window), 400, 100);
    gtk_window_set_title(GTK_WINDOW(window), "GTK window");
    gtk_container_add(GTK_CONTAINER(window), darea);
    g_signal_connect(G_OBJECT(darea), "expose_event", G_CALLBACK(on_expose_event), NULL);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}
gboolean on_expose_event(GtkWidget *widget, cairo_t *cr, gpointer user_data)
{
    cairo_set_source_rgb(cr, 0., .0, .0);
    cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_NORMAL);
    cairo_set_font_size(cr, 10.0);
    cairo_move_to(cr, 10.0, 50.0);
    cairo_show_text(cr, "Hello World!");
    return FALSE;
}

Comprendre déjà où es le problème ici m'aiderait pas mal.

Dans tous les cas, merci pour toute aide sur ce point. Une fois que j'aurais "décolé" je pense que la suite devrait aller rapidement. Je voudrais faire des plots x-y simples, en fait.

Eric.

**liberforce** · 14/03/2014, 12h01

À mon avis tu écris en noir sur fond noir...
Pour comprendre les mécanismes de cairo, il y a aussi ces pages:
http://cairographics.org/samples/
http://cairographics.org/tutorial/ (ou http://www.mono-lab.ch/?p=149 pour C#/Mono, mais en français)

J'avais aussi codé un exemple de dessin de courbes avec cairo, mais c'est du GTK2. La conversion en GTK3 doit pas être compliquée, faut juste utiliser le signal "draw" au lieu de "expose-event", et plus besoin d'appeler gdk_cairo_create, le contexte cairo est founi en entrée de la callback.

**liberforce** · 14/03/2014, 12h03

Envoyé par pvincent

La compilation et l'édition de liens utilisent les variables suivantes:

Code :

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

1
2
3
4
5
6
 
# GUI flags
GUI_FLAGS=-pthread -I/usr/include/gtk-2.0 -I/usr/lib/gtk-2.0/include -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/pango-1.0 -I/usr/include/gio-unix-2.0/ -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng12 -I/usr/include/glib-2.0 -I/usr/lib/glib-2.0/include  
 
# GUI libraries
GUI_LIBS= -pthread -lgtk-x11-2.0 -lgdk-x11-2.0 -latk-1.0 -lpangoft2-1.0 -lgdk_pixbuf-2.0 -lm -lpangocairo-1.0 -lcairo -lgio-2.0 -lpango-1.0 -lfreetype -lfontconfig -lgobject-2.0 -lgmodule-2.0 -lgthread-2.0 -lrt -lglib-2.0

J'espère que tout ça peut te servir.

Fais plutôt des appels directs à pkg-config pour gérer tout ça, c'est son boulot.

**eric1708** · 14/03/2014, 12h13

Envoyé par liberforce

À mon avis tu écris en noir sur fond noir...
Pour comprendre les mécanismes de cairo, il y a aussi ces pages:
http://cairographics.org/samples/
http://cairographics.org/tutorial/ (ou http://www.mono-lab.ch/?p=149 pour C#/Mono, mais en français)

J'avais aussi codé un exemple de dessin de courbes avec cairo, mais c'est du GTK2. La conversion en GTK3 doit pas être compliquée, faut juste utiliser le signal "draw" au lieu de "expose-event", et plus besoin d'appeler gdk_cairo_create, le contexte cairo est founi en entrée de la callback.

Si je remplace

Code :

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

 cairo_set_source_rgb(cr, 0., .0, .0);

par

Code :

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

cairo_set_source_rgb(cr, 1., .2, .2);

(à la ligne 23 de mon code), j'ai le même comportement (fenetre vide). Je suis pas en noir sur fond noir dans ce cas. Il y a un autre problème..

Pour l'exemple de votre dessin de courbes avec cairo, ca ne compile pas chez moi (GTK 2). La fonction gdk_cairo_create() n'est pas référencée dans mon environnement de développement (codeblock) alors que j'ai bien un lien avec la cairo.lib..

Bref, voilà où j'en suis, c'est-à-dire au même endroit..

Eric.

**liberforce** · 14/03/2014, 15h00

Je viens de relire ton exemple de code, la raison est effectivement ailleurs...

En GTK 2:

on utilise le signal "expose-event" pour dessiner
la signature de la callback associée à ce signal se trouve dans la doc: gboolean user_function (GtkWidget *widget, GdkEvent *event, gpointer user_data)

Note qu'il n'y a pas de parmètre cairo, ici. Il faut donc passer par une phase de conversion GDK → cairo. C'est à ça que sert gdk_cairo_create: obtenir un contexte graphique cairo à partir d'un GdKDrawable (classe de base pour GdkWindow et GdkPixmap). La GdkWindow d'un widget (c'est à dire le buffer graphique, la fenêtre telle qu'elle est dessinée) s'obtient en appelant gtk_widget_get_window sur un GtkWidget.

Code :

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

1
2
3
GdkWindow *window =  gtk_widget_get_window(widget);
cairo_t *cr = gdk_cairo_create (window);
/* là tu peux manipuler ton contexte cairo, sans oublier de le libérer à la fin avec cairo_destroy */

En GTK 3, l'intégration de cairo est plus poussée: plus de manipulation de GDK, on te founit directement le contexte cairo.
En GTK 3:

on utilise le signal "draw" pour dessiner
la signature de la callback associée à ce signal se trouve dans la doc: gboolean user_function (GtkWidget *widget, CairoContext *cr, gpointer user_data)

Bon, il y a un petit piège: le type CairoContext n'existe pas, le bon type dépend du langage utilisé. En C, c'est un cairo_t.

Toi tu as fait un gros mix de GTK 2 et GTK 3, ça ne peut pas marcher. Tu utilises l'expose-event (GTK 2), mais avec une callback au format GTK3. Utilise la bonne signature de callback, celle de GTK 2.

Tu ne devrais même pas avoir une fenêre vide, chez moi ça crashe au lancement ! Ensuite, gdk_cairo_create existe en GDK 2 et GDK 3, donc vérifie ton installation de GTK, car sur un GTK 2.24 ça doit fonctionner.

**pvincent** · 14/03/2014, 17h07

Fais plutôt des appels directs à pkg-config pour gérer tout ça, c'est son boulot.

En fait, c'est la sortie de pkg-config telle que donnée par mon script configure, mais je voulais qu'il voit le détail des bibliothèques nécessaires, au cas où une manquerai.

**eric1708** · 17/03/2014, 14h04

Merci liberforce pour la réponse. Vraiment utile.

Envoyé par liberforce

Je viens de relire ton exemple de code, la raison est effectivement ailleurs...

la signature de la callback associée à ce signal se trouve dans la doc: gboolean user_function (GtkWidget *widget, GdkEvent *event, gpointer user_data)

Bon, c'est mon gros problème avec GTK: Je n'arrive jamais à trouver la signature des callback associée à des sigaux, ni même - parfois - la liste des signaux. Dans ce cas, par exemple, où puis-je trouver ca ? (i.e., que chercher ?) Ca reste encore cryptique pour moi.. Dans le même ordre d'idée, je n'arrive pas non plus à trouver les conséquences que la fonction callback, dans ce cas particulier, retourne un TRUE ou un FALSE. Mais c'est la même doc que je cherche..

Envoyé par liberforce

Ensuite, gdk_cairo_create existe en GDK 2 et GDK 3, donc vérifie ton installation de GTK, car sur un GTK 2.24 ça doit fonctionner.

Ok, il me manquait le link avec la lib de gdk dans mon environnement. A présent, ca compile bien. Merci.

Ok, bon, j'ai donc repris mon code, et j'arrive à ca:

Code :

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
/* travail avec cairo */
#include <stdio.h>
#include <cairo.h>
#include <gtk/gtk.h>
 
int main(int argc, char *argv[])
{
    GtkWidget *window;
    gboolean on_expose_event(GtkWidget * widget, GdkEventExpose * event, gpointer userdata);
    gtk_init(&argc, &argv);
    window=gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_window_set_default_size(GTK_WINDOW(window), 400, 100);
    gtk_window_set_title(GTK_WINDOW(window), "GTK window");
    g_signal_connect(G_OBJECT(window), "expose-event", G_CALLBACK(on_expose_event), NULL);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}
gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer userdata)
{
    cairo_t *cr = NULL;
    cr = gdk_cairo_create(widget->window);
    cairo_set_source_rgb(cr, 1., .2, .2);
    cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_NORMAL);
    cairo_set_font_size(cr, 10.0);
    cairo_move_to(cr, 10.0, 50.0);
    cairo_show_text(cr, "Hello World!");
    cairo_destroy (cr);
    return FALSE;
}

Ca compile donc, une fenêtre s'ouvre. Mais elle est vide. J'avance en en restant au même point (plus je pédale moins vite, plus j'avance plus doucement..).

Toute aide sur ce point reste la bienvenue.

Thanks, Eric.

**gerald3d** · 17/03/2014, 16h36

Ton code est maintenant correcte. Cependant effectivement écrire directement dans un GtkWindow ne semble pas fonctionné. J'ai fait un petit test en ajoutant un GtkDrawingArea à la fenêtre et cette fois ca fonctionne parfaitement

.

Code :

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
int main(int argc, char *argv[])
{
    GtkWidget *window;
		GtkWidget *drawing;
 
    gtk_init(&argc, &argv);
    window=gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_window_set_default_size(GTK_WINDOW(window), 400, 100);
    gtk_window_set_title(GTK_WINDOW(window), "GTK window");
		drawing=gtk_drawing_area_new ();
		gtk_container_add (GTK_CONTAINER(window), drawing); 
    g_signal_connect(G_OBJECT(drawing), "expose-event", G_CALLBACK(on_expose_event), NULL);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

Nom : cairo.png
Affichages : 207
Taille : 3,4 Ko

**liberforce** · 17/03/2014, 18h03

Envoyé par eric1708

Bon, c'est mon gros problème avec GTK: Je n'arrive jamais à trouver la signature des callback associée à des sigaux, ni même - parfois - la liste des signaux. Dans ce cas, par exemple, où puis-je trouver ca ? (i.e., que chercher ?) Ca reste encore cryptique pour moi.. Dans le même ordre d'idée, je n'arrive pas non plus à trouver les conséquences que la fonction callback, dans ce cas particulier, retourne un TRUE ou un FALSE. Mais c'est la même doc que je cherche..

Bin il suffit de regarder la doc officielle: documentation GTK 2 ou documentation GTK 3. Ensuite tu cherches le widget qui t'intéresse, par exemple pour comprendre comment fonctionne un GtkDrawingArea dans GTK 3. Et tout en haut de la page, tu as un bandeau de navigation qui t'amène aux différentes sections de la page. En l'occurrence la page de GtkDrawingArea est assez simple: il n'a pas de signal spécifique, uniquement des signaux dont il a hérité par sa classe mère. Mais tu as un aperçu des fonctionnalités dans la section description, et un lien vers le signal draw hérité de GtkWidget. Et là tu as tout ce qu'il faut: la signature de la callback, la signification des paramètres et la signification de la valeur à retourner.

Si on prend le signal "clicked" de GtkButton, on trouve dans le bandeau supérieur la section "signals", qui t'emmène à tous les signaux, dont clicked. Quand c'est un signal hérité en revanche, tu dois remonter dans la hiérarchie des classes, d'un cran à chaque fois, jusqu'à trouver qui fournit ce signal. La section object hierarchy sert à ça. De temps en temps les signaux ou méthodes sont implémentés via une interface (au sens programmation objet): c'est dans la section implemented interfaces que tu les trouves. Et pour aller plus vite qu'une simple recherche sur le web, utilise devhelp (disponible sous Linux, il y a peut être une version Windows ?). C'est une application dédiée à la recherche dans les manuels d'aide, donc en tapant le nom d'un signal, il te trouve directement dans quel(s) widgets il est implémenté. Sinon n'hésite pas à faire un control+F danspour rechercher dans les pages web de documentation.

**eric1708** · 18/03/2014, 15h28

Envoyé par liberforce

Bin il suffit de regarder la doc officielle: documentation GTK 2 ou documentation GTK 3. Ensuite tu cherches le widget qui t'intéresse, par exemple pour comprendre comment fonctionne un GtkDrawingArea dans GTK 3. Et tout en haut de la page, tu as un bandeau de navigation qui t'amène aux différentes sections de la page. En l'occurrence la page de GtkDrawingArea est assez simple: il n'a pas de signal spécifique, uniquement des signaux dont il a hérité par sa classe mère. Mais tu as un aperçu des fonctionnalités dans la section description, et un lien vers le signal draw hérité de GtkWidget. Et là tu as tout ce qu'il faut: la signature de la callback, la signification des paramètres et la signification de la valeur à retourner.

Si on prend le signal "clicked" de GtkButton, on trouve dans le bandeau supérieur la section "signals", qui t'emmène à tous les signaux, dont clicked. Quand c'est un signal hérité en revanche, tu dois remonter dans la hiérarchie des classes, d'un cran à chaque fois, jusqu'à trouver qui fournit ce signal. La section object hierarchy sert à ça. De temps en temps les signaux ou méthodes sont implémentés via une interface (au sens programmation objet): c'est dans la section implemented interfaces que tu les trouves. Et pour aller plus vite qu'une simple recherche sur le web, utilise devhelp (disponible sous Linux, il y a peut être une version Windows ?). C'est une application dédiée à la recherche dans les manuels d'aide, donc en tapant le nom d'un signal, il te trouve directement dans quel(s) widgets il est implémenté. Sinon n'hésite pas à faire un control+F danspour rechercher dans les pages web de documentation.

Ok merci. Notamment:

Merci à gerald3d. Mon code d'exemple fonctionne à présent. Je vais pouvoir continuer.

Merci à liberforce. Deux points cependant:

Pour GTK2, le signal est "expose_event" et pas "expose-event".

Les liens sur les signaux et la signature des callback semblent effectivement assez clairs dans GTK3, pas trop dans GTK2 (en tout cas pour un GtkDrawingArea). Mais je pense que je vais (progressivement) m'y retrouver.

Je passe ce post en "résolu".

Encore merci,

Eric.

**eric1708** · 18/03/2014, 17h22

Envoyé par eric1708

Ok merci. Notamment:

Merci à gerald3d. Mon code d'exemple fonctionne à présent. Je vais pouvoir continuer.

Merci à liberforce. Deux points cependant:

Pour GTK2, le signal est "expose_event" et pas "expose-event".

Les liens sur les signaux et la signature des callback semblent effectivement assez clairs dans GTK3, pas trop dans GTK2 (en tout cas pour un GtkDrawingArea). Mais je pense que je vais (progressivement) m'y retrouver.

Je passe ce post en "résolu".

Encore merci,

Eric.

Bon, je dois être vraiment con, mais il y a quelque chose que je ne comprends toujours pas (vais-je un jour sortir de ce truc ?).

Si - dans mon code ci-dessus - je remplace :

Code :

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

1
2
3
4
cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_NORMAL);
cairo_set_font_size(cr, 10.0);
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Hello World!");

(code qui semble-t'il fait bien ce que je lui demande)

par :

Code :

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

1
2
cairo_set_line_width(cr, 10.0);
cairo_rectangle(cr, 20.,30.,200.,300.);

Je récupère alors une fenêtre bellement vide, et ce avec n'importe quelle directive de dessin.

Pas simple l'apprentissage de cette library, je trouve..

Je sollicite encore l'aide bienveillante des lecteurs de ce forum.

Y a t-il quelque chose d'évident qui m'échappe encore ?

Encore merci d'avance pour toute aide sur ce point.

Eric.

**gerald3d** · 18/03/2014, 19h26

Dessiner, et non écrire un texte, demande une opération supplémentaire. Il faut demander l'affichage des directives de dessin demandées précédemment.

Code :

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

1
2
3
cairo_set_line_width(cr, 10.0);
cairo_rectangle(cr, 20.,30.,200.,300.);
cairo_stroke (cr);

**eric1708** · 19/03/2014, 08h03

Envoyé par gerald3d

Dessiner, et non écrire un texte, demande une opération supplémentaire. Il faut demander l'affichage des directives de dessin demandées précédemment.

Ca marche, merci !

Pffff...

Eric.

**liberforce** · 20/03/2014, 17h58

Envoyé par eric1708

Deux points cependant:

Pour GTK2, le signal est "expose_event" et pas "expose-event".

Les liens sur les signaux et la signature des callback semblent effectivement assez clairs dans GTK3, pas trop dans GTK2 (en tout cas pour un GtkDrawingArea). Mais je pense que je vais (progressivement) m'y retrouver.

Non, expose_event et expose-event sont équivalents, GTK accepte les deux syntaxes. Mais la documentation officielle utilise toujours les tirets et c'est la convention utilisée par l'écrasante majorité du code basé sur GTK.

**liberforce** · 20/03/2014, 18h07

Envoyé par gerald3d

Ton code est maintenant correcte. Cependant effectivement écrire directement dans un GtkWindow ne semble pas fonctionné.

Tu peux le faire, mais il faut utiliser le flag GTK_APP_PAINTABLE (type GtkWidgetFlags). Tu peux le positionner en appelant gtk_widget_set_app_paintable.

**gerald3d** · 20/03/2014, 18h35

Envoyé par liberforce

Tu peux le faire, mais il faut utiliser le flag GTK_APP_PAINTABLE (type GtkWidgetFlags). Tu peux le positionner en appelant gtk_widget_set_app_paintable.

Intéressant. Je prends note. +1

[GTK+ 2] Dessiner du vectoriel

GTK+ avec C & C++

Discussions similaires

Partager

Partager