Translation and Zooming

Graph component uses roaming translation interaction, supporting drag and drop and translation, rolling zooming. Touch translation and double finger zooming and the like functions are supported in mobile devices. Besides, inertial animation effect is also supported. Relevant port functions are showed hereinafter:

• #translate(tx, ty, byAnimate) - translation
• #translateTo(tx, ty, scale, byAnimate) - sets offset volume and zooming ratio
• #zoomAt(scale, px, py, byAnimate) - zooms by appointed point
• #zoomIn(px, py, byAnimate) - zooms in
• #zoomOut(px, py, byAnimate) - zooms out
• #zoomToOverview(byAnimate, maxScale) - zoom to the entire window
• #centerTo(cx, cy, scale, byAnimate) - move the appointed points to the component center
• #moveToCenter(scale, byAnimate) - move the entire canvas to the component center

Example

Translate the canvas center to (-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);});

Operation effect

The canvas will move to the right bottom corner. The node ‘Hello’ moves to the center of component