cairo相關總結1

Cairo將成為Linux 2D 繪圖的未來
注意：目前"有理論沒有實踐"^_^
=======================
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 <cairo.h>
#include <cairo-png.h>
#include
#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);
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://hi.baidu.com/litaosmile/blog/item/68a89a8b092f4f1ac9fc7a66.html