cairo学习简单总结

超、凢脫俗 2022-07-17 01:20 223阅读 0赞

Cairo将成为Linux 2D 绘图的未来

内容：

1，什么是Cairo

2.理解cairo

3.常用函数

4.常用代码片断举例

注意：目前"有理论没有实践"^\_^

=======================

1，什么是Cairo

=======================

cairo是一个支持多种输出的向量图形库。也就是说，cairo是种画图的工具库，他可以向多种设备上画图，比如： cairo可以输出到png,可以输出到pdf，可以输出到ps，可以输出到xlib，可以输出到XCB，可以输出到win32，以后还要输出到svg

=======================

2.理解cairo

=======================

如果单纯的从代码上理解cairo，可能容易让人迷惑，所以，我们需要这么去理解cairo:

cairo是一个画笔，你可以为这个画笔设置颜色、设置字体、设置alpha，也可以用这个画笔去画出任何图形。 就像画家作画一样，你可以用画布，也可以用宣纸，也可以用其他的材料。cairo这支画笔，可以在png,ps,pdf或者Xlib上画东西。

例子如下：

/\*利用cairo绘制一个png图形\*/

\#include

int main()

FILE \*file;

file=fopen("a.png","w");//打开一个文件，写入，文件名为a.png

cairo\_t \*cr; //声明一支画笔

cr=cairo\_create();//创建画笔

cairo\_set\_target\_png(cr,file,CAIRO\_FORMAT\_ARGB32,400,400);//设置画布，就是文件，a.png

cairo\_set\_rgb\_color(cr,0,1,0);//设置画笔颜色，也就是红，绿，蓝，这里设置成绿色。

cairo\_rectangle(cr,10,10,200,200);//画一个方块，位置从坐标(10,10)开始，宽200，高200

cairo\_fill(cr);//填充，使用的颜色当然是上面设置的颜色。

cairo\_move\_to(cr,250,200);//将画笔移动到(250,200)

cairo\_select\_font (cr, "DongWen--Song",

CAIRO\_FONT\_SLANT\_NORMAL,

CAIRO\_FONT\_WEIGHT\_NORMAL);//为cairo设置一个字体，字体名DongWen--Song，非斜体，非粗体。

cairo\_scale\_font(cr,60);//缩放字体到60倍

cairo\_show\_text(cr,"hello world");//画出一个串

cairo\_destroy(cr);//销毁画笔

fclose(file);//关闭文件

存成t1.c，然后使用下面的命令编译

gcc -o t1 t1.c -lcairo -I/usr/include/cairo

运行./t1，就生成了一个png图片文件，自己用工具打开看就可以了。

=======================

3.常用函数

=======================

操作画笔：

创建画笔。

cairo\_create()；

增加引用计数1。

cairo\_reference();

减少引用计数1，如果返回0，所有的资源均被释放。

cairo\_destroy();

保存当前cairo画笔。

cairo\_save();

恢复上一次保存的cairo画笔，也就是说必须跟cairo\_save()配对。

cairo\_restore();

\------------

描绘函数：

将一个path用线把轮廓描出来（这个函数绘制的是“空心”的图）。

cairo\_stoke(cr);

将你前面画的东西（一个path）用指定颜色填充起来（这个函数绘制的是“实心”的图）。

cairo\_fill(cr);

\--------------

绘制图形：

方块：

cairo\_rectangle(cr,10,10,100,100);

通过三点定义一道弧线：

cairo\_curve\_to(cr,x1,y1,x2,y2,x3,y3)

顺时针画一个圆弧，圆心x,y，半径radius，起始弧度from，终止弧度to.

比如从0,M\_PI(在math.h里),就可以是一个半圆（开口的不会补上直线）。从0到2\*M\_PI就是一个整圆。

cairo\_arc(cr,x,y,radius,from,to);

逆时针画一个圆弧.

cairo\_arc\_negative(cr,x,y,radius,from,to);

\----------------

字体相关：

/\*暂时不用，所以具体略过\*/

创建字体，返回cairo\_font\_t \* 。

cairo\_ft\_font\_create();

设置字体，接受参数cairo\_t \*和cairo\_font\_t \* 。

cairo\_set\_font();

选择正体Nimbus Sans L，请根据你系统的fc-list自己选择一个字体.

cairo\_select\_font(cr,"Nimbus Sans L", 0,0);

缩放字体，设置为60，虽然是scale，但是cairo内部实际上用的是字号

cairo\_scale\_font(cr,60);

显示hehe，蓝色，60号，Nimbus Sans L字体

cairo\_show\_text(cr,"hehe");

\----------------

绘制路径相关：

好像是用了path就不用使用restore防止画笔移动的时候绘制额外直线了，见例子。

cairo\_new\_path(cr);

cairo\_close\_path(cr);

显示字体，类似cairo\_show\_text但可把字体当成path处理，所以，可以作出任何特效和变换。

cairo\_text\_path(char \* utf8);

\---------------

特殊图形绘制：

旋转函数,接受弧度做参数(用M\_PI去除)

注意，使用时，它是影响全局的，也就是旋转了之后，后面画的一切都是旋转的.

所以旋转之前，做一下cairo\_save，完成需要的旋转之后做一下cairo\_restore能方便一点。

cairo\_rotate(cr,angle);

缩放图形，谨慎使用，注意使用cairo\_save和cairo\_restore，这个函数可以在不同的surface上使用。

x指宽度缩放倍数，y指高度缩放的倍数。

cairo\_scale(cr,x,y);

相对坐标,就是以你当前的点为坐标的原点，然后在移动或者画到制定的位置。

cairo\_rel\_move\_to();

cairo\_rel\_line\_to();

cairo\_rel\_curve\_to();

=======================

4.常用代码片断举例

=======================

绘制：

画一个方块(stroke)：

cairo\_rectangle(cr,10,10,100,100);

cairo\_set\_line\_width(cr,10)

cairo\_set\_rgb\_color(cr,0,0,1);

cairo\_stroke(cr);

画一条斜线(从0,0到100，100)(stroke):

cairo\_move\_to(cr,0,0);

cairo\_line\_to(cr,100,100);

cairo\_set\_rgb\_color(cr,1,0,0);

cairo\_stroke(cr);

画一个空心圆圈(stroke):

cairo\_arc(cr,100,100,40,0,2\*M\_PI);

cairo\_set\_line\_width(cr,3);

cairo\_set\_rgb\_color(cr,1,0,0);

cairo\_stroke(cr);

一个红色的实心圆(fill):

cairo\_arc(cr,100,100,40,0,2\*M\_PI);//以100,100坐标为圆心画一个半径为40的圆(整圆)。

cairo\_set\_rgb\_color(cr,1,0,0);//红色

cairo\_fill(cr);//这时候得到的就是一个红色的实心圆。

\----------------

写字：

/\*将画笔移动到 60x60坐标。

注意：画文字的时候，这个坐标是文字左下角坐标，

如果你这时候移动到0，0坐标，其实你的文字将被画到400x400的画布之外。\*/

cairo\_move\_to(cr,60,60);

//选择正体Nimbus Sans L，请根据你系统的fc-list自己选择一个字体

cairo\_select\_font(cr,"Nimbus Sans L", 0,0);

//设置为60，虽然是scale，但是cairo内部实际上用的是字号

cairo\_scale\_font(cr,60);

//显示hehe，蓝色，60号，Nimbus Sans L字体

cairo\_show\_text(cr,"hehe");

作一个空心字：

//使用了textpath这是通过cairo\_show\_text()做不到的。

cairo\_text\_path("Hello");

cairo\_set\_line\_width(cr,1);

cairo\_stroke(cr);

\----------------

相对坐标：

cairo\_move\_to(cr,10,10);

//这时候点就在20,20上

cairo\_rel\_move\_to(cr,10,10);

\----------------

保存画笔：

/\*大体过程：

1）保存画笔cairo\_save(cr);

2）使用画笔...导致画笔发生变化...

3）恢复画笔cairo\_restore(cr);

为保持完整性，代码有点多但不影响实质

\*/

cairo\_t \* cr;

cr = cairo\_create(); //声明画笔并创建

FILE \*file;

file=fopen("c.png","w");

//设置目标为一个png文件，大小为400x400，色彩32位。

cairo\_set\_target\_png(cr,file,CAIRO\_FORMAT\_ARGB32,400,400);

//$$$SAVE\_1 保存画笔，这时候，画笔是干干净净的，没有任何操作。

cairo\_save(cr);

//画一个矩形框，蓝色

cairo\_rectangle(cr,10,10,200,200);

cairo\_set\_rgb\_color(cr,0,0,1);

cairo\_set\_line\_width(cr,4);

cairo\_stroke(cr);

//写字

cairo\_move\_to(cr,60,60);

cairo\_select\_font(cr,"Nimbus Sans L", 0,0);

cairo\_scale\_font(cr,60);

cairo\_show\_text(cr,"hehe");

//$$$恢复到 SAVE\_1，这时候的画笔又是干干净净的了。

cairo\_restore(cr);

//SAVE\_2 再保存一下，没准以后还会用到这个干净的画笔

cairo\_save(cr);。

//写字

cairo\_move\_to(cr,70,70);

cairo\_set\_rgb\_color(cr,1,0,0);

cairo\_scale\_font(cr,60);

//如果上面不作restore，而又进行了scale\_font，这时候，字体就是60x60倍了

cairo\_show\_text(cr,"hehe");

//恢复到SAVE\_2，这时候画笔仍然是初始状态。

cairo\_restore(cr);

/\*画了一个大半圆曲线。

如果，上面你没有恢复到画笔的初始状态，那么，这时候cairo画笔位于70,70，将画一条直线，捎带一个大半圆曲线，画线的方向是这样的，从当前坐标(70,70)到大半圆的开头，然后到大半圆结尾， 也就是顺时针方向。

\*/

cairo\_set\_rgb\_color(cr,0,1,0);

cairo\_arc(cr,100,100,60,0, 1.5\*M\_PI);

cairo\_set\_line\_width(cr,3);

cairo\_set\_line\_cap(cr,CAIRO\_LINE\_CAP\_ROUND);

cairo\_stroke(cr);

cairo\_destroy(cr);

fclose(file);

\--------------------

使用路径：

/\*当前点在(70,70)那么在(100,100)处画圆会首先移动到该圆点，导致一条直线

\*所以path可以解决这个问题见下面：

\*/

cairo\_move\_to(70,70);

cairo\_new\_path(cr);

cairo\_set\_rgb\_color(cr,0,1,0);

cairo\_arc(cr,100,100,60,0, 1.5\*M\_PI);

cairo\_set\_line\_width(cr,3);

cairo\_set\_line\_cap(cr,CAIRO\_LINE\_CAP\_ROUND);

cairo\_stroke(cr);

cairo\_close\_path(cr);

\----------------

旋转：

cairo\_t \*cr;

cr = cairo\_create();

cairo\_set\_target\_.....;

//顺时针旋转30度。如果是-M\_PI/6，也就是逆时针旋转30度了。

cairo\_rotate(cr,M\_PI/6);

cairo\_rectangle(cr,10,10,100,100);//正方形

cairo\_set\_rgb\_color(cr,1,0,0);

cairo\_set\_line\_width(cr,10);

cairo\_stroke(cr);

缩放：绘制一个平行四边形

cairo\_t \*cr;

cr = cairo\_create();

cairo\_set\_target\_.....;

//水平方向不变，垂直方向缩小为一半。

cairo\_scale(cr,1,0.5);

//顺时针旋转30度。如果是-M\_PI/6，也就是逆时针旋转30度了。

cairo\_rotate(cr,M\_PI/6);

cairo\_rectangle(cr,10,10,100,100);//正方形，经过了scale之后，变成了长方形。

cairo\_set\_rgb\_color(cr,1,0,0);

cairo\_set\_line\_width(cr,10);

/\*首先，上下两条边的粗细变成了原来的一半，同时这个图形不是一个直角矩形，而是一个平行四边形。

因为：

进行了scale之后，影响垂直方向的所有变换，都变成了原来的一半。所以，本来应该是每条边都旋转30度，现在 上下两条边都变成了旋转一半的度数，也就是15度。

当然，如果你要旋转一个长方形，只要直接用cairo\_rectangle画一个长方形就OK了

注意，cairo\_rotate只影响其后的内容，所以，不能在画完了在rotate。

\*/

cairo\_stroke(cr);

=======================

参考：

http://blog.chinaunix.net/uid-9525959-id-2001567.html

cairo学习简单总结

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Windows环境编译Cairo绘图库

相关【Java学习笔记】final关键字简单总结

相关 XML学习总结（2）——XML简单介绍

相关 C语言学习——方法简单总结

相关 cairo学习简单总结

相关 Spring IO Platform Cairo-SR8 发布

相关 eclipse: cairo-misc.c:380: _cairo_operator_bounded_by_source: Assertion `NOT_REACHED' failed.

相关 XML学习总结（2）——XML简单介绍

相关 XML学习总结（2）——XML简单介绍

相关 cairo[00] Windows环境学习笔记——Visual Studio配置GTK