The Cairo library supports various backends. In this section of the Cairo graphics tutorial, we will use Cairo to create a PNG image, PDF file, SVG file and we will draw on a GTK window.
PNG image
In the first example, we will create a PNG image.
#include <cairo.h>
int main (int argc, char *argv[])
{
cairo_surface_t *surface;
cairo_t *cr;
surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 390, 60);
cr = cairo_create(surface);
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, 40.0);
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Disziplin ist Macht.");
cairo_surface_write_to_png(surface, "image.png");
cairo_destroy(cr);
cairo_surface_destroy(surface);
return 0;
}
This example is a small console application, that will create a PNG image.
#include <cairo.h>
In this header file, we will find declarations of our functions and constants.
cairo_surface_t *surface;
cairo_t *cr;
Here we declare a surface and a Cairo context.
surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 390, 60);
cr = cairo_create(surface);
We create a surface and a Cairo context. The surface is an 390x60 px image.
cairo_set_source_rgb(cr, 0, 0, 0);
We will draw in black ink.
cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL,
CAIRO_FONT_WEIGHT_NORMAL);
cairo_set_font_size(cr, 40.0);
We choose a font type and set it's size.
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Disziplin ist Macht.");
We move to a (10.0, 50.0) position within the image and draw the text.
cairo_surface_write_to_png(surface, "image.png");
This function call creates the PNG image.
cairo_destroy(cr);
cairo_surface_destroy(surface);
In the end, we clean the resources.
PNG image
PDF file
In the second example, we will use the Cairo library to create a simple PDF file.
#include <cairo/cairo.h>
#include <cairo/cairo-pdf.h>
int main() {
cairo_surface_t *surface;
cairo_t *cr;
surface = cairo_pdf_surface_create("pdffile.pdf", 504, 648);
cr = cairo_create(surface);
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, 40.0);
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Disziplin ist Macht.");
cairo_show_page(cr);
cairo_surface_destroy(surface);
cairo_destroy(cr);
return 0;
}
We must open the pdf file in a pdf viewer. Linux users can use KPDF or Evince viewers.
surface = cairo_pdf_surface_create("pdffile.pdf", 504, 648);
To render a pdf file, we must create a pdf surface using the
cairo_pdf_surface_create()
funcion call.The size of the pdf file is specified in points, which is a standard in typesetting.
cairo_show_page(cr);
The cairo_show_page() finishes rendering of the pdf file.
PDF file in Evince
SVG file
The next example creates a simple SVG (Scalable Vector Graphics) file. The SVG is one of the hottest technologies these days.
#include <cairo.h>
#include <cairo-svg.h>
int main() {
cairo_surface_t *surface;
cairo_t *cr;
surface = cairo_svg_surface_create("svgfile.svg", 390, 60);
cr = cairo_create(surface);
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, 40.0);
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Disziplin ist Macht.");
cairo_surface_destroy(surface);
cairo_destroy(cr);
return 0;
}
We can use Firefox, Opera or Inkscape programs to open the svgfile.svg file.
surface = cairo_svg_surface_create("svgfile.svg", 390, 60);
To create a SVG file in Cairo, we must create a svg surface using the
cairo_svg_surface_create()
function call.
The Rest of the code is identical to the previous examples.
SVG file in Opera
GTK Window
In the last example, we will draw on the GTK window. This backend will be used throughout the rest of the tutorial
#include <cairo.h>
#include <gtk/gtk.h>
static gboolean
on_expose_event(GtkWidget *widget,
GdkEventExpose *event,
gpointer data)
{
cairo_t *cr;
cr = gdk_cairo_create(widget->window);
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, 40.0);
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Disziplin ist Macht.");
cairo_destroy(cr);
return FALSE;
}
int
main (int argc, char *argv[])
{
GtkWidget *window;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
g_signal_connect(window, "expose-event",
G_CALLBACK (on_expose_event), NULL);
g_signal_connect(window, "destroy",
G_CALLBACK (gtk_main_quit), NULL);
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
gtk_window_set_default_size(GTK_WINDOW(window), 400, 90);
gtk_widget_set_app_paintable(window, TRUE);
gtk_widget_show_all(window);
gtk_main();
return 0;
}
The example pops up a centered GTK+ window, on which we draw the "Disziplin ist Macht" text.
#include <cairo.h>
#include <gtk/gtk.h>
We include the necessary Cairo and GTK headers.
g_signal_connect(window, "expose-event",
G_CALLBACK(on_expose_event), NULL);
When the window is redrawn, an
expose-event
signal is emitted. We connect that signal to the
on_expose_event()
callback.
y gtk, part of a toolkits responsiveness is to redraw exposed regions whichfor normal windows will just 'clear' the background. if you want to drawyou own things in such a window, you need to inform gtk about that with thegtk_widget_set_app_paintable () function.
gtk_widget_set_app_paintable(window, TRUE)
If we want to draw in GTK+, we can draw on a GtkDrawingArea widget or on a simple GtkWindow widget. I chose to draw on the latter. In order to draw on the GtkWindow widget, we must inform the GTK+ by calling the
gtk_widget_set_app_paintable()
call. The function call will suppress the default themed drawing of the widget's background. In case of the GtkDrawingArea, we do not need to call the function.
cairo_t *cr;
cr = gdk_cairo_create(widget->window);
The drawing is done inside the
on_expose_event()
callback function. We create a Cairo context for the GTK+ system and draw our text as usual on that context.
GTK window
In this chapter we have covered supported Cairo backends.