Graph组件使用漫游平移交互,支持拖拽平移,滚轮缩放,移动设备上支持触控平移,双指缩放等功能,且支持惯性动画效果,下面是相关接口函数:

  • #translate(tx, ty, byAnimate) - 平移
  • #translateTo(tx, ty, scale, byAnimate) - 设置偏移量和缩放比例
  • #zoomAt(scale, px, py, byAnimate) - 按指定点缩放
  • #zoomIn(px, py, byAnimate) - 放大
  • #zoomOut(px, py, byAnimate) - 缩小
  • #zoomToOverview(byAnimate, maxScale) - 缩放到整个窗口
  • #centerTo(cx, cy, scale, byAnimate) - 将指定点移动到组件中心
  • #moveToCenter(scale, byAnimate) - 整个画布移动到组件中心

示例

平移画布中心点为(-100, -50)

var graph = new Q.Graph(canvas);
 
var hello = graph.createNode("Hello", -100, -50);
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
 
graph.callLater(function(){graph.centerTo(-100, -50, 1.5);});

运行效果

画布整体向右下角移动,节点‘Hello’到了组件的中心位置