cairo總結

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 #include #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); =======================