Редактирование: Cairo FAQ 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.

<source lang="cpp">
#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;
}
</source>

This example is a small console application, that will create a PNG image.

<source lang="cpp">
 #include <cairo.h>

</source>

In this header file, we will find declarations of our functions and constants.

<source lang="cpp">
 cairo_surface_t *surface;
 cairo_t *cr;
</source>

Here we declare a surface and a Cairo context.

<source lang="cpp">
 surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 390, 60);
 cr = cairo_create(surface);

</source>

We create a surface and a Cairo context. The surface is an 390x60 px image.

<source lang="cpp">
 cairo_set_source_rgb(cr, 0, 0, 0);
</source>

We will draw in black ink.

<source lang="cpp">

 cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL,
      CAIRO_FONT_WEIGHT_NORMAL);
 cairo_set_font_size(cr, 40.0);
</source>

We choose a font type and set it's size.

<source lang="cpp">
 cairo_move_to(cr, 10.0, 50.0);
 cairo_show_text(cr, "Disziplin ist Macht.");
</source>

We move to a (10.0, 50.0) position within the image and draw the text. 

<source lang="cpp">
 cairo_surface_write_to_png(surface, "image.png");
</source>

This function call creates the PNG image.

<source lang="cpp">
 cairo_destroy(cr);
 cairo_surface_destroy(surface);
</source>

In the end, we clean the resources.

[[image: cairo_faq_image.png | center]]

== PDF file ==

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

<source lang="cpp">
#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;
}
</source>

We must open the pdf file in a pdf viewer. Linux users can use KPDF or Evince viewers.

<source lang="cpp">
 surface = cairo_pdf_surface_create("pdffile.pdf", 504, 648);
</source>

To render a pdf file, we must create a pdf surface using the <b>cairo_pdf_surface_create()</b> funcion call.
The size of the pdf file is specified in points, which is a standard in typesetting. 

<source lang="cpp">
 cairo_show_page(cr);
</source>

The <b>cairo_show_page()</b> finishes rendering of the pdf file.

[[image: cairo_faq_pdffile.png | center]]

== SVG file ==

The next example creates a simple SVG (Scalable Vector Graphics) file. The SVG is one of the hottest  technologies these days.

<source lang="cpp">
#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;
}
</source>

We can use Firefox, Opera or Inkscape programs to open the svgfile.svg file. 

<source lang="cpp">
 surface = cairo_svg_surface_create("svgfile.svg", 390, 60);
</source>

To create a SVG file in Cairo, we must create a svg surface using the <b>cairo_svg_surface_create()</b> function call.

The Rest of the code is identical to the previous examples.

[[image: cairo_faq_svgfile.png | center]]

== GTK Window ==

In the last example, we will draw on the GTK window. This backend will be used  throughout the rest of the tutorial

<source lang="cpp">
#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;
}
</source>

The example pops up a centered GTK+ window, on which we draw the "Disziplin ist Macht" text.

<source lang="cpp">
#include <cairo.h>
#include <gtk/gtk.h>
</source>

We include the necessary Cairo and GTK headers.

<source lang="cpp">
 g_signal_connect(window, "expose-event",
     G_CALLBACK(on_expose_event), NULL);

</source>

When the window is redrawn, an <b>expose-event</b> signal is emitted. We connect that signal to the <b>on_expose_event()</b> callback.

y gtk, part of a toolkits responsiveness is to redraw exposed regions which for normal windows will just 'clear' the background. if you want to draw you own things in such a window, you need to inform gtk about that with the gtk_widget_set_app_paintable () function.

<source lang="cpp">
 gtk_widget_set_app_paintable(window, TRUE)
</source>

If we want to draw in GTK+, we can draw on a <b>GtkDrawingArea</b> widget or on a simple <b>GtkWindow</b> widget. I chose to draw on the latter. In order to draw on the <b>GtkWindow</b> widget, we must inform the GTK+ by calling the <b>gtk_widget_set_app_paintable()</b> call. The function call wil suppress the default themed drawing of the widget's background. In case of the <b>GtkDrawingArea</b>, we do not need to call the function.

<source lang="cpp">
 cairo_t *cr;

 cr = gdk_cairo_create(widget->window);
</source>

The drawing is done inside the <b>on_expose_event()</b> callback function. We create a Cairo context for the GTK+ system and draw our text as usual on that context.

[[image: cairo_faq_gtkwindow.png | center]]


[[Категория:GTK+]]
[[Категория:Cairo]]