3. Cairo backends

The Cairo library supports various backends. In this section of the Cairo graphics tutorial, we will use Cairo to create a PNG images, PDF file, SVG file and we will draw on a GTK window.

PNG image

createPNG.c

#include <cairo.h>

int main(int argc, char *argv[]){
  /* We create a surface and a Cairo context */
  cairo_surface_t *surface;
  cairo_t *cr;
  
  /* The surface is an 600x480 px image */
  surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 600, 480);
  
  cr = cairo_create(surface);

  /* We will draw in black ink */
  cairo_set_source_rgb(cr, 0, 0, 0); /* 黒色 */

  /* We choose a font type and set it's size */
  cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_NORMAL);
  cairo_set_font_size(cr, 40.0); /* フォントサイズ */

  /* We move to (150.0, 120.0) position within the image and draw the text */
  cairo_move_to(cr, 150.0, 120.0);
  cairo_show_text(cr, "Hello Cairo World.");

  /* We will draw in red ink */
  cairo_set_source_rgb(cr, 255, 0, 0); /* 赤色 */
  
  cairo_move_to(cr, 300.0, 240.0);
  cairo_show_text(cr, "Hello Aki.");

  /* This function call creates the PNG image */
  cairo_surface_write_to_png(surface, "img1.png");
  cairo_surface_write_to_png(surface, "img2.png"); /* 複数出力できる */

  /* clean the resources */
  cairo_destroy(cr);
  cairo_surface_destroy(surface);

  return 0;
}

createPNG.c の実行結果は:

[wtopia c.cairo]$ ls createPNG* createPNG.c createPNG.c~ img1.png img2.png

PDF file

In the second example, we will use the Cairo library to create a simple PDF file.

createPDF.c

#include <cairo/cairo.h>
#include <cairo/cairo-pdf.h>

int main(int argc, char *argv[]){

  cairo_surface_t *surface;
  cairo_t *cr;

  /* To render a pdf file, we must create a pdf surface using the cairo_pdf_surface_create() function call */
  
  surface = cairo_pdf_surface_create("testfile1.pdf", 600, 480);
  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, 200.0, 200.0);
  cairo_show_text(cr, "Hello Cairo PDF.");

  cairo_set_source_rgb(cr, 0, 255, 0); /* 緑 */
  cairo_move_to(cr, 200.0, 300.0);
  cairo_show_text(cr, "Error, Error.");

  /* the cairo_show_page() finishes rendering of the pdf file */
  cairo_show_page(cr);

  cairo_surface_destroy(surface);
  cairo_destroy(cr);

  return 0;
}

createPDF.c の実行結果は:

[wtopia c.cairo]$ ls *.pdf testfile1.pdf

SVG file

The next example creates a simple SVG (Scalable Vector Graphics) file.

createSVG.c

#include <cairo.h>
#include <cairo-svg.h>

int main(int argc, char *argv[]){
  cairo_surface_t *surface;
  cairo_t *cr;

  surface = cairo_svg_surface_create("svgfile1.svg", 600, 480);
  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, 20.0, 50.0);
  cairo_show_text(cr, "Hello SVG World.");

  cairo_surface_destroy(surface);
  cairo_destroy(cr);

  return 0;
}

createSVG.c の実行結果は:

[wtopia c.cairo]$ ls *.svg svgfile1.svg

GTK Window

In the last example, we will draw on the GTK window.

gtk_window1.c

#include <cairo.h>
#include <gtk/gtk.h> /*include the necessary Cairo and GTK headers */

static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data);

int main(int argc, char *argv[]){
  GtkWidget *window;
  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

  /*
    when the window is redrawn an expose-event signal is emitted. We connect
    that signal to the on_expose_event() callback     
  */
  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), 600, 480);
  gtk_widget_set_app_paintable(window, TRUE);

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

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, "Display Cairo in GTK");

  cairo_destroy(cr);

  return FALSE;
}

gtk_window1.c の実行結果は: