How to draw in a subclassed DrawingArea widget? - gtk

Question

I want to implement custom widgets by subclassing DrawingArea Widget, for this I need to draw using cairo. It seems like in gtk3 there is a new signal called 'draw' introduced. How do I draw inside the widget? Should the map and realize signals also be overrided?
A simple example code would be very helpful. Thanks.

Answer 1

To put it simply, you'll need to override the draw signal which will supply a Cairo context:
gboolean
user_function (GtkWidget *widget,
CairoContext *cr,
gpointer user_data)
Then you can use the CairoContext crto draw the actual contents of the widget.
From the C API:
The GtkDrawingArea widget is used for creating custom user interface
elements. It’s essentially a blank widget; you can draw on it. After
creating a drawing area, the application may want to connect to:
Mouse and button press signals to respond to input from the user. (Use
gtk_widget_add_events() to enable events you wish to receive.)
The “realize” signal to take any necessary actions when the widget is instantiated on a particular display. (Create GDK resources in
response to this signal.)
The “size-allocate” signal to take any necessary actions when the widget changes size.
The “draw” signal to handle redrawing the contents of the widget.
The widget should queue some draws when the widget changes, for example, on size allocate you should use gtk_widget_queue_draw to force the widget to draw itsef again.
Example - Using a drawing area not as sub classing it but the concept remains:
(taken from Gnome C API)
gboolean
draw_callback (GtkWidget *widget, cairo_t *cr, gpointer data)
{
guint width, height;
GdkRGBA color;
GtkStyleContext *context;
context = gtk_widget_get_style_context (widget);
width = gtk_widget_get_allocated_width (widget);
height = gtk_widget_get_allocated_height (widget);
gtk_render_background (context, cr, 0, 0, width, height);
cairo_arc (cr,
width / 2.0, height / 2.0,
MIN (width, height) / 2.0,
0, 2 * G_PI);
gtk_style_context_get_color (context,
gtk_style_context_get_state (context),
&color);
gdk_cairo_set_source_rgba (cr, &color);
cairo_fill (cr);
return FALSE;
}
[...]
GtkWidget *drawing_area = gtk_drawing_area_new ();
gtk_widget_set_size_request (drawing_area, 100, 100);
g_signal_connect (G_OBJECT (drawing_area), "draw",
G_CALLBACK (draw_callback), NULL);
You should also read about Height-for-width Geometry Management in GtkWidget
I've used C because there was no reference to programming language on your question and at the same time it's the original API from which all other are written.
There are some examples about creating Gtk+ custom Widgets on the internet.