|
|
| (1 промежуточная версия не показана) |
| Строка 1: |
Строка 1: |
| - | 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]]
| |
