Cairo教程整合

一Cairo 概念 ................................................................................................................................... 3 环境 (Context) ............................................................................................................................. 3 路径 (Path) ................................................................................................................................... 3 源 (Source) ................................................................................................................................... 3 外观 (Surface) .............................................................................................................................. 3 蒙板 (Mask) ................................................................................................................................. 4 图案 (Pattern) ............................................................................................................................... 4 二Cairo 后端 ................................................................................................................................... 4 1. PNG 图像 ................................................................................................................................. 4 2. PDF 文件 ................................................................................................................................. 5 3. SVG 文件 ................................................................................................................................. 6 4. GTK 窗口 ................................................................................................................................ 7 三 基本绘图 ..................................................................................................................................... 9 直线段 .......................................................................................................................................... 9 描绘 (Stroke) 与填充 (Fill) ..................................................................................................... 12 虚线 (Dash) ................................................................................................................................ 14 线帽 (Line caps) ........................................................................................................................ 17 线的交合 (Line joins) ................................................................................................................ 19 四 高级形状绘制 ........................................................................................................................... 21 基本形状..................................................................................................................................... 21 复杂的图形................................................................................................................................. 24 填充 (Fill) .................................................................................................................................. 27 纯色 (Solid color) .................................................................................................................. 27 图案 (Pattern) ......................................................................................................................... 28 渐变 (Gradient) ...................................................................................................................... 32 五 透明........................................................................................................................................... 35 透明的矩形................................................................................................................................. 35 淡出的效果................................................................................................................................. 37 “等待”的演示 ............................................................................................................................. 40 六 合成........................................................................................................................................... 43 七 裁剪与遮蔽 ............................................................................................................................... 46 裁剪 ............................................................................................................................................ 46 裁剪矩形..................................................................................................................................... 49 遮蔽 ............................................................................................................................................ 53 变换 ............................................................................................................................................ 55 平移......................................................................................................................................... 55 旋转......................................................................................................................................... 56 缩放......................................................................................................................................... 58 错切......................................................................................................................................... 60 椭圆......................................................................................................................................... 63 星星......................................................................................................................................... 65 七 文本........................................................................................................................................... 68 灵魂伙伴..................................................................................................................................... 68 一个字接一个字…… ................................................................................................................. 71 膨胀 ............................................................................................................................................ 73 八 图像........................................................................................................................................... 76 图像的显示................................................................................................................................. 77 垂帘效果（Blind Down） ......................................................................................................... 78 光谱效果..................................................................................................................................... 81 ### Cairo 教程整合知识点详解 #### 一、Cairo概念 **环境(Context)** - **定义**: 使用Cairo绘图时，首先需要创建一个Cairo环境(Context)。该环境保存了所有图形状态参数，例如线条宽度、颜色、要绘制的目标外观(Surface)等信息。 - **作用**: 提高接口的易用性，使绘图函数只需少量参数即可完成绘图任务。 - **示例代码**: 创建Cairo环境。 ```c cairo_t *cr; cr = gdk_cairo_create(widget->window); ``` - **细节**: `cairo_t` 结构体包含当前渲染设备的状态和图形坐标，是Cairo环境的核心数据结构。 **路径(Path)** - **定义**: 由一条或多条相连的直线段或曲线段构成的图形实体。路径可以是开放的(open)，即首尾端点不相连；也可以是闭合的(closed)，即首尾端点相连。 - **绘制过程**: 绘制路径需先定义路径，然后通过`cairo_stroke()`或`cairo_fill()`函数使其可见。 - **注意事项**: 每次调用`cairo_stroke()`或`cairo_fill()`函数后，路径都会被清空，需要重新定义新路径。 - **子路径**: 一条路径可以由多个子路径组成。 **源(Source)** - **定义**: 用于绘制或填充图形轮廓的颜色、图案或图像。 - **类型**: 包括纯色(color)、渐变(gradient)、图案(pattern)和图像(image)四种基本类型。 **外观(Surface)** - **定义**: 表面是图形的最终呈现形式，如PDF文档、PostScript文档、屏幕绘图等。 - **类型**: Cairo支持多种外观类型，包括但不限于图像(Image)、PDF、PostScript、Xlib、Win32等。 **蒙板(Mask)** - **定义**: 在源(Source)应用于目标表面(Surface)之前，对其应用的一种过滤方式。 - **功能**: 通过蒙板可以实现复杂的图形效果，比如透明度控制、图案叠加等。 #### 二、Cairo后端 **1. PNG图像** - **特点**: 支持真彩色和透明度，适用于网页图像、图标等。 - **创建**: 可以通过`cairo_image_surface_create()`函数创建PNG图像表面，再使用`cairo_create()`创建绘图上下文。 - **示例**: 创建一个PNG图像并保存。 ```c cairo_surface_t *surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, width, height); cairo_t *cr = cairo_create(surface); // 绘图操作... cairo_surface_write_to_png(surface, "output.png"); ``` **2. PDF文件** - **特点**: 支持矢量图形，适用于打印文档和高质量的出版物。 - **创建**: 使用`cairo_pdf_surface_create()`函数创建PDF表面。 - **示例**: 创建一个PDF文件并添加页面。 ```c cairo_surface_t *surface = cairo_pdf_surface_create("document.pdf", page_width, page_height); cairo_t *cr = cairo_create(surface); // 绘图操作... cairo_show_page(cr); ``` **3. SVG文件** - **特点**: 可缩放矢量图形格式，适用于Web和桌面应用。 - **创建**: 使用`cairo_svg_surface_create()`函数创建SVG表面。 - **示例**: 创建一个SVG文件。 ```c cairo_surface_t *surface = cairo_svg_surface_create("image.svg", width, height); cairo_t *cr = cairo_create(surface); // 绘图操作... cairo_surface_flush(surface); ``` **4. GTK窗口** - **特点**: 用于实时渲染图形到GTK窗口中。 - **创建**: 通过`gdk_cairo_create()`函数创建Cairo上下文。 - **示例**: 在GTK窗口中绘图。 ```c GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL); GtkWidget *drawing_area = gtk_drawing_area_new(); gtk_container_add(GTK_CONTAINER(window), drawing_area); gtk_widget_show_all(window); // 绘图操作... ``` #### 三、基本绘图 **直线段** - **定义**: 两个点之间的线性连接。 - **绘制**: 使用`cairo_move_to()`和`cairo_line_to()`函数定义线段起点和终点，然后调用`cairo_stroke()`绘制出来。 - **示例**: 绘制一条简单的直线。 ```c cairo_move_to(cr, x_start, y_start); cairo_line_to(cr, x_end, y_end); cairo_stroke(cr); ``` **描绘(Stroke)与填充(Fill)** - **描绘(Stroke)**: 用轮廓线勾勒图形边界。 - **填充(Fill)**: 为封闭区域内部上色。 - **区别**: 描边用于突出图形边界，而填充则用于填充整个图形区域。 - **示例**: 分别使用描边和填充。 ```c // 描边 cairo_set_source_rgb(cr, r, g, b); // 设置描边颜色 cairo_stroke(cr); // 填充 cairo_set_source_rgb(cr, r, g, b); // 设置填充颜色 cairo_fill(cr); ``` **虚线(Dash)** - **定义**: 由一系列短线条和空白间隔组成的线条样式。 - **设置**: 使用`cairo_set_dash()`函数设置虚线模式。 - **参数**: 指定虚线的长度序列和偏移量。 - **示例**: 设置并使用虚线。 ```c double dashes[] = {10.0, 5.0}; // 长度序列 cairo_set_dash(cr, dashes, 2, 0.0); // 设置虚线模式 cairo_stroke(cr); ``` **线帽(Line caps)** - **定义**: 线段两端的形状。 - **类型**: `CAIRO_LINE_CAP_BUTT`、`CAIRO_LINE_CAP_ROUND`、`CAIRO_LINE_CAP_SQUARE`。 - **设置**: 使用`cairo_set_line_cap()`函数设置线帽类型。 - **示例**: 设置不同的线帽。 ```c cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND); // 设置圆角线帽 cairo_stroke(cr); ``` **线的交合(Line joins)** - **定义**: 当两条线段相交时的连接点处理方式。 - **类型**: `CAIRO_LINE_JOIN_MITER`、`CAIRO_LINE_JOIN_ROUND`、`CAIRO_LINE_JOIN_BEVEL`。 - **设置**: 使用`cairo_set_line_join()`函数设置交合类型。 - **示例**: 设置不同的线交合方式。 ```c cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND); // 设置圆角交合 cairo_stroke(cr); ``` #### 四、高级形状绘制 **基本形状** - **圆形**: 使用`cairo_arc()`函数绘制。 - **矩形**: 使用`cairo_rectangle()`函数绘制。 - **多边形**: 使用`cairo_move_to()`和`cairo_line_to()`组合绘制。 - **示例**: 绘制一个矩形。 ```c cairo_rectangle(cr, x, y, width, height); cairo_fill(cr); ``` **复杂的图形** - **定义**: 由多个基本图形组合而成的复杂结构。 - **示例**: 组合圆形和矩形绘制一个简单的图标。 ```c // 绘制圆形 cairo_arc(cr, cx, cy, radius, 0, 2 * M_PI); cairo_fill(cr); // 绘制矩形 cairo_rectangle(cr, x, y, width, height); cairo_fill(cr); ``` **填充(Fill)** - **纯色(Solid color)**: 使用`cairo_set_source_rgba()`函数设置颜色。 - **图案(Pattern)**: 使用`cairo_pattern_t`类型创建图案。 - **渐变(Gradient)**: 支持线性渐变和径向渐变，分别使用`cairo_pattern_t`类型的`cairo_linear_gradient()`和`cairo_radial_gradient()`函数创建。 #### 五、透明 **透明的矩形** - **定义**: 在矩形内实现透明效果。 - **设置**: 使用`cairo_set_source_rgba()`函数设置透明度。 - **示例**: 绘制一个半透明的矩形。 ```c cairo_set_source_rgba(cr, r, g, b, alpha); // alpha值范围[0,1] cairo_rectangle(cr, x, y, width, height); cairo_fill(cr); ``` **淡出的效果** - **定义**: 实现从有到无的逐渐消失效果。 - **方法**: 通过不断调整透明度并在同一位置重复绘制来实现。 - **示例**: 实现淡出效果。 ```c for (double alpha = 1.0; alpha > 0.0; alpha -= 0.1) { cairo_set_source_rgba(cr, r, g, b, alpha); cairo_rectangle(cr, x, y, width, height); cairo_fill(cr); } ``` **“等待”的演示** - **定义**: 利用动画实现等待加载的效果。 - **方法**: 通过连续变化的透明度和旋转角度来实现动态效果。 - **示例**: 创建一个简单的等待动画。 ```c for (int i = 0; i < 360; i += 10) { cairo_save(cr); cairo_translate(cr, x_center, y_center); cairo_rotate(cr, M_PI * i / 180.0); cairo_set_source_rgba(cr, r, g, b, alpha); cairo_rectangle(cr, -radius, -radius, 2 * radius, 2 * radius); cairo_fill(cr); cairo_restore(cr); } ``` #### 六、合成 - **定义**: 将多个图形元素合成到一个画面中的过程。 - **示例**: 将两个矩形合成到同一个位置。 ```c cairo_set_source_rgba(cr, r1, g1, b1, alpha1); cairo_rectangle(cr, x1, y1, width1, height1); cairo_fill(cr); cairo_set_source_rgba(cr, r2, g2, b2, alpha2); cairo_rectangle(cr, x2, y2, width2, height2); cairo_fill(cr); ``` #### 七、裁剪与遮蔽 **裁剪** - **定义**: 限制绘图区域，超出部分不会被绘制。 - **示例**: 设置裁剪区域。 ```c cairo_rectangle(cr, x, y, width, height); cairo_clip(cr); ``` **裁剪矩形** - **定义**: 使用矩形作为裁剪区域。 - **示例**: 设置矩形裁剪。 ```c cairo_set_source_rgba(cr, r, g, b, alpha); cairo_rectangle(cr, x, y, width, height); cairo_clip(cr); ``` **遮蔽** - **定义**: 使用图形作为遮罩，只显示图形覆盖的部分。 - **示例**: 设置遮罩。 ```c cairo_save(cr); cairo_set_source_rgba(cr, r, g, b, alpha); cairo_rectangle(cr, x, y, width, height); cairo_fill(cr); cairo_mask(cr, pattern); cairo_restore(cr); ``` #### 变换 - **平移**: 使用`cairo_translate()`函数。 - **旋转**: 使用`cairo_rotate()`函数。 - **缩放**: 使用`cairo_scale()`函数。 - **错切**: 使用`cairo_shear()`函数。 **椭圆** - **定义**: 一种特殊的圆，具有两个不同轴的半径。 - **示例**: 绘制椭圆。 ```c cairo_move_to(cr, center_x, center_y - height / 2.0); cairo_arc(cr, center_x, center_y, width / 2.0, height / 2.0, 0, 2 * M_PI); cairo_close_path(cr); cairo_fill(cr); ``` **星星** - **定义**: 一种具有尖锐边缘的几何图形。 - **示例**: 绘制五角星。 ```c cairo_move_to(cr, center_x, center_y - radius); for (int i = 0; i < 5; i++) { cairo_line_to(cr, center_x + radius * cos(i * 2 * M_PI / 5), center_y + radius * sin(i * 2 * M_PI / 5)); cairo_line_to(cr, center_x + radius * cos((i + 1) * 2 * M_PI / 5), center_y + radius * sin((i + 1) * 2 * M_PI / 5)); } cairo_close_path(cr); cairo_fill(cr); ``` #### 七、文本 **灵魂伙伴** - **定义**: 在文本绘制过程中，某些字符会形成特殊的关系，被称为“灵魂伙伴”。 - **示例**: 绘制包含灵魂伙伴的文本。 ```c const char *text = "Fi"; cairo_text_extents_t extents; cairo_text_extents(cr, text, &extents); cairo_move_to(cr, x, y); cairo_show_text(cr, text); ``` **一个字接一个字** - **定义**: 控制每个字符的绘制位置。 - **示例**: 逐个字符绘制文本。 ```c const char *text = "Hello, world!"; for (int i = 0; i < strlen(text); i++) { cairo_text_extents_t extents; cairo_text_extents(cr, &text[i], &extents); cairo_move_to(cr, x + i * extents.width, y); cairo_show_text(cr, &text[i]); } ``` **膨胀** - **定义**: 对文本进行变形处理，使文本看起来更粗或更细。 - **示例**: 应用膨胀效果。 ```c cairo_matrix_t matrix; cairo_matrix_init_translate(&matrix, x, y); cairo_matrix_init_scale(&matrix, scale, scale); cairo_matrix_init_rotate(&matrix, angle); cairo_set_matrix(cr, &matrix); cairo_text_path(cr, text); cairo_stroke(cr); ``` #### 八、图像 **图像的显示** - **定义**: 在目标表面上显示外部图像。 - **示例**: 加载并显示PNG图像。 ```c cairo_surface_t *image_surface = cairo_image_surface_create_from_png("image.png"); cairo_pattern_t *pattern = cairo_pattern_create_for_surface(image_surface); cairo_paint_with_alpha(cr, pattern, alpha); cairo_pattern_destroy(pattern); cairo_surface_destroy(image_surface); ``` **垂帘效果（Blind Down）** - **定义**: 从顶部逐渐向下显示图像的效果。 - **示例**: 实现垂帘效果。 ```c cairo_pattern_t *pattern = cairo_pattern_create_for_surface(image_surface); for (int i = 0; i <= height; i += 10) { cairo_paint_with_alpha(cr, pattern, i / (double)height); } cairo_pattern_destroy(pattern); ``` **光谱效果** - **定义**: 通过改变图像的色彩和透明度来实现动态效果。 - **示例**: 实现光谱效果。 ```c cairo_pattern_t *pattern = cairo_pattern_create_for_surface(image_surface); for (int i = 0; i < 360; i += 10) { cairo_pattern_set_color_stop_rgba(pattern, i / 360.0, r, g, b, alpha); } cairo_pattern_destroy(pattern); ``` 通过以上详细介绍，可以看出Cairo图形库提供了一套完整而强大的绘图工具集，不仅能够满足基础绘图需求，还能应对复杂的图形设计挑战。无论是简单的线条绘制还是复杂的图形组合、图像处理，甚至是动态效果的实现，Cairo都能够轻松胜任。