Clutter Actor 的位置与尺寸约束

Garfileo posted @ 2011年7月22日 16:41 in Clutter 笔记 with tags clutter constraint , 4008 阅读

为了更好的解决 Actor 之间的相对定位问题，Clutter 提供了位置与尺寸约束的机制。例如对于 "stage" 和 "rectangle" 这两个 Actor 而言，可以通过位置约束，使得 "rectangle" 居于 "stage" 中心的位置，而无论 "stage" 的尺寸如何变化。Clutter 提供了 Align、Bind、Path 和 Snap 四种约束，也可以按照 [1] 自定义约束。文献 [2] 中已经给出了 Bind 约束与 Align 约束的示例，揭示了 Clutter 位置与尺寸约束功能的基本用法。本文主要讲述如何将 Clutter 的位置与尺寸约束通过 JSON 文本的形式记载于 Clutter 场景图中。

首先看下面的 JSON 文本：

[
    {
	"id" : "stage",
	"type" : "ClutterStage",
	"title" : "Hello Constraints!",
	"width" : 400,
	"height" : 200,
	"color" : "#21435eff",
	"children" : [ "rectangle" ]
    },
    {
        "id" : "rectangle",
        "type" : "ClutterRectangle",
        "color" : "#ccccccff",
        "border-width" : 4,
        "border-color" : "#a00000ff",
        "constraints" : [
            {
                "type" : "ClutterBindConstraint",
                "coordinate" : "width",
                "offset" : -100.0,
                "source" : "stage"
            },
            {
                "type" : "ClutterBindConstraint",
                "coordinate" : "height",
                "offset" : -100.0,
                "source" : "stage"
            },
            {
                "type" : "ClutterAlignConstraint",
                "align-axis" : "x-axis",
                "factor" : 0.5,
                "source" : "stage"
            },
            {
                "type" : "ClutterAlignConstraint",
                "align-axis" : "y-axis",
                "factor" : 0.5,
                "source" : "stage"
            }
        ]
    }
]

上述 JSON 文本定义了 stage 和 rectangle 两个 Actor，通过 Bind 约束将 rectangle 的宽度和高度分别与 stage 的宽度与高度的偏差为 100px，并通过 Align 约束将 rectangle 定位于 stage 的中央。JSON 文本中的其他属性值皆可从 [3] 中查到，便不再赘述。

对应的 C 源码如下：

#include <clutter/clutter.h>
 
int
main(int argc, char *argv[])
{
        if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
                return 1;
 
        gchar *filename = "bin.json";
        ClutterScript *ui = clutter_script_new ();
        clutter_script_load_from_file (ui, filename, NULL);
 
        ClutterActor *stage;
        clutter_script_get_objects (ui, "stage", &stage, NULL);
        clutter_stage_set_user_resizable (CLUTTER_STAGE (stage), TRUE);

        clutter_script_connect_signals (ui, NULL);
        
        clutter_actor_show_all (stage);
 
        clutter_main ();
         
        return 0;
}

上述代码中，clutter_stage_set_user_resizable() 可将 stage 设置为用户可以交互拖曳窗口边框从而更改 stage 的尺寸。要注意我们在 JSON 文本中为 stage 设置了 "destroy" 信号及其处理器 "clutter_main_quit()"，因此需要使用 clutter_script_connect_signals() 将信号与处理器连接起来。

试验结果如下图：