Web工控矢量图编辑器

多比的编辑器是使用Extjs编写的，所有的代码在duobee/duobee-ext-editor.js中，如果你熟悉extjs， 你很容易理解编辑器的原理， 如果你不熟悉extjs， 建议你先熟悉一下extjs，因为他现在已经是企业级应用界面的主流了。

 

由于编辑器的页面比较多，下面我们以应用为导向，介绍一下经常要修改设计器的需求如何满足。

改变图元面板

 

在通常的情况下，左边的面板加载了系统默认的所有图元，如下图所示。

 

 但是我们的实际需求是，只需要显示一部分的系统图元，另外需要加载一部分其他的自己定义的图元。

//定义一个模板

var GoogleMapsTemplate = Template.extend({

    //模板的命名空间

    id: "GoogleMaps",

    //模板的标题

    name: "谷歌地图",

    //图元的类名

    shapes:

    [

        //这个图元是GoogleMaps.Map

        {

            name: "Map",

            //图元的显示名字

            title: "道路地图",

            //图元的小图标

            imgsrc: "duobee/images/GoogleMaps/roadmap.png"

        },

        {

            name: "Satellite",

            title: "卫星地图",

            imgsrc: "duobee/images/GoogleMaps/satellite.png"

        }

    ]

});

最后我们需要将图元模板放到系统要加载的模板库中。

//让系统加载我们定义好的模板

Duobee.templates.push(new GoogleMapsTemplate());

Duobee.templates.push(new NetworkTemplate());

Duobee.templates.push(new ConnectorsTemplate());

Duobee.templates.push(new StandardShapesTemplate());

Duobee.templates.push(new CalloutsTemplate());

 

    在上面的代码中，我们可以看到， 系统自带的图元，也是通过Duobee.templates.push的方法得到，如果不希望加载系统的图元模板，直接删除即可。