形狀和填充 · ZetCode 中文系列教程

# 形狀和填充 > 原文： [https://zetcode.com/gfx/cairo/shapesfills/](https://zetcode.com/gfx/cairo/shapesfills/) 在 Cairo 教程的這一部分中，我們將創建一些基本的和更高級的形狀。我們將用純色，圖案和漸變填充它們。漸變將在單獨的章節中介紹。 ## 基本形狀 Cairo API 具有一些用于創建簡單形狀的基本函數。 ```c static void do_drawing(cairo_t *cr) { cairo_set_source_rgb(cr, 0.6, 0.6, 0.6); cairo_set_line_width(cr, 1); cairo_rectangle(cr, 20, 20, 120, 80); cairo_rectangle(cr, 180, 20, 80, 80); cairo_stroke_preserve(cr); cairo_fill(cr); cairo_arc(cr, 330, 60, 40, 0, 2*M_PI); cairo_stroke_preserve(cr); cairo_fill(cr); cairo_arc(cr, 90, 160, 40, M_PI/4, M_PI); cairo_close_path(cr); cairo_stroke_preserve(cr); cairo_fill(cr); cairo_translate(cr, 220, 180); cairo_scale(cr, 1, 0.7); cairo_arc(cr, 0, 0, 50, 0, 2*M_PI); cairo_stroke_preserve(cr); cairo_fill(cr); } ``` 在此示例中，我們將創建一個矩形，正方形，圓形，弧形和橢圓形。 ```c cairo_rectangle(cr, 20, 20, 120, 80); cairo_rectangle(cr, 180, 20, 80, 80); ``` `cairo_rectangle()`用于創建正方形和矩形。正方形只是矩形的一種特定類型。 ```c cairo_arc(cr, 330, 60, 40, 0, 2*M_PI); ``` 這條線創建一個圓。 ```c cairo_scale(cr, 1, 0.7); cairo_arc(cr, 0, 0, 50, 0, 2*M_PI); ``` 我們使用`cairo_scale()`函數調用來創建一個橢圓。 ![Basic shapes](https://img.kancloud.cn/8c/df/8cdf7a25bfd81741c39e440e5c49a2d3_392x266.jpg) 圖：基本形狀可以使用基本圖元的組合來創建其他形狀。 ```c #include <cairo.h> #include <gtk/gtk.h> static void do_drawing(cairo_t *); int points[11][2] = { { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, { 40, 190 }, { 50, 125 }, { 0, 85 } }; 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.6, 0.6, 0.6); cairo_set_line_width(cr, 1); gint i; for (i = 0; i < 10; i++) { cairo_line_to(cr, points[i][0], points[i][1]); } cairo_close_path(cr); cairo_stroke_preserve(cr); cairo_fill(cr); cairo_move_to(cr, 240, 40); cairo_line_to(cr, 240, 160); cairo_line_to(cr, 350, 160); cairo_close_path(cr); cairo_stroke_preserve(cr); cairo_fill(cr); cairo_move_to(cr, 380, 40); cairo_line_to(cr, 380, 160); cairo_line_to(cr, 450, 160); cairo_curve_to(cr, 440, 155, 380, 145, 380, 40); cairo_stroke_preserve(cr); cairo_fill(cr); } 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), 460, 240); gtk_window_set_title(GTK_WINDOW(window), "Other shapes"); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在此示例中，我們將星形對象創建為三角形和修改后的三角形。這些對象是使用直線和一條曲線創建的。 ```c gint i; for (i = 0; i < 10; i++ ) { cairo_line_to(cr, points[i][0], points[i][1]); } cairo_close_path(cr); ``` 通過連接點數組中的所有點來繪制星形。通過調用`cairo_close_path()`函數將星星結束，該函數將星星的最后兩個點連接在一起。 ```c cairo_move_to(cr, 380, 40); cairo_line_to(cr, 380, 160); cairo_line_to(cr, 450, 160); cairo_curve_to(cr, 440, 155, 380, 145, 380, 40); ``` 修改后的三角形是兩條直線和一條曲線的簡單組合。 ![Other shapes](https://img.kancloud.cn/3a/b5/3ab50f6bc297bc807c069c9a735e37fe_462x266.jpg) 圖：其它形狀 ## 填充填充填充形狀的內部。填充可以是純色，圖案或漸變。 ### 純色顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。 Cairo 有效 RGB 值在 0 到 1 的范圍內。 ```c static void do_drawing(cairo_t *cr) { cairo_set_source_rgb(cr, 0.5, 0.5, 1); cairo_rectangle(cr, 20, 20, 100, 100); cairo_fill(cr); cairo_set_source_rgb(cr, 0.6, 0.6, 0.6); cairo_rectangle(cr, 150, 20, 100, 100); cairo_fill(cr); cairo_set_source_rgb(cr, 0, 0.3, 0); cairo_rectangle(cr, 20, 140, 100, 100); cairo_fill(cr); cairo_set_source_rgb(cr, 1, 0, 0.5); cairo_rectangle(cr, 150, 140, 100, 100); cairo_fill(cr); } ``` 在示例中，我們繪制了四個彩色矩形。 ```c cairo_set_source_rgb(cr, 0.5, 0.5, 1); cairo_rectangle(cr, 20, 20, 100, 100); cairo_fill(cr); ``` `cairo_set_source_rgb()`函數調用將源設置為不透明的顏色。參數是紅色，綠色和藍色強度值。通過調用`cairo_fill()`函數，源可用于填充矩形的內部。 ![Solid colours](https://img.kancloud.cn/47/e5/47e59aa832648534f28cd7dba96de3f7_272x286.jpg) 圖：純色 ### 圖案圖案是可以填充形狀的復雜圖形對象。 ```c #include <cairo.h> #include <gtk/gtk.h> static void do_drawing(cairo_t *); cairo_surface_t *surface1; cairo_surface_t *surface2; cairo_surface_t *surface3; cairo_surface_t *surface4; static void create_surfaces() { surface1 = cairo_image_surface_create_from_png("blueweb.png"); surface2 = cairo_image_surface_create_from_png("maple.png"); surface3 = cairo_image_surface_create_from_png("crack.png"); surface4 = cairo_image_surface_create_from_png("chocolate.png"); } static void destroy_surfaces() { cairo_surface_destroy(surface1); cairo_surface_destroy(surface2); cairo_surface_destroy(surface3); cairo_surface_destroy(surface4); } 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_pattern_t *pattern1; cairo_pattern_t *pattern2; cairo_pattern_t *pattern3; cairo_pattern_t *pattern4; pattern1 = cairo_pattern_create_for_surface(surface1); pattern2 = cairo_pattern_create_for_surface(surface2); pattern3 = cairo_pattern_create_for_surface(surface3); pattern4 = cairo_pattern_create_for_surface(surface4); cairo_set_source(cr, pattern1); cairo_pattern_set_extend(cairo_get_source(cr), CAIRO_EXTEND_REPEAT); cairo_rectangle(cr, 20, 20, 100, 100); cairo_fill(cr); cairo_set_source(cr, pattern2); cairo_pattern_set_extend(cairo_get_source(cr), CAIRO_EXTEND_REPEAT); cairo_rectangle(cr, 150, 20, 100, 100); cairo_fill(cr); cairo_set_source(cr, pattern3); cairo_pattern_set_extend(cairo_get_source(cr), CAIRO_EXTEND_REPEAT); cairo_rectangle(cr, 20, 140, 100, 100); cairo_fill(cr); cairo_set_source(cr, pattern4); cairo_pattern_set_extend(cairo_get_source(cr), CAIRO_EXTEND_REPEAT); cairo_rectangle(cr, 150, 140, 100, 100); cairo_fill(cr); cairo_pattern_destroy(pattern1); cairo_pattern_destroy(pattern2); cairo_pattern_destroy(pattern3); cairo_pattern_destroy(pattern4); } 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(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); create_surfaces(); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_window_set_default_size(GTK_WINDOW(window), 270, 260); gtk_window_set_title(GTK_WINDOW(window), "Patterns"); gtk_widget_show_all(window); gtk_main(); destroy_surfaces(); return 0; } ``` 在此示例中，我們再次繪制了四個矩形。這次，我們用一些模式填充它們。我們使用來自 Gimp 圖像處理器的四個圖案圖像。我們必須保留這些模式的原始大小，因為我們將對它們進行平鋪。我們在`on_draw_event()`函數之外創建圖像表面。每次需要重新繪制窗口時，每次從硬盤讀取數據都不是很有效。 ```c pattern1 = cairo_pattern_create_for_surface(surface1); ``` 我們通過調用`cairo_pattern_create_for_surface()`函數從表面創建圖案。 ```c cairo_set_source(cr, pattern1); cairo_pattern_set_extend(cairo_get_source(cr), CAIRO_EXTEND_REPEAT); cairo_rectangle(cr, 20, 20, 100, 100); cairo_fill(cr); ``` 在這里，我們繪制第一個矩形。 `cairo_set_source()`告訴 Cairo 上下文使用圖案作為繪圖源。圖像圖案可能不完全適合形狀。我們將模式設置為`CAIRO_EXTEND_REPEAT`，這將導致圖案通過重復平鋪。 `cairo_rectangle()`創建一個矩形路徑。最后，`cairo_fill()`用源填充路徑。本章介紹了 Cairo 的形狀和填充。