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

转载 2012年03月30日 08:15:46

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
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
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
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
GTK window

In this chapter we have covered supported Cairo backends.



相关文章推荐

The Cairo graphics tutorial -------Clipping and masking

In this part of the Cairo tutorial, we will talk about clipping and masking. Clipping ...

The Cairo graphics tutorial -------Transformations

In this part of the Cairo graphics programming tutorial, we will talk about transformations. ...

The Cairo graphics tutorial -------Transparency

In this part of the Cairo C API tutorial, we will talk about transparency. We will provide some basi...

The Cairo graphics tutorial -------Custom GTK widget

In this part of the Cairo graphics tutorial, we will create a custom GTK widget, where we will use t...

The Cairo graphics tutorial -------Shapes and fills in Cairo

In this part of the Cairo tutorial, we will create some basic and more advanced shapes. We will fill...

The Cairo graphics tutorial -------Basic drawing in Cairo

In this part of the Cairo graphics tutorial, we will draw some basic primitives. We will draw simple...

The Cairo graphics tutorial -------Text in Cairo

In this part of the Cairo graphics tutorial, we will work with text. Soulmate In the first...

The Cairo graphics tutorial -------Cairo definitions

Cairo definitions In this part of the Cairo graphics tutorial, we will provide some useful definiti...

gnustep-cairo-core-setup

  • 2012-09-09 00:15
  • 20.75MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)