Graph的坐标系统
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);
}