基于HTML5的拓扑图编辑器（2）

标签：style   blog   http   color   io   os   ar   数据   2014   

拖拽创建节点

延续之前提供的功能，增加更多可配置选项（可设置节点类型，样式和属性），支持按住shift快捷键，直接拖入到分组内 

新增多种交互模式

创建连线交互

Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge";

Q.Consts.INTERACTION_MODE_CREATE_EDGE = "create.edge";

Q.Consts.INTERACTION_MODE_CREATE_SHAPE = "create.shape";

Q.Consts.INTERACTION_MODE_CREATE_LINE = "create.line";

graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_EDGE;

连线编辑

graph.editable = true;

graph.interactionMode = Q.Consts.INTERACTION_MODE_DEFAULT;

创建多边形

graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_SHAPE;

创建多线段

graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_LINE;

编辑多边形

graph.editable = true;

graph.interactionMode = Q.Consts.INTERACTION_MODE_DEFAULT;

调整宽高

改进了Q.ResizeInteraction

移动拐点

增加了拐点编辑交互器（Q.PointsInteraction），默认编辑状态时，双击多边形进入编辑模式

右键菜单交互

graph.html.oncontextmenu = function(evt){

    Q.stopEvent(evt);

    showMenu(evt, graph);

}

graph.addCustomInteraction({

    onstart: function (evt) {

        menu.hide();

    }

});

数据导入导出

在线示例演示

基于HTML5的拓扑图编辑器（2）

标签：style   blog   http   color   io   os   ar   数据   2014   

原文地址：http://www.cnblogs.com/nosand/p/3965669.html