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函数原型信息。