本文主要是介绍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函数原型信息。
这篇关于Clutter调用底层原理剖析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
