如何在Cairo中正确构建可作为填充的简单重复形状图案？

嘿，刚接触Cairo确实容易在图案填充这块卡壳，不过你想的思路完全没问题——用内存表面绘制基础图案，再把它作为重复源填充目标区域，这是Cairo里实现纹理填充的标准操作。我给你拆解步骤，再附上一个可运行的示例代码，帮你排查可能遗漏的点：

核心步骤梳理 #

• 创建小型内存表面绘制基础图案：用cairo_image_surface_create生成一个小尺寸的内存表面，在上面绘制你想要重复的元素（比如圆圈、方块、线条）。
• 将内存表面转为可重复图案：通过cairo_pattern_create_for_surface创建图案对象，关键要设置CAIRO_EXTEND_REPEAT扩展模式，否则图案只会显示一次。
• 在目标SVG表面填充区域：把图案设为绘图上下文的源，然后绘制并填充你需要的路径（比如矩形、自定义形状）。
• 清理资源：Cairo的所有对象（上下文、表面、图案）都需要手动销毁，避免内存泄漏。

完整示例代码 #

#include <cairo.h>
#include <math.h>

int main() {
    // 1. 创建目标SVG表面（400x400像素）
    cairo_surface_t *svg_surface = cairo_svg_surface_create("pattern_fill.svg", 400, 400);
    cairo_t *cr = cairo_create(svg_surface);

    // 2. 创建内存表面用于绘制重复图案（20x20像素）
    cairo_surface_t *pattern_surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 20, 20);
    cairo_t *pattern_cr = cairo_create(pattern_surface);

    // 在内存表面绘制基础图案：白色背景+蓝色小圆圈
    cairo_set_source_rgb(pattern_cr, 1.0, 1.0, 1.0); // 设置白色背景
    cairo_paint(pattern_cr); // 填充整个图案表面
    cairo_set_source_rgb(pattern_cr, 0.0, 0.0, 1.0); // 蓝色
    cairo_arc(pattern_cr, 10, 10, 8, 0, 2 * M_PI); // 绘制圆心在(10,10)、半径8的圆
    cairo_fill(pattern_cr); // 填充圆圈

    // 3. 创建重复图案并设置扩展模式
    cairo_pattern_t *pattern = cairo_pattern_create_for_surface(pattern_surface);
    cairo_pattern_set_extend(pattern, CAIRO_EXTEND_REPEAT); // 关键：开启重复填充

    // 4. 在目标SVG表面用图案填充一个矩形区域
    cairo_set_source(cr, pattern);
    cairo_rectangle(cr, 50, 50, 300, 300); // 定义要填充的矩形（左上角(50,50)，宽高300）
    cairo_fill(cr); // 填充图案

    // 5. 清理所有资源
    cairo_destroy(pattern_cr);
    cairo_surface_destroy(pattern_surface);
    cairo_pattern_destroy(pattern);
    cairo_destroy(cr);
    cairo_surface_destroy(svg_surface);

    return 0;
}

你可能遗漏的关键细节 #

• 忘记设置重复模式：默认的CAIRO_EXTEND_NONE只会显示一次图案，必须显式设置CAIRO_EXTEND_REPEAT才能让图案平铺。
• 图案表面未正确初始化：如果没给图案表面填充背景色，默认会是透明黑色，可能导致图案叠加效果不符合预期。
• 资源未及时销毁：Cairo不会自动回收对象，所有创建的cairo_t、cairo_surface_t、cairo_pattern_t都要调用对应的销毁函数。
• SVG渲染时机：Cairo的SVG表面是延迟渲染的，所有绘制操作要在销毁表面前完成，否则不会写入文件。

编译这段代码时，记得链接Cairo库：gcc -o pattern_fill pattern_fill.c $(pkg-config --cflags --libs cairo)，运行后就能得到一个中间填充蓝色重复圆圈的SVG文件啦～

内容的提问来源于stack exchange，提问作者SevenStarConstellation