Graph#addCustomInteraction(interaction)

Graph#addCustomInteraction(interaction)

实际应用中通常保留默认交互模式，在其基础上增加定制交互动作，如果只是处理单一事件，可以使用前面提到的Graph#on***方法，如果是复杂的动作，则可以添加定制交互，给组件设置一个定制好的交互器

示例

监听鼠标移动事件，实现图元高亮显示的效果

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);
 
var currentElement;
var highlightColor = '#FFDB19';
function unhighlight(element){
    element.setStyle(Q.Styles.BACKGROUND_COLOR, null);
    currentElement.setStyle(Q.Styles.PADDING, null);
}
function highlight(element){
    if(currentElement == element){
        return;
    }
    if(currentElement){
        unhighlight(currentElement);
    }
    currentElement = element;
    if(!currentElement){
        return;
    }
    currentElement.setStyle(Q.Styles.BACKGROUND_COLOR, highlightColor);
    currentElement.setStyle(Q.Styles.PADDING, new Q.Insets(5));
}
 
graph.addCustomInteraction({
    onmousemove: function(evt, graph){
        var ui = graph.getUIByMouseEvent(evt);
        if(!ui){
            graph.cursor = null;
            highlight(null);
            return;
        }
        graph.cursor = "pointer";
        highlight(ui.data);
    }
});

运行效果

鼠标滑过节点时，显示黄色背景色：