平移缩放操作
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’到了组件的中心位置