2. 程式人生 > >Cairo 圖形指南 (4) —— 基本繪圖

Cairo 圖形指南 (4) —— 基本繪圖

阿新 • • 發佈：2019-02-19

這一部分講述如何繪製一些簡單的圖元，包括直線、填充與筆畫操作、虛線、線端（Cap）與線的交合等圖形的繪製方法。

直線段

直線段是非常基礎的向量圖形物件。畫一條直線段，需要呼叫兩個函式：cairo_move_to() 函式，用於設定線段起點；cairo_line_to() 用於設定線段終點。

#include <cairo.h>
#include <gtk/gtk.h>

double coordx[100];
double coordy[100];

int count = 0;

static gboolean
on_expose_event(GtkWidget *widget,
                GdkEventExpose *event,
                gpointer data)

{
        cairo_t *cr;
        
        cr = gdk_cairo_create(widget->window);
        
        cairo_set_source_rgb(cr, 0, 0, 0);
        cairo_set_line_width (cr, 0.5);
        
        int i, j;
        for ( i = 0; i <= count - 1; i++ ) {
                for ( j  = 0; j <= count -1; j++ ) {
                        cairo_move_to(
cr, coordx[i], coordy[i]);
                        cairo_line_to(cr, coordx[j], coordy[j]);
                }
        }
        
        count = 0;
        cairo_stroke(cr);
        cairo_destroy(cr);
        
        return FALSE;
}

gboolean clicked(GtkWidget *widget, GdkEventButton *event,
                 gpointer user_data)

{
        if (event->button == 1) {
                coordx[count] = event->x;
                coordy[count++] = event->y;
        }
        
        if (event->button == 3) {
                gtk_widget_queue_draw(widget);
        }
        
        return TRUE;
}


int
main (int argc, char *argv[])
{
        
        GtkWidget *window;
        
        gtk_init(&argc, &argv);
        
        window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
        
        gtk_widget_add_events (window, GDK_BUTTON_PRESS_MASK);
        
        g_signal_connect(window, "expose-event",
                         G_CALLBACK(on_expose_event), NULL);
        g_signal_connect(window, "destroy",
                         G_CALLBACK(gtk_main_quit), NULL);
        g_signal_connect(window, "button-press-event", 
                         G_CALLBACK(clicked), NULL);
        
        gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
        gtk_window_set_title(GTK_WINDOW(window), "lines");
        gtk_window_set_default_size(GTK_WINDOW(window), 400, 300); 
        gtk_widget_set_app_paintable(window, TRUE);
        
        gtk_widget_show_all(window);
        
        gtk_main();
        
        return 0;
}

該示例會建立一個支援滑鼠互動繪製直線段的 GTK+ 視窗。在視窗中使用滑鼠左鍵隨便點幾下，每一次點選時，游標位置的座標都會被記入長度為 100 的陣列；然後點選滑鼠右鍵，所有由滑鼠左鍵點選所得到的點會被彼此連線形成直線段；在視窗中再次點選滑鼠右鍵時，會對視窗繪圖區域進行清除。

下面對該示例程式程式碼進行分析：

        cairo_set_source_rgb(cr, 0, 0, 0);
        cairo_set_line_width (cr, 0.5);

設定顏色為黑色，線寬為 0.5pt 為引數，繪製直線段。

        int i, j;
        for ( i = 0; i <= count - 1; i++ ) {
                for ( j  = 0; j <= count -1; j++ ) {
                        cairo_move_to(cr, coordx[i], coordy[i]);
                        cairo_line_to(cr, coordx[j], coordy[j]);
                }
        }

用 cairo_move_to() 和 cairo_line_to() 函式在 cr 中定義繪圖路徑 (path)，連線 coordx[] 和 coordy[] 所記錄的每個點。

        cairo_stroke(cr);

cairo_stroke() 函式會將 cr 中的路徑繪製出來。

        g_signal_connect(window, "button-press-event",
                         G_CALLBACK(clicked), NULL);

設定 button-press-event 事件的回撥函式為 clicked ()。

        if (event->button == 1) {
                coordx[count] = event->x;
                coordy[count++] = event->y;
        }

在 clicked () 函式中，當滑鼠左鍵點選事件發生時，講游標所在位置的 x 和 y 座標分別記入陣列 coordx 和 coordy。

        if (event->button == 3) {
                gtk_widget_queue_draw(widget);
        }

 在 clicked () 函式中，當滑鼠右鍵單擊時，呼叫 gtk_widget_queue_draw () 函式重繪視窗區域。

描繪 (Stroke) 與填充 (Fill)

描繪 (Stroke) 可以繪製形狀的輪廓，填充 (Fill) 則用於向形狀內部灌注顏色。 

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

static gboolean
on_expose_event (GtkWidget * widget,
                 GdkEventExpose * event, gpointer data)
{
        cairo_t *cr;

        cr = gdk_cairo_create (widget->window);

        int width, height;
        gtk_window_get_size (GTK_WINDOW (widget), &width, &height);
        cairo_set_line_width (cr, 9);

        cairo_set_source_rgb (cr, 0.69, 0.19, 0);
        cairo_arc (cr, width / 2, height / 2,
                   (width < height ? width : height) / 2 - 10, 0,
                   2 * M_PI);
        cairo_stroke_preserve (cr);

        cairo_set_source_rgb (cr, 0.3, 0.4, 0.6);
        cairo_fill (cr);

        cairo_destroy (cr);

        return FALSE;
}

int
main (int argc, char *argv[])
{
        GtkWidget *window;

        gtk_init (&argc, &argv);

        window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

        g_signal_connect (G_OBJECT (window), "expose-event",
                          G_CALLBACK (on_expose_event), NULL);
        g_signal_connect (G_OBJECT (window), "destroy",
                          G_CALLBACK (gtk_main_quit), NULL);

        gtk_window_set_position (GTK_WINDOW (window),
                                 GTK_WIN_POS_CENTER);
        gtk_window_set_default_size (GTK_WINDOW (window), 200, 150);

        gtk_widget_set_app_paintable (window, TRUE);
        gtk_widget_show_all (window);

        gtk_main ();

        return 0;
}

這個示例繪製一個內部填充灰色的圓。

下面對程式碼進行解析：

#include <math.h>

之所以引入這個標頭檔案，是因為程式中使用了圓周率常量 M_PI。

        int width, height;
        gtk_window_get_size (GTK_WINDOW (widget), &width, &height);

獲取視窗的寬度與高度尺寸。程式中將使用這些值作為繪製圓形的參考尺寸，以實現視窗尺寸變化時，所繪製的圓的尺寸也會相應變化。

        cairo_set_source_rgb (cr, 0.69, 0.19, 0);
        cairo_arc (cr, width / 2, height / 2,
                   (width < height ? width : height) / 2 - 10, 0,
                   2 * M_PI);
        cairo_stroke_preserve (cr);

描繪圓的輪廓。這裡要注意一下 cairo_stroke_preserve () 函式與 cairo_stroke () 函式的區別（最好的辦法是用後者替換一下前者，看看程式執行效果）。cairo_stroke_preserve () 函式會將它繪製的路徑依然儲存在 cairo 環境中，而 cairo_stroke () 所繪製的路徑，在繪製完成後，就從 cairo的環境中清除了。

        cairo_set_source_rgb (cr, 0.3, 0.4, 0.6);
        cairo_fill (cr);

對使用 cairo_stroke_preserve () 函式繪製的路徑進行藍色填充。

虛線 (Dash)

每條線都可以用不同的虛線筆 (dash pen) 來畫。虛線模式是通過 cairo_set_dash () 函式來設定。模式型別通過一個數組來定義，陣列中的值均為正數，它們用於設定虛線的虛部分與實部分。陣列的長度與偏移量可以在程式中設定。如果陣列的長度 為 0，虛線模式就是被禁止了，那所繪製的線是實線。如果陣列長度為 1，則對應著虛實均勻分佈的虛線模式。偏移量是用來設定在虛線的始端在一個虛線週期（包含一個實部單元和一個虛部單元）內的起始位置。

#include <cairo.h>
#include <gtk/gtk.h>

static gboolean
on_expose_event (GtkWidget * widget,
                 GdkEventExpose * event, gpointer data)
{
        cairo_t *cr;

        cr = gdk_cairo_create (widget->window);

        cairo_set_source_rgba (cr, 0, 0, 0, 1);

        static const double dashed1[] = { 4.0, 1.0 };
        static int len1 = sizeof (dashed1) / sizeof (dashed1[0]);

        static const double dashed2[] = { 4.0, 10.0, 4.0 };
        static int len2 = sizeof (dashed2) / sizeof (dashed2[0]);

        static const double dashed3[] = { 1.0 };

        cairo_set_line_width (cr, 1.5);

        cairo_set_dash (cr, dashed1, len1, 0);

        cairo_move_to (cr, 40, 60);
        cairo_line_to (cr, 360, 60);
        cairo_stroke (cr);

        cairo_set_dash (cr, dashed2, len2, 10);

        cairo_move_to (cr, 40, 120);
        cairo_line_to (cr, 360, 120);
        cairo_stroke (cr);

        cairo_set_dash (cr, dashed3, 1, 0);

        cairo_move_to (cr, 40, 180);
        cairo_line_to (cr, 360, 180);
        cairo_stroke (cr);

        cairo_destroy (cr);

        return FALSE;
}


int
main (int argc, char *argv[])
{

        GtkWidget *window;
        GtkWidget *darea;

        gtk_init (&argc, &argv);

        window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

        darea = gtk_drawing_area_new ();
        gtk_container_add (GTK_CONTAINER (window), darea);

        g_signal_connect (darea, "expose-event",
                          G_CALLBACK (on_expose_event), NULL);
        g_signal_connect (window, "destroy",
                          G_CALLBACK (gtk_main_quit), NULL);

        gtk_window_set_position (GTK_WINDOW (window),
                                 GTK_WIN_POS_CENTER);
        gtk_window_set_default_size (GTK_WINDOW (window), 400, 300);

        gtk_widget_show_all (window);

        gtk_main ();

        return 0;
}

該示例演示了三種虛線模式的設定及繪製。

下面分析一下關鍵程式碼。

        static const double dashed1[] = { 4.0, 1.0 };

設定第一條虛線的模式，它的實部是 4 個畫素，虛部是 1 個畫素。

        static int len1 = sizeof (dashed1) / sizeof (dashed1[0]);

計算陣列 dashed1 的長度。

        cairo_set_dash (cr, dashed1, len1, 0);

設定虛線模式。

        darea = gtk_drawing_area_new ();
        gtk_container_add (GTK_CONTAINER (window), darea);

這次，我們是在 drawing_area 部件上繪圖，不再是視窗區域了。

線帽 (Line caps)

線帽是針對直線段的端點形狀而言的，分為三種：

  • CAIRO_LINE_CAP_SQUARE
  • CAIRO_LINE_CAP_ROUND
  • CAIRO_LINE_CAP_BUTT

對應形狀如下圖所示：

同一條直線段，CAIRO_LINE_CAP_SQUARE 線帽與 CAIRO_LINE_CAP_BUTT 線帽會導致直線段長度有所差別，前者會比後者長一個線寬尺寸。

#include <cairo.h>
#include <gtk/gtk.h>

static gboolean
on_expose_event (GtkWidget * widget,
                 GdkEventExpose * event, gpointer data)
{
        cairo_t *cr;

        cr = gdk_cairo_create (widget->window);

        cairo_set_source_rgba (cr, 0, 0, 0, 1);
        cairo_set_line_width (cr, 10);

        cairo_set_line_cap (cr, CAIRO_LINE_CAP_BUTT);
        cairo_move_to (cr, 40, 60);
        cairo_line_to (cr, 360, 60);
        cairo_stroke (cr);

        cairo_set_line_cap (cr, CAIRO_LINE_CAP_ROUND);
        cairo_move_to (cr, 40, 150);
        cairo_line_to (cr, 360, 150);
        cairo_stroke (cr);

        cairo_set_line_cap (cr, CAIRO_LINE_CAP_SQUARE);
        cairo_move_to (cr, 40, 240);
        cairo_line_to (cr, 360, 240);
        cairo_stroke (cr);

        cairo_set_line_width (cr, 1.5);

        cairo_move_to (cr, 40, 40);
        cairo_line_to (cr, 40, 260);
        cairo_stroke (cr);

        cairo_move_to (cr, 360, 40);
        cairo_line_to (cr, 360, 260);
        cairo_stroke (cr);

        cairo_move_to (cr, 365, 40);
        cairo_line_to (cr, 365, 260);
        cairo_stroke (cr);

        cairo_destroy (cr);

        return FALSE;
}

該示例繪製三條具有不同線帽的直線段，同時也展示了不同線帽對線的長度的影響。

下面對關鍵程式碼進行簡單分析：

        cairo_set_line_width (cr, 10);

設定線的寬度為 10px。

        cairo_set_line_cap (cr, CAIRO_LINE_CAP_ROUND);
        cairo_move_to (cr, 40, 150);
        cairo_line_to (cr, 360, 150);
        cairo_stroke (cr);

 畫了一條線帽為 CAIRO_LINE_CAP_ROUND 的直線段。

        cairo_move_to (cr, 40, 40);
        cairo_line_to (cr, 40, 260);
        cairo_stroke (cr);

這是三條豎線之一，用於表現線帽對線的長度的影響。

線的交合 (Line joins)

線的交合存在以下三種風格：

  • CAIRO_LINE_JOIN_MITER
  • CAIRO_LINE_JOIN_BEVEL
  • CAIRO_LINE_JOIN_ROUND

對應形狀如下圖所示。

#include <cairo.h>
#include <gtk/gtk.h>

static gboolean
on_expose_event (GtkWidget * widget,
                 GdkEventExpose * event, gpointer data)
{
        cairo_t *cr;

        cr = gdk_cairo_create (widget->window);

        cairo_set_source_rgb (cr, 0.1, 0, 0);

        cairo_rectangle (cr, 30, 30, 100, 100);
        cairo_set_line_width (cr, 14);
        cairo_set_line_join (cr, CAIRO_LINE_JOIN_MITER);
        cairo_stroke (cr);

        cairo_rectangle (cr, 160, 30, 100, 100);
        cairo_set_line_width (cr, 14);
        cairo_set_line_join (cr, CAIRO_LINE_JOIN_BEVEL);
        cairo_stroke (cr);

        cairo_rectangle (cr, 100, 160, 100, 100);
        cairo_set_line_width (cr, 14);
        cairo_set_line_join (cr, CAIRO_LINE_JOIN_ROUND);
        cairo_stroke (cr);

        cairo_destroy (cr);

        return FALSE;
}

int
main (int argc, char *argv[])
{
        GtkWidget *window;
        GtkWidget *darea;

        gtk_init (&argc, &argv);

        window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

        darea = gtk_drawing_area_new ();
        gtk_container_add (GTK_CONTAINER (window), darea);

        g_signal_connect (darea, "expose-event",
                          G_CALLBACK (on_expose_event), NULL);
        g_signal_connect (window, "destroy",
                          G_CALLBACK (gtk_main_quit), NULL);

        gtk_window_set_position (GTK_WINDOW (window),
                                 GTK_WIN_POS_CENTER);
        gtk_window_set_default_size (GTK_WINDOW (window), 300, 280);

        gtk_widget_show_all (window);

        gtk_main ();

        return 0;
}
 

該示例採用不同的交合型別繪製了三個矩形。

下面對關鍵程式碼進行簡單分析：

        cairo_rectangle (cr, 30, 30, 100, 100);
        cairo_set_line_width (cr, 14);
        cairo_set_line_join (cr, CAIRO_LINE_JOIN_MITER);
        cairo_stroke (cr);

繪製了一個線寬為 14px，交合型別為 CAIRO_LINE

相關推薦

Cairo 圖形指南 (4) —— 基本繪圖

這一部分講述如何繪製一些簡單的圖元，包括直線、填充與筆畫操作、虛線、線端（Cap）與線的交合等圖形的繪製方法。 直線段 直線段是非常基礎的向量圖形物件。畫一條直線段，需要呼叫兩個函式：cairo_move_to() 函式，用於設定線段起點；cairo_line_to(

openCV—Python(4)—— 基本繪圖

一、函式簡介 1、zeros—構造全0矩陣 函式原型：zeros(shape, dtype=None, order=’C’) shape：矩陣大小；例如：300x300; dtype：資料型別；例如：”uint8” order：資料排列

ggplot2包基本繪圖(4)-折線圖與面積圖

什麼是折線圖與面積圖 二者均呈現一種隨時間變化而改變範圍的圖表，但是在excel中折線圖與面積圖的x軸資料均為分類資料，這是其與散點圖最大的區別。 因此在ggplot2中需要新增一組數值變數以反映這個趨勢，如果已經是數值變數，那麼折線圖與散點折線圖沒有區別。 折

【計算機圖形學課程】一.MFC基本繪圖函式使用方法

        這是最近我《計算機圖形學》課程實踐程式設計課介紹的相關知識，主要是想通過MFC C++繪圖，讓學生體會下圖形學相關的程式設計及簡單的圖形繪製，同時非常佩服學生的想象力，他們做得真的不錯。希望這篇基礎文章對你有所幫助吧！尤其是有這門課程的學生或程式設計愛好者，如

Qt 之圖形（QPainter 的基本繪圖）

簡述 Qt 中提供了強大的 2D 繪圖系統，可以使用相同的 API 在螢幕和繪圖裝置上進行繪製，它主要基於QPainter、QPaintDevice 和 QPaintEngine 這三個類。 QPainter 用於執行繪圖操作，其提供的 API 在 GUI

作業4基本數據類型

lee 沒有 相同 包含 逗號 app 每一個 手機 dbo 基本數據類型 1數字：（1） 整型 int ： 比如年紀，等級，身份證號，手機號。。。 （2）浮點型float：比如 身高，體重 ，工資，價格 2字符串： str: 包含在引號 （單

GNOME圖形界面的基本操作

當前 work 背景圖 目錄 system min nom 分辨 div 　　成功登錄進入CentOS系統之後，我們首先看到的桌面就是GNOME圖形界面，下面來看一下相關的基本操作。 個性化設置 1，設置屏幕分辨率 進入菜單 2，更換桌面背景

Qt 編程指南 4 按鈕2 打開網頁和文件夾

dir 地址 cpp 創建項目 當前 char obj mage bug 功能： 按鍵打開文件夾和網頁 效果： 教程 1 添加兩個鏈接按鈕 分別命名 commandLinkButtonFolder 和 commandLinkBut

openCV 基本繪圖

圓心 space blog 繪制矩形 img 描述 input 五個 tro 繪制點和圓 void cvCircle( CvArr* img, CvPoint center, int radius, CvScalar color,int thickness=1, int

201671010145 2016-2017《Java程序設計》JAVA圖形程序設計基本框架

window 窗口 found 完全 str kit 圖形 awt abstract 在Java 1.0 剛剛出現的時候，包含了一個用於基本GUI程序設計的類庫，Sun將它稱為抽象窗口工具箱（Abstract Window Toolkit, AWT）。 1996年，Nets

4.基本選擇器

test ont value spa 選擇 doctype cli ssis rip 註意： 　　window.onload=funtion(){ 　　} 　　等價於 　　$(document).ready(function(){ 　　}) 　　$(function(){

軟件包管理 4-----基本知識 rpm包的效驗 yum

第四部分包的效驗當我們安裝 rpm包的時候要檢查一下是否被串改等是否有簽名-K包來源合法性驗正及完整性驗正 完整性驗正：SHA256 來源合法性驗正：RSA 公鑰加密 對稱加密：加密、解密使用同一密鑰 非對稱加密：密鑰是成對兒的 public key: 公鑰，公開所有人 secret key:

vue學習之路 - 4.基本操作（下）

align 過去 開始 就會 binding 效果 不可 exp 功能 vue學習之路 - 4.基本操作（下） 簡述：本章節主要介紹 vue 的一些其他常用指令。 Vue 指令 　　這裏將 vue 的指令分為系統內部指令（vue 自帶指令）和用戶自定義指令兩種。 系統內部指

圖形界面的基本概念

apple applet ner 創建 容器類 java.awt awt 其它 輕量級 1) AWT（Abstract Window Toolkit），抽象窗口工具集，第一代的Java GUI組件，是重量級的。 2) Swing，不依賴於底層細節，輕量級的組件。 GUI

程式猿生存指南-4 借錢風波

借錢風波 （10） 臨近春節，我的朋友圈被各個公司的年終獎刷屏。土豪網際網路公司有送現金的，有送豪車的，還有送別墅的。它們享受著移動網際網路的紅利，賺得盆滿鉢滿。不過翻看公司請媒體寫的那些報道，就很容易看出端倪，爆出如此豐厚的年終獎更多地還是為了宣傳企業自身。 在這個萬眾創新、大眾創業的大環境下，資本和人

DAY03-4. 基本運算子

比較運算子 > >= < <= == != print(10!=11)   瞭解 x=none print(x == None) print(x is None) l1=['abc',1,['a','b','c']] l2=['abc','aa',]

Elasticsearch 6.4基本操作 - Java版

all efi _array 寫法 creat guide 復雜 dds ddt 1. Elasticsearch Java API有四類client連接方式 TransportClient RestClient Jest Spring Data Elastic

pdf.js 入門使用指南4-手機端瀏覽pdf(touch.js)

經過測試，使用pdf.js這個開源庫，自己編寫程式碼實現pdf 檔案瀏覽也不是很複雜。參照我以前的blog文章，如果要實現上一頁，下一頁，旋轉等都非常簡單。 但是，手機端是個比較依賴手勢特殊存在。如果要實現如下功能： 1：雙指放大，通過捏合雙指進行放大或縮小 2：單個手指

opecv基本繪圖

#include <iostream> #include <opencv2/highgui.hpp> #include <cv.h> #include <imgproc/imgproc.hpp> #include <core/core.hpp&

OpenCV之基本繪圖（在Mat和Bitmap上）

        在之前的部落格中，關於通過Canvas配合Paint繪圖儲存在Bitmap上，最後展示在ImageView上，我還專門做了一個畫圖釋義的Demo，具體請轉至我用2D繪圖API畫了一隻好醜的雞，Canvas配合MotionEvent實現畫板功能檢