Cairo 图形指南5形状与填充.docx

1、Cairo 图形指南5 形状与填充Cairo 图形指南 (5) 形状与填充这一部分，讲述一些基本的以及较为高级的形状绘制及其纯色 (solid color)、图案 (pattern) 与渐变 (gradient) 填充方法。基本形状Cairo 提供了几个用于绘制基本形状的函数。#include #include #include static gbooleanon_expose_event (GtkWidget * widget, GdkEventExpose * event, gpointer data) cairo_t *cr; cr = gdk_cairo_create (widget-

2、window); cairo_set_source_rgb (cr, 0, 0, 0); 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_set_source_rgb (cr, 1, 1, 1); cairo_fill (cr); cairo_set_source_rgb (cr, 0, 0, 0); cairo_arc (cr, 330, 60, 40, 0,

3、 2 * M_PI); cairo_stroke_preserve (cr); cairo_set_source_rgb (cr, 1, 1, 1); cairo_fill (cr); cairo_set_source_rgb (cr, 0, 0, 0); cairo_arc (cr, 90, 160, 40, M_PI / 4, M_PI); cairo_close_path (cr); cairo_stroke_preserve (cr); cairo_set_source_rgb (cr, 1, 1, 1); cairo_fill (cr); cairo_set_source_rgb (

4、cr, 0, 0, 0); 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_set_source_rgb (cr, 1, 1, 1); cairo_fill (cr); cairo_destroy (cr); return FALSE;intmain (int argc, char *argv) GtkWidget *window; GtkWidget *darea; gtk_ini

5、t (&argc, &argv); window = gtk_window_new (GTK_WINDOW_TOPLEVEL); darea = gtk_drawing_area_new (); gtk_container_add (GTK_CONTAINER (window), darea); g_signal_connect (darea, expose-event, G_CALLBACK (on_expose_event), NULL); g_signal_connect (window, destroy, G_CALLBACK (gtk_main_quit), NULL); gtk_w

6、indow_set_position (GTK_WINDOW (window), GTK_WIN_POS_CENTER); gtk_window_set_default_size (GTK_WINDOW (window), 390, 240); gtk_widget_show_all (window); gtk_main (); return 0;这个示例，绘制了矩形、正方形、圆、圆弧和椭圆。下面对关键代码简单分析： cairo_rectangle (cr, 20, 20, 120, 80); cairo_rectangle (cr, 180, 20, 80, 80);绘制矩形与正方形。正方形

7、在 cairo 中是矩形的一种特例。 cairo_arc (cr, 330, 60, 40, 0, 2 * M_PI);画了一个圆，圆心为 (330, 60)px，半径为 40px。Cairo 所谓的圆，其实是起始角为 0 度，终止角为 360 度的弧线。 cairo_scale (cr, 1, 0.7); cairo_arc (cr, 0, 0, 50, 0, 2 * M_PI);画椭圆的方法也与画圆类似，只是需要先设定长轴与短轴的比例，在本例中为 1:0.7。复杂的图形复杂的图形是由简单的图形拼凑出来的，譬如下面这个绘制圆角矩形的程序。#include #include #include

8、static voiddraw_round_rectangle (cairo_t * cr, double x, double y, double width, double height, double r) cairo_move_to (cr, x + r, y); cairo_line_to (cr, x + width - r, y); cairo_move_to (cr, x + width, y + r); cairo_line_to (cr, x + width, y + height - r); cairo_move_to (cr, x + width - r, y + hei

9、ght); cairo_line_to (cr, x + r, y + height); cairo_move_to (cr, x, y + height - r); cairo_line_to (cr, x, y + r); cairo_arc (cr, x + r, y + r, r, M_PI, 3 * M_PI / 2.0); cairo_arc (cr, x + width - r, y + r, r, 3 * M_PI / 2, 2 * M_PI); cairo_arc (cr, x + width - r, y + height - r, r, 0, M_PI / 2); cai

10、ro_arc (cr, x + r, y + height - r, r, M_PI / 2, M_PI);static gbooleanon_expose_event (GtkWidget * widget, GdkEventExpose * event, gpointer data) cairo_t *cr; int width, height; double w, h, x, y, r; gtk_window_get_size (GTK_WINDOW (widget), &width, &height); x = width / 5.0; y = height / 5.0; w = 3

11、* width / 5.0; h = 3 * height / 5.0; r = h / 4.0; cr = gdk_cairo_create (widget-window); cairo_set_source_rgb (cr, 0.8, 0.4, 0); cairo_set_line_width (cr, 6); draw_round_rectangle (cr, x, y, w, h, r); cairo_stroke_preserve (cr); cairo_set_source_rgb (cr, 0.8, 0.8, 0.2); cairo_fill (cr); cairo_destro

12、y (cr); g_print (testn); return FALSE;static gbooleanon_configure_event (GtkWidget * widget, GdkEventConfigure * event, gpointer data) gdk_window_invalidate_rect (widget-window, &widget-allocation, FALSE); return FALSE;intmain (int argc, char *argv) GtkWidget *window; GtkWidget *darea; gtk_init (&ar

13、gc, &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); g_signal_connect(G_OBJECT(window), configure-event, G_CALLBACK(on_configure_event), NULL); gtk

14、_window_set_position (GTK_WINDOW (window), GTK_WIN_POS_CENTER); gtk_window_set_default_size (GTK_WINDOW (window), 400, 300); gtk_widget_set_app_paintable (window, TRUE); gtk_widget_show_all (window); gtk_main (); return 0;注：因为 The cairo graphics tutorial 在这一部分所提供的示例程序不具代表性，因此写了这个程序。该示例程序绘制了一个可跟随窗口尺寸

15、进行缩放变化的圆角矩形。自定义的 draw_round_rectangle () 函数利用 Cairo 提供的基本图元函数，利用直线段与圆弧拼凑出圆角矩形。on_configure_event () 函数用于响应窗口尺寸变化事件，在其中调用 gdk_window_invalidate_rect () 函数让窗口绘图区域失效，并产生窗口重绘制事件（即 expose 事件）。填充 (Fill)虽然上一篇已经讲述了一些有关填充的知识，但这里所讲述的内容是与形状相关的。填充可分为三种类型：纯色、图案、渐变。纯色 (Solid color)对象的颜色是采用红 (R)、绿 (G)、蓝 (B) 三原色描述的

16、，Cairo 的 RGB 取值是从 0 到 1 的双精浮点数。#include #include static gbooleanon_expose_event (GtkWidget * widget, GdkEventExpose * event, gpointer data) cairo_t *cr; cr = gdk_cairo_create (widget-window); int width, height; gtk_window_get_size (GTK_WINDOW (widget), &width, &height); cairo_set_source_rgb (cr, 0.5

17、, 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)

18、; cairo_rectangle (cr, 150, 140, 100, 100); cairo_fill (cr); cairo_destroy (cr); return FALSE;intmain (int argc, char *argv) GtkWidget *window; gtk_init (&argc, &argv); window = gtk_window_new (GTK_WINDOW_TOPLEVEL); g_signal_connect (G_OBJECT (window), expose-event, G_CALLBACK (on_expose_event), NUL

19、L); g_signal_connect (G_OBJECT (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), 270, 260); gtk_window_set_title (GTK_WINDOW (window), colors); gtk_widget_set_app_paintable (windo

20、w, TRUE); gtk_widget_show_all (window); gtk_main (); return 0;该示例绘制了 4 个正方形，分别采用四种不同颜色进行填充。这个例子，由于很简单，就不再像原作者那样自作多情的分析了。图案 (Pattern)所谓图案填充，就是将图片填充到形状内部。#include #include #include cairo_surface_t *surface1;cairo_surface_t *surface2;cairo_surface_t *surface3;cairo_surface_t *surface4;static voidcreate

21、_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 voiddestroy_surfaces () g_print (de

22、stroying surfaces); cairo_surface_destroy (surface1); cairo_surface_destroy (surface2); cairo_surface_destroy (surface3); cairo_surface_destroy (surface4);static gbooleanon_expose_event (GtkWidget * widget, GdkEventExpose * event, gpointer data) cairo_t *cr; cairo_pattern_t *pattern1; cairo_pattern_

23、t *pattern2; cairo_pattern_t *pattern3; cairo_pattern_t *pattern4; cr = gdk_cairo_create (widget-window); int width, height; gtk_window_get_size (GTK_WINDOW (widget), &width, &height); pattern1 = cairo_pattern_create_for_surface (surface1); pattern2 = cairo_pattern_create_for_surface (surface2); pat

24、tern3 = 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_arc (cr, 200, 70, 50, 0, 2 * M_PI); cairo_fill (cr); cairo_set_source (cr, pattern3); cairo_pattern_set_extend (cairo_get_source (cr), CAIRO_EXTEND_REPEAT); cairo_rectangle (cr