常用属性与方法

延迟调用 - callLater(call, scope, delay)

Graph组件创建后，并不会马上生效与绘制，而要等到Javascript的下一次绘制线程中处理，这意味着图元的显示大小，画布范围与尺寸只能延迟获取

示例，通过callLater() 获取画布范围以及节点大小

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);
 
graph.callLater(function(){
    Q.log('graph bounds: ' + graph.bounds);
    Q.log('hello node bounds: ' + graph.getUIBounds(hello));
});

打印结果：

graph bounds: -125.5 , -75 , 256 , 167.4 

hello node bounds: -125.5 , -75 , 51 , 68.4 

示例，延迟调用自动布局，保证布局前已经计算好了组件大小

var layouter = new Q.TreeLayouter(graph);
graph.callLater(function(){
    layouter.doLayout();
    graph.zoomToOverview();
}) 

获取鼠标点位置的组件 - #hitTest(evt) → {BaseUI}

示例，使用hitTest方法判断鼠标是否点击在文本标签上

graph.onclick = function(evt) {
    var target = graph.hitTest(evt);
    if(target instanceof Q.LabelUI){
        Q.log(target.data);
    }
}

运行结果，鼠标点击图元名称，控制台打印出文本信息

更新组件视口，重绘画布 - updateViewport()

通常将Graph组件放置在一个DIV元素中，这个DIV我们称之为画布容器，Graph组件会铺满这个容器，通过设置CSS和HTML属性，可能导致这个DIV大小发生变化，这时候Graph组件的大小需要重新调整，并重绘画布

示例

按键盘字母F键，设置Graph组件的CSS样式，使之铺满浏览器窗口

var html = graph.html;
graph.html.style.backgroundColor = '#EEE';
 
graph.onkeydown = function(evt) {
    if(evt.keyCode != 70){
        return;
    }
    if(!graph.oldCSS || html.style.position != 'fixed'){
        graph.oldCSS = {
            position: html.style.position,
            width: html.style.width,
            height: html.style.height,
            left: html.style.left,
            top: html.style.top
        };
        html.style.position = 'fixed';
        html.style.width = window.innerWidth + 'px';
        html.style.height = window.innerHeight + 'px';
        html.style.left = '0px';
        html.style.top = '0px';
        html.style.zIndex = 1000;
    }else{
        html.style.position = graph.oldCSS.position;
        html.style.width = graph.oldCSS.width;
        html.style.height = graph.oldCSS.height;
        html.style.left = graph.oldCSS.left;
        html.style.top = graph.oldCSS.top;
    }
    graph.updateViewport();
}