GooCanvas學習筆記

GooCanvas學習筆記

GooCanvas 的資料實在太少了，vala的資料更少，這裏把學習過程中寫的demo分享出來，希望能有點兒用吧。

先上demo

// rectangle item 的信號處理函數
bool on_rect_button_press(Goo.CanvasItem item,
                                            Goo.CanvasItem target,
                                            Gdk.EventButton event) {
	print("rect item received button press event\n");
	return true;
}

// 窗口關閉處理函數
bool on_delete_event() {
	Gtk.main_quit();
	return true;
}

int main(string[]args) {

	// 初始化 Gtk
	Gtk.init(ref args);

	// 創建主窗口
	Gtk.Window window = new Gtk.Window();
	window.set_default_size(640, 600);
	window.show();
	window.delete_event.connect(on_delete_event);

	// 創建畫布
	Goo.Canvas canvas = new Goo.Canvas();
	// 設置畫布大小
	canvas.set_size_request(600, 450);

	window.add(canvas);

	Goo.CanvasItem root = canvas.get_root_item();

	// 添加一些簡單的 items

	// 創建一個矩形，位置(100, 100)，長寬 400
	Goo.CanvasRect rect_item = new Goo.CanvasRect(root, 100, 100, 400, 400) {
		line_width = 10.0, // 線寬 10
		radius_x = 20.0,
		radius_y = 20.0,
		stroke_color = "yellow", // 邊框顏色
		fill_color = "red" // 填充顏色
	};

	// 點擊信號
	rect_item.button_press_event.connect(on_rect_button_press);

	// 創建文本，位置(300, 300)
	Goo.CanvasText text_item = new Goo.CanvasText(root, "Hello World", 300, 300, -1,
						  Goo.CanvasAnchorType.CENTER) {
		font = "Sans 24"
	};

	// 順時鐘旋轉45度，旋轉原點(300, 300)
	text_item.rotate(45, 300, 300);

	canvas.show();

	Gtk.main();

	return 0;
}

基本圖元

using Goo;
using Gtk;


public class Application : Gtk.Application {
	private Canvas     _canvas;
	private CanvasItem _root;
	private CanvasItem _text;
	private CanvasItem _line;
	private CanvasItem _rect;
	private CanvasItem _ellipse1;
	private CanvasItem _ellipse2;
	private CanvasItem _grid;
	private CanvasItem _image;

    public Application() {
    }

    protected override void activate() {
        var window = new ApplicationWindow(this);
		window.set_size_request(300, 1000);

		_canvas = new Canvas(){
			background_color = "rgb(23, 20, 33)"
		};
		_root = _canvas.get_root_item();

		draw_text();
		draw_line();
		draw_rect();
		draw_ellipse();
		draw_grid();

		window.add(_canvas);
		window.show_all();
    }

	// 繪製文本
	private void draw_text() {
		// 文本內容"GooCanvas"，位置(100,100)，寬度自適應？居中
		_text = new CanvasText(_root, "GooCanvas", 100, 100, -1, CanvasAnchorType.CENTER) {
			font = "Sans 20", // 字體和大小
			fill_color = "rgb(0, 160, 230)" // 字體顏色
		};
	}

	// 繪製多邊形
	private void draw_line() {
		// 繪製由四個點構成的多邊形
		_line = new CanvasPolyline(_root, true, 4, // 閉合，4 個點
			30.0, 140.0,  // 第一個點
			60.0, 250.0,  // 第二個點
			150.0, 260.0, // 第三個點
			220.0, 200.0) {
			stroke_color = "rgb(0, 160, 230)" // 線的顏色
		};
	}

	// 繪製矩形
	private void draw_rect() {
		_rect = new CanvasRect(_root, 40, 300, 160, 100) { // 位置(40,300)，長160寬100的矩形
			line_width = 2, // 線寬
			stroke_color = "rgb(0, 160, 230)", // 邊框顏色
			fill_color = "rgb(255, 160, 90)" // 填充顏色
		};
	}

	// 繪製橢圓
	private void draw_ellipse() {
		_ellipse1 = new CanvasEllipse(_root, 120, 460, 50, 20) { // 位置(120,400)
			line_width = 2,
			stroke_color = "rgb(0, 160, 230)"
		};
		_ellipse2 = new CanvasEllipse(_root, 120, 540, 40, 40){
			line_width = 2,
			stroke_color = "rgb(0, 160, 230)",
			fill_color = "rgb(255, 160, 90)"
		};
	}

	// 繪製網格
	private void draw_grid() {
		// 位置(20, 600)，長200，寬200，橫向間隔20，垂直間隔20，第一條垂直線距離左邊框的距離10，
		// 第一條橫線距離上邊框距離10
		_grid = new CanvasGrid(_root, 20.0, 600.0, 200.0, 200.0,
			20.0, 20.0, 10.0, 10.0) {
			horz_grid_line_width = 4.0, // 橫線寬度
			horz_grid_line_color = "rgb(0, 160, 230)", // 橫線顏色
			vert_grid_line_width = 2.0, // 垂直線寬
			vert_grid_line_color = "red", // 垂直顏色
			border_width = 3.0, // 邊框線寬
			border_color = "white", // 邊框顏色
			fill_color = "blue"
		};
	}

    public static int main(string[] args) {
        Application app = new Application();
        return app.run(args);
    }
}

事件處理

using Goo;
using Gdk;

// 動畫完成時
void on_animation_finished(CanvasItem item, bool stopped) {
	print("animation finished\n");
}

// 鼠標按下事件
bool on_button_press_event(CanvasItem item,
                                            CanvasItem target,
                                            EventButton event) {
	print("press event\n");
	return true;
}

// 鼠標釋放事件
bool on_button_release_event(CanvasItem item,
                                            CanvasItem target,
                                            EventButton event) {
	print("release event\n");
	return true;
}

// 鼠標進入時通知
bool on_enter_notify_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("enter notify event\n");
	return true;
}

// 
bool on_focus_in_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("foucs in event\n");
	return true;
}

bool on_focus_out_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("focues out event\n");
	return true;
}

bool on_grab_borken_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("grab borken event\n");
	return true;
}

bool on_key_press_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("key press event\n");
	return true;
}

bool on_key_release_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("key release event\n");
	return true;
}

// 鼠標離開通知
bool on_leave_notify_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("leave notify event\n");
	return true;
}

// 鼠標移動事件
bool on_motion_notify_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("motion notify event, x: %lf, y: %lf\n",
		event.button.x, event.button.y);
	return true;
}

bool on_query_tooltip(CanvasItem item,
	double x,
	double y,
	bool keyboard_mode,
	Gtk.Tooltip tooltip) {
	print("query tooltip, x: %lf, y: %lf\n", x, y);
	return true;
}

// 鼠標滾輪滾動事件
bool on_scroll_event(CanvasItem item,
	CanvasItem target,
	Event event) {
	print("scroll event\n");
	return true;
}

// 窗口關閉處理函數
bool on_delete_event() {
	Gtk.main_quit();
	return true;
}

// 連接信號
void connect_signals(CanvasItem item) {
	item.animation_finished.connect(on_animation_finished);
	item.button_press_event.connect(on_button_press_event);
	item.button_release_event.connect(on_button_release_event);
	item.enter_notify_event.connect(on_enter_notify_event);
	item.focus_in_event.connect(on_focus_in_event);
	item.focus_out_event.connect(on_focus_out_event);
	item.grab_broken_event.connect(on_grab_borken_event);
	item.key_press_event.connect(on_key_press_event);
	item.key_release_event.connect(on_key_release_event);
	item.leave_notify_event.connect(on_leave_notify_event);
	item.motion_notify_event.connect(on_motion_notify_event);
	item.query_tooltip.connect(on_query_tooltip);
	item.scroll_event.connect(on_scroll_event);
}

int main(string[]args) {

	// 初始化 Gtk
	Gtk.init(ref args);

	// 創建主窗口
	Gtk.Window window = new Gtk.Window();
	window.set_default_size(640, 600);
	window.show();
	window.delete_event.connect(on_delete_event);

	// 創建畫布
	Canvas canvas = new Canvas();
	// 設置畫布大小
	canvas.set_size_request(600, 450);

	window.add(canvas);

	CanvasItem root = canvas.get_root_item();

	// 添加一些簡單的 items

	// 創建一個矩形，位置(100, 100)，長寬 400
	CanvasRect rect_item = new CanvasRect(root, 100, 100, 400, 400) {
		line_width = 10.0, // 線寬 10
		radius_x = 20.0,
		radius_y = 20.0,
		stroke_color = "yellow", // 邊框顏色
		fill_color = "red" // 填充顏色
	};

	// 點擊信號
	connect_signals(rect_item);

	// 創建文本，位置(300, 300)
	CanvasText text_item = new CanvasText(root, "Hello World", 300, 300, -1,
						  CanvasAnchorType.CENTER) {
		font = "Sans 24"
	};

	// 順時鐘旋轉45度，旋轉原點(300, 300)
	text_item.rotate(45, 300, 300);

	canvas.show();

	Gtk.main();

	return 0;
}

由於操作方法和順序不一樣，最終打印結果也不相同，這裏就不給輸出示例了。