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 簡潔的設計所賜，就這樣完成了 :-)