每个交互器实现了一种功能,一组交互器协同工作,构成一种交互模式,比如默认交互模式包含平移交互器,节点拖拽交互器,点选交互器,文本提示交互器等等,我们可以组合不同的交互器,满足交互需求。

默认提供以下几种交互模式:

  • Consts.INTERACTION_MODE_DEFAULT - 默认交互模式
  • Consts.INTERACTION_MODE_SELECTION - 框选交互模式
  • Consts.INTERACTION_MODE_VIEW - 查看模式
  • Consts.INTERACTION_MODE_ZOOMIN - 放大交互模式
  • Consts.INTERACTION_MODE_ZOOMOUT - 缩小交互模式
  • Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE - 创建简单连线交互模式
  • Consts.INTERACTION_MODE_CREATE_EDGE - 创建连线交互模式
  • Consts.INTERACTION_MODE_CREATE_SHAPE - 创建多边形交互模式
  • Consts.INTERACTION_MODE_CREATE_LINE - 创建线条交互模式

切换交互模式

通过#interactionMode属性来切换当前交互模式

示例

切换到框选交互模式

graph.interactionMode = Q.Consts.INTERACTION_MODE_SELECTION;

定制交互模式

也可以完全定制自己的交互模式,需要两步:首先注册一种新的名称的交互模式,比如”VIEW_MODE”,然后将这个名称设置给网络图组件

示例,定义删除交互模式,实现点击删除功能

    //custom interaction mode
    Q.Consts.INTERACTION_MODE_DELETE_NODE = 'interaction.mode.delete';
    Q.Defaults.registerInteractions(Q.Consts.INTERACTION_MODE_DELETE_NODE, [Q.PanInteraction, Q.WheelZoomInteraction, Q.SelectionInteraction, {
        onclick: function(evt, graph){
            graph.removeSelectionByInteraction(evt);
        }
    }])
    var graph = new Q.Graph('canvas');
    var hello = graph.createNode("Hello", -100, -50);
    hello.image = Q.Graphs.server;
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("Hello\nQunee", hello, qunee);
    edge.setStyle(Q.Styles.EDGE_LINE_DASH, [3,4]);
    graph.interactionMode = Q.Consts.INTERACTION_MODE_DELETE_NODE;

其他交互相关的属性和方法

  • #enableTooltip :Boolean - 是否显示提示文本
  • #enableWheelZoom :Boolean - 是否使用鼠标滚轮缩放
  • #enableRectangleSelectionByRightButton :Boolean - 是否启用右键框选功能