【RK3588嵌入式图形编程】-Cairo-Cairo图形库支持后端

Cairo图形库支持后端

Cairo库支持多种后端。在本文中，我们使用Cairo创建PNG图像、PDF文件、SVG文件，并在GTK窗口上绘制。

1、PNG图像后端

在第一个示例中，我们创建一个 PNG 图像。

#include <cairo.h>int main(void)
{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, "Hello World");cairo_surface_write_to_png(surface, "image.png");cairo_destroy(cr);cairo_surface_destroy(surface);return 0;
}

此示例是一个小型控制台应用程序，它将创建 PNG 图像。

#include <cairo.h>

在这个头文件中，我们找到了函数和常量的声明。

cairo_surface_t *surface;
cairo_t *cr;

在这里，我们声明一个 Surface 和一个 Cairo 上下文。

surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 390, 60);
cr = cairo_create(surface);

我们创建了一个Surface和一个Cairo上下文。这个Surface是一个390x60像素的图像。

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, "Hello World");

我们移动到图像中的 （10.0， 50.0） 位置并绘制文本。

cairo_surface_write_to_png(surface, "image.png");

此函数调用创建 PNG 图像。

cairo_destroy(cr);
cairo_surface_destroy(surface);

最后，清理资源。

2、PDF文件后端

在第二个示例中，我们使用 Cairo 库创建一个简单的 PDF 文件。

#include <cairo.h>
#include <cairo-pdf.h>int main(void) 
{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;
}

我们必须在 PDF 查看器中打开 PDF 文件。Linux 用户可以使用 KPDF 或 Evince 查看器。

surface = cairo_pdf_surface_create("pdffile.pdf", 504, 648);

要渲染 PDF 文件，我们必须使用 cairo_pdf_surface_create 函数调用创建 PDF 表面。PDF 文件的大小以磅为单位指定，这是排版中的标准。

cairo_show_page(cr);

3、SVG文件后端

接下来的示例将创建一个简单的 SVG （Scalable Vector Graphics） 文件。SVG 是当今最热门的技术之一。

#include <cairo.h>
#include <cairo-svg.h> int main(void) 
{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, "Hello World.");cairo_surface_destroy(surface);cairo_destroy(cr);return 0;
}

我们可以使用 Firefox、Opera 或 Inkscape 程序打开 svgfile.svg 文件。

surface = cairo_svg_surface_create("svgfile.svg", 390, 60);

要在 Cairo 中创建 SVG 文件，我们必须使用 cairo_svg_surface_create 函数调用创建一个 svg Surface。

cr = cairo_create(surface);

Cairo 上下文是从 SVG 图面创建的。

4、GTK窗口支持

在最后一个示例中，我们在 GTK 窗口上绘制。此后端将在本系列文章的其余部分使用。

#include <cairo.h>
#include <gtk/gtk.h>static void do_drawing(cairo_t *);static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data)
{      do_drawing(cr);return FALSE;
}static void do_drawing(cairo_t *cr)
{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, "Hello,Cairo+GTK");    
}int main(int argc, char *argv[])
{GtkWidget *window;GtkWidget *darea;gtk_init(&argc, &argv);window = gtk_window_new(GTK_WINDOW_TOPLEVEL);darea = gtk_drawing_area_new();gtk_container_add(GTK_CONTAINER(window), darea);g_signal_connect(G_OBJECT(darea), "draw", G_CALLBACK(on_draw_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_window_set_title(GTK_WINDOW(window), "GTK window");gtk_widget_show_all(window);gtk_main();return 0;
}

该示例弹出一个居中的GTK窗口，我们在该窗口上绘制“Hello,Cairo+GTK”文本。

#include <cairo.h>
#include <gtk/gtk.h>

我们包括必要的 Cairo 和 GTK 头文件。

static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data)
{      do_drawing(cr);return FALSE;
}

我们将实际的绘图委托给 do_drawing 函数。发送的参数是 Cairo 上下文。

static void do_drawing(cairo_t *cr)
{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, "Hello,Cairo+GTK");    
}

Cairo 函数执行绘图。

darea = gtk_drawing_area_new();
gtk_container_add(GTK_CONTAINER(window), darea);

我们创建一个 GtkDrawingArea 小部件并将其添加到容器窗口。它用于自定义绘图。

g_signal_connect(G_OBJECT(darea), "draw", G_CALLBACK(on_draw_event), NULL); 

当 GtkDrawingArea 小部件需要重绘时，它会发出绘制信号。我们将该信号连接到 on_draw_event 回调。

CMake文件内容如下：

cmake_minimum_required(VERSION 3.20)
set(PROJECT "orangepi_cairo")
project(${PROJECT})set(CMAKE_C_STANDARD 17) # C17 # lvgl officially support C17 and above
set(CMAKE_CXX_STANDARD 20) # C20
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_FLAGS "-fPIC")
set(CMAKE_C_FLAGS "-fPIC")file(GLOB_RECURSE SOURCES ./src/**.c ./src/**.cpp)add_executable(${PROJECT} ${SOURCES})include_directories(/usr/include/gtk-3.0/usr/include/glib-2.0/usr/lib/aarch64-linux-gnu/glib-2.0/include/usr/include/pango-1.0/usr/include/harfbuzz/usr/include/cairo/usr/include/gdk-pixbuf-2.0/usr/include//atk-1.0)target_link_libraries(${PROJECT}mdlcairogtk-3gtk-x11-2.0glib-2.0gobject-2.0harfbuzz
)set_target_properties(${PROJECT}PROPERTIES OUTPUT_NAME ${PROJECT}ARCHIVE_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib"LIBRARY_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/bin"RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/bin"
)add_custom_target(run COMMAND ${CMAKE_BINARY_DIR}/bin/${PROJECT} DEPENDS ${PROJECT})