多比矢量图开发手册（六）-Web高级图元编程

多比矢量图高级图元编程

自定义图元的可编辑属性

自定义数据对象是顶点或连线表示的后台数据。它可以是图形和形状相关的数据，也可以是元素对应的后台业务数据。例如，一个节点，代表部门经理，而部门经理的身高，年龄等业务逻辑数据就可存储在自定义数据对象中。自定义数据对象可以是字符串，也可以是更复杂的javascript对象。

自定义数据非常简单， 例如

sa.onready = function(){

                var cld = sa.getShapeByPath("Cloud-0");

                cld.yourdata = "王经理";

}

你也可以定义复杂的数据类型，和javascript的语法一样。例如：

sa.onready = function(){

                var cld = sa.getShapeByPath("Cloud-0");

                cld.yourdata = {

                    name:"王经理",

                    age:50,

                    salary: "50万"

                };

}

定义了数据以后，我们就可以使用cld.yourdata来取得。一个比较有意思的需求是，我们如何在属性编辑器中看到我们自定义的数据，并且让他持久化下来。（保存到数据库，XML中等等）

这就需要我们覆盖getUserProperties函数，变成以下的样子：

getUserProperties: function() {

    return [{

                    title: "我的数据",

                    name: "yourdata",

                    type: "string"

    }];

},

如果我们还需要用户定义宽度，高度，颜色等， 我们可以先获得基类的属性，再把我们的数据添加上去。

getUserProperties: function() {

    //将基类的数据，和我们的数据合并在一起

    return jQuery.merge(

        //调用基类的方法，获取基类的用户数据

            this.base(),

            [{

                    title: "我的数据",

                    name: "yourdata",

                    type: "string"

            }]

    );

}