Jserv's blog

WebKit/Clutter 快速入門

發表 [透過 OpenGL 作 WebKit 網頁描繪] 一文後，網友來信提及這感覺「不夠具體」，看不出 OpenGL 的效果，於是，我改成 3D 版本的 web browser，執行畫面如下：

看起來就絢麗多了，當滑鼠點壓網頁時，會作 180 度的旋轉，上圖即是翻轉中的效果。這樣的程式，從零到有，需要多少行呢？其實就是把之前的程式碼，追加幾行程式罷了，程式碼列表如下： [test-webkit2.c]

#include <stdlib.h>
#include <stdio.h>
#include <clutter/clutter.h>
#include <webkit/webkit.h>

static WebkitAdjustment *hadj, *vadj;
 
static gboolean
on_button_release (ClutterActor *rect,
                            ClutterEvent *event, gpointer data)
{
	ClutterTimeline  *timeline = (ClutterTimeline*) data;
	gint x = 0, y = 0;

	clutter_event_get_coords (event, &x, &y);
	clutter_timeline_start (timeline);

	return TRUE;
}

int main (int argc, char *argv[])
{
	guint stageWidth, stageHeight, stage_depth;
	guint buttonWidth, buttonHeight;
	gfloat fovy, aspect, zNear, zFar;
	ClutterActor *stage;
	ClutterColor stage_color = { 0xcc, 0xcc, 0xcc, 0xff };
	ClutterColor rect_color = { 0x33, 0x22, 0x22, 0xff };

	WebKitWebView *hand;

	if (argc < 2) return -1;

	clutter_init (&argc, &argv);

	hadj = webkit_adjustment_new (0,0,0,0,0,0);
	vadj = webkit_adjustment_new (0,0,0,0,0,0);
	hand = webkit_web_view_new (640, 480);
	webkit_web_view_set_scroll_adjustments (hand, hadj, vadj);

	stage = clutter_stage_get_default();
	clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
	clutter_stage_set_use_fog (CLUTTER_STAGE (stage), TRUE);
	clutter_stage_set_fog (CLUTTER_STAGE (stage), 1.0, 10, -50);

	clutter_stage_get_perspective (CLUTTER_STAGE (stage),
			&fovy, &aspect, &zNear, &zFar);

	clutter_actor_get_size (CLUTTER_ACTOR (stage),
                        &stageWidth, &stageHeight);
	stage_depth = zFar;
	buttonWidth = stageWidth * 3 / 4;
	buttonHeight = stageHeight * 3 / 4;

	ClutterTimeline *timeline = clutter_timeline_new (60, 60);

	ClutterBehaviour *rotY = clutter_behaviour_rotate_new (
			clutter_alpha_new_full(timeline,
				CLUTTER_ALPHA_RAMP_INC, NULL, NULL),
			CLUTTER_Y_AXIS,
			CLUTTER_ROTATE_CW,
			0, 180);

	clutter_actor_set_anchor_point (hand,
                        buttonWidth/2, buttonHeight/2);
	clutter_actor_set_size (hand, buttonWidth, buttonHeight);

	clutter_container_add_actor (CLUTTER_CONTAINER (stage), hand);
	webkit_web_view_open (hand, argv[1]);

	clutter_actor_set_position (hand, stageWidth/2, stageHeight/2);

	clutter_behaviour_apply (rotY, hand);

	clutter_stage_set_key_focus (stage, hand);

	clutter_actor_set_reactive (hand, TRUE);
	g_signal_connect (hand, "button-release-event",
			G_CALLBACK (on_button_release), timeline);

	clutter_actor_show (stage);

	clutter_main ();
	return EXIT_SUCCESS;
}

由上可見，除了作必要的初始化、加上 WebKit 這個 Clutter Actor 物件外，就是加上對應於「按鈕」的 callback，這裡指的「按鈕」，就是 WebKit 網頁輸出的畫面，拜 Clutter 簡潔的設計所賜，就這樣完成了 :-)
由 jserv 發表於 April 17, 2008 09:58 AM