Clutter调用底层原理剖析

1 初识Clutter

按照Clutter官网所述，Clutter是一个支持2D曲面的3D动画的GUI库,是一个C API集合。目前版本Clutter1.8.0-stable release，http://download.gnome.org/sources/clutter/1.8。

2 编程在Gjs

const Clutter = imports.gi.Clutter;

正是通过这条语句在Gjs编程中导入路Clutter模块，使得Gjs可以访问底层基于C语言实现的Clutter lib。

2.1 基本Class

clutter的核心概念是：stage(画布，舞台)和actor(演员)。莎士比亚说“全世界是一座舞台，所有的男人女人不过是演员”，这句话很好的表现了这点。画布相当于一个window是actor的舞台。Clutter是一种封装，封装就会有container。所以clutter程序都需要创建一个stage，它是最顶层的对象，也是一个container(容器)，让其他的actor在其上面表演。actor们本身都是2D对象，是平面的，不过clutter允许我们对这些actor在3D空间进行操作，比如绕着x，y，z轴旋转。

2.2 简单编程示例（C到Gjs）

程序实现一个矩形中嵌套一个小矩形，显示文字,并接受mouse事件。

int main(int argc,char **argv)

{

ClutterColor stage_color ={0x00,0x00,0x00,0xff};

clutter_init (&argc,&argv);

ClutterActor *stage = clutter_stage_get_default();

clutter_actor_set_size(stage,200,200);

clutter_stage_set_color(CLUTTER_STAGE(stage),&stage_color);

ClutterActor *actor= clutter_rectangle_new();

clutter_actor_set_size(actor,100,100);

clutter_container_add_actor(CLUTTER_CONTAINER(stage),actor);

clutter_actor_set_position (actor,50,50);

ClutterColor color_color={0xff,0xff,0xff,0xff};

ClutterActor *label = clutter_text_new_full ("Sans 12","Alex_Test",&color_color);

clutter_actor_set_size (label,50,20);

clutter_actor_set_position (label,20,160);

clutter_container_add_actor (CLUTTER_CONTAINER (stage),label);

clutter_actor_set_scale(actor,0.5,0.5);

clutter_actor_set_scale(actor,0.5,0.5);

clutter_actor_show(stage);

g_signal_connect (stage,"button-press-event",

G_CALLBACK(on_stage_button_press),NULL);

clutter_main();

return EXIT_SUCCESS;

}

使用Gjs编程，就需要改变Mothod，使用Gjs环境下的Clutter编程。方法类的调用，可以通过Clutter-1.0.gir查阅（详见下文）。

<class name="Timeline"

c:symbol-prefix="timeline"

c:type="ClutterTimeline"

version="0.2"

parent="GObject.Object"

glib:type-name="ClutterTimeline"

glib:get-type="clutter_timeline_get_type"

glib:type-struct="TimelineClass">

2.3 ClutterTimeline

　clutter除了可以让我们在3D空间操作2D的actor之外，最有特色的就是可以使用时间线。

以下是改动DockBar js文件中用于隐藏Bar的代码：

_hideDock: function (){

this._timeline = new Clutter.Timeline({ duration: 200 });

this._timeline.start();

this._timeline.connect('new-frame', Lang.bind(this,

function(timeline, frame) {

this._onHideNewFrame(frame);

}));

hideDock=true;

},

_onHideNewFrame : function(frame) {

let monitor = global.get_primary_monitor();

this._time = this._timeline.get_elapsed_time();

this.bin.set_position ((-this.actor.width)*(this._time/200)+1,monitor.height*0.122);

},

3 附录

关于clutter导入细节以及C到js的Clutter方法查询参考。

3.1 lib导入到Gjs(Clutter-1.0 version)

两条路径：

.typelib path：/usr/lib/girepository-1.0/

.gir path:/usr/share/gir-1.0/

GI(GObject Introspection)可以将API的信息描述成XML，再parse成typelib格式，即binary格式，方便runtime时使用。正是通过这一过程，GI使得基于GObject的native lib能轻易porting到script language。

3.2 GNOME 库被 GI 化

现在，GNOME 桌面的大部分程序库皆已 GI 化，通常可在 /usr/lib/girepository-1.0 目录中看到它们，只要在该目录中的出现的 typelib 文件，其对应的库便可在 gjs 通过 imports.gi 对象进行连接。如想查询API在js中使用的方法，可以使用command：

[alex@alex girepository-1.0]$ g-ir-generate Clutter-1.0.typelib | grep timeline

或者 可以从/usr/share/gir-1.0/对应的.gir文件查询C函数原型信息。