The Cairo graphics tutorial -------Cairo backends

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 theon_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.