Cairo学习（一）

Cairo 介绍

最近在看Cairo，准备做ofd生成图片。技术选型选了几天，编译过Mesa3D，但是好像不太适合。最后选择Cairo 2D绘图库，因为是在Linux下跑的，特地安装了个CentOS7编译Demo，发现可以运行。Cairo有直接绘制图片，也有渐变和矩阵转换，比较适合。

Windows编译和Linux编译参考官网：https://www.cairographics.org/download/

绘图之前需要理解几个概念：

• surface（画布）
• context（上下文）
• path（路径）
• mask（遮罩）

暂时这些就够了，首先surface，我的理解是画布。有的画布是图片，有的画布是窗口。

cairo_surface_t *surface;
//pdf 画布
surface = cairo_pdf_surface_create ("helloworld.pdf", width, height)
//png 画布
surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 400, 400);

// 销毁画布
cairo_surface_destroy(surface);

有了画布，需要一个管理员，也就是上下文。

// 如果是gtk窗口就可以直接调用创建上下文的函数，无需创建surface（画布）
cairo_t *cr = gdk_cairo_create (widget->window);
// 有了画布，通过画布来创建上下文
cairo_t* cr = cairo_create(surface);

// 销毁上下文
cairo_destroy(cr);

路径很重要，绘图都会依赖它。如果学过PS就很容易理解路径，路径类似于PS中的选区。一定要有路径，我们才能绘图，通过描边或者填充绘制各种各样的图形。

遮罩就相当于掩码，可以进行透明遮罩。

为了演示方便，所以绘图都会在png上作画。以下就绘图之前和绘图之后通用代码：

int main()
{
    cairo_surface_t* surface =
        cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 400, 400);
    cairo_t* cr =
        cairo_create(surface);

    // 绘制，并获取图片名称
    // 调用不同的函数可以绘制不同的图形
    string fileName = line(cr);
    
    // 给图片添加后缀
    fileName += ".png";
    // 销毁上下文
    cairo_destroy(cr);
    //将绘制的结果写到图片中
    cairo_surface_write_to_png(surface, fileName.c_str());
    //销毁画布
    cairo_surface_destroy(surface);
	return 0;
}

直线

// 画直线
string line(cairo_t* cr)
{
    //设置颜色
    cairo_set_source_rgb(cr, 0, 0, 0);
    //设置线宽
    cairo_set_line_width(cr, 5);
    // 画第一条直线路径
    cairo_move_to(cr, 0, 0);
    cairo_line_to(cr, 400, 400);
    //画第二条直线路径
    cairo_move_to(cr, 400, 0);
    cairo_line_to(cr, 0, 400);
    //描边
    cairo_stroke(cr);

    return __FUNCTION__;
}

画矩形

// 画矩形
string rectangle(cairo_t* cr)
{
    //设置颜色
    cairo_set_source_rgb(cr, 0, 0, 0);
    // 画一个矩形路径
    cairo_rectangle(cr, 50, 50, 200, 300);
    // 填充路径
    cairo_fill(cr);
    return __FUNCTION__;
}

画圆

#define M_PI 3.1415926535898
// 画圆
string circle(cairo_t* cr)
{
    //设置颜色
    cairo_set_source_rgb(cr, 0, 0, 0);
    // 画一个圆弧路径
    cairo_arc(cr,100,100,100,0,2* M_PI);
    // 填充路径
    cairo_fill(cr);

    return __FUNCTION__;
}

画圆弧

// 画圆弧
string arc(cairo_t* cr)
{
    //设置颜色
    cairo_set_source_rgb(cr, 0, 0, 0);
    //设置线宽
    cairo_set_line_width(cr, 5);
    // 画一个圆弧路径
    cairo_arc(cr, 120, 120, 100, 0, M_PI);
    // 描边
    cairo_stroke(cr);

    return __FUNCTION__;
}

画文字

//画文字
string text(cairo_t* cr)
{
    // 设置字体类型
    cairo_select_font_face(cr, "serif", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
    // 设置字体大小
    cairo_set_font_size(cr, 32.0);
    // 设置颜色
    cairo_set_source_rgba(cr, 5.0, 0.0, 1.0, 0.5);
    // 设置开始坐标
    cairo_move_to(cr, 10.0, 50.0);
    // 绘制文字
    cairo_show_text(cr, "diff3.com");

    return __FUNCTION__;
}

结尾

上面例子具体参数，可以参考官网文档。绘制的流程基本上就这些，接下来会更新怎么绘制渐变。渐变包括线性渐变和径向渐变，线性渐变和径向渐变将会在下篇文章讲。

官方教程：https://www.cairographics.org/tutorial/

注意：官方教程有个坑，利用了工作空间，参数的长度基本上都在1和0之间，如果你绘制一条直线，把参数照抄下来，会发现一片空白，什么也没有绘制。