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

坐标原点位置

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

#originAtCenter

设置左上角为坐标原点

graph.originAtCenter = false;

坐标转换

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


  • #globalToLocal(evt) → {Point} - 根据鼠标事件对象,计算鼠标点相对组件的位置
  • #toCanvas(x, y) → {Q.Point} - 逻辑位置转换成画布坐标
  • #toLogical(x, y) → {Q.Point} - 画布坐标转换成逻辑位置

 

示例

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

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