html5 的属性和方法,Qunee for HTML5 - 中文 : 常用属性与方法

延迟调用 - 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));

});

打印结果：

Icon

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();

}