Gtkmm Drawing Area simple tutorial

在Gtkmm中繪圖是一個再簡單不過的事情了

需要的物件有Drawing Area還有Cairo::Context

其實它的設計理念真是異常的簡單

• Cairo::Context 就像是一隻畫筆



• Drawing Area 則像是一個畫架

先介紹Cario::Context的使用方法


想像我們在畫畫的時候,先用鉛筆畫出圖案的輪廓

接著再拿色筆描繪輪,或是把圖案填滿

Cairo::Context的用法也是如此,先用"move_to"以及"line_to"等指令畫出一個path之後

再用"set_line_width","set_source_rgb"等函式挑選顏色以及筆觸的粗細等...

最後再選擇要描邊,還是把圖案填滿



先介紹Cairo::Context幾個簡單但是重要的函式

1. move_to(x,y) 顧名思義就是把畫筆騰空(離開紙面)移到(x,y)



2. line_to(x,y) 不難想像就是從畫筆原來的位置,畫一條path到(x,y)



3. clip() 開始一個新的clip;打斷並且清除原來的Path



4. set_line_width(w) 設定筆觸的粗細



5. set_source_rgb(r,g,b) 設定筆觸的顏色



6. stroke() 根據之前設定的顏色以及筆觸描繪出你所記錄的path

Drawing Area的使用
之前說過Drawing Area很像是繪圖用的畫架;在一般的繪圖時我們會用到兩個很重要的成員

1. Glib::RefPtr <Gdk::Window>你可以想像這個就是我們所要畫畫用的白紙本身
2. Gtk::Allocation 想像這個是畫布的一些初始資料; 例如:長寬高之類的

我們可以分別使用Drawing Area的兩個成員函式get_window()以及get_allocation()來取得它們



有了以上的概念以後,我們現在就可以看一個簡單的例子:
file: myarea.cc

#include "myarea.h"
#include <cairomm/context.h>

myArea::myArea()
{

}

myArea::~myArea()
{

}

bool myArea::on_expose_event(GdkEventExpose* event)
{
Glib::RefPtr<Gdk::Window> window = get_window();
if(window)
{
Gtk::Allocation allocation = get_allocation();
const int width = allocation.get_width();
const int height = allocation.get_height();

//coorderates the center of the window  int cx, cy;
cx = width/2;
cy = height/2;

Cairo::RefPtr<Cairo::Context> cr = window->create_cairo_context();
cr->set_line_width(10.0);

cr->rectangle(event->area.x, event->area.y, event->area.width, event->area.height);
cr->clip();
cr->set_source_rgb(0.8, 0.0, 0.0);
cr->move_to(0.0, 0.0);
cr->line_to(cx, cy);
cr->line_to(0, height);
cr->move_to(cx, cy);
cr->line_to(width, cy);
cr->stroke();

}
return true;
}

file: myarea.h

#ifndef GTKMM_EXAMPLE_MYAREA_H
#define GTKMM_EXAMPLE_MYAREA_H

#include <gtkmm/drawingarea.h>

class myArea:public Gtk::DrawingArea
{
public:
myArea ( );
virtual ~myArea();

private:
virtual bool on_expose_event(GdkEventExpose* event);
};
#endif //GTKMM_EXAMPLE_MYAREA_H

file: main.cc

#include "myarea.h"
#include <gtkmm/main.h>
#include <gtkmm/window.h>

int main (int argc, char * argv[])
{
Gtk::Main kit(argc, argv);
Gtk::Window win;
win.set_title("drawing area");
myArea area;
win.add(area);
area.show();
Gtk::Main::run(win);

return 0;
}

file: Makefile

CC=g++
CFLAGS=-Wall `pkg-config gtkmm-2.4 --cflags --libs`
OBJS=main.o myarea.o

all:drawingarea

drawingarea:$(OBJS)
$(CC) $(OBJS) -o $@ $(CFLAGS)

main.o: main.cc myarea.h
$(CC) $(CFLAGS) -c -o $@ $<

myarea.o: myarea.cc myarea.h
$(CC) $(CFLAGS) -c -o $@ $<

reference
http://www.cairographics.org/documentation/cairomm/reference/
http://www.gtkmm.org/docs/gtkmm-2.4/docs/tutorial/html/chapter-drawingarea.html

這個程式碼在ubuntu 8.04中可以正常的執行, gtkmm、cairomm用synaptic就可以輕易的安裝