轻量高效的拓扑图组件
zh

Qunee Developer Guide

Graph的坐标系统

Graph没有左上角的坐标限制,支持负坐标,支持矢量缩放,此外画布范围采用了导航面板的方式(使用上下左右四个按钮标示图元范围),避免滚动条对界面的干扰,使得漫游交互更加顺畅。

坐标原点位置

默认画布的初始坐标原点在组件中心点,这意味着(0, 0)坐标的节点将呈现在组件的中心,如果你希望初始坐标原点位于组件左上角,可以设置下面的参数

#originAtCenter

设置左上角为坐标原点

graph.originAtCenter = false;

坐标转换

分画布坐标和逻辑坐标,前者以组件界面左上角为原点,后者为图元的实际坐标属性

示例

监听点击事件,获取鼠标点位置信息,并转换成逻辑坐标

graph.onclick = function(evt){
    var p = graph.globalToLocal(evt);
    var l = graph.toLogical(p.x, p.y);
    Q.log('canvas location: ' + p.x + ', ' + p.y);
    Q.log('logical location: ' + l.x + ', ' + l.y);
}

ScreenShot 2014-06-05 at 下午4.38.34.png