How to Perform Zoom and Pan in Vue Diagram?
In Syncfusion® Vue diagram, there are several ways to zoom and pan the diagram. Here are some of the methods:
Zooming using the zoomTo method
The zoomTo method can be used to scale the diagram control by a specified factor. It accepts arguments such as zoomFactor, focusPoint, and type. The zoomFactor argument determines the degree of zooming, allowing you to zoom in or zoom out by a specified amount. The focusPoint argument specifies the point on the diagram that should be centered after zooming. This can be useful for highlighting specific areas of the diagram. Finally, the type of argument lets you specify whether to zoom in or zoom out. Here’s an example code sample:
let zoomInOptions= {
type: 'ZoomIn',
zoomFactor: 0.2,
focusPoint: { x: 250, y: 250 }
};
diagramInstance.zoomTo(zoomInOptions);
diagramInstance.dataBind();
Panning using diagram tool
The ZoomPan tool allows users to pan around the diagram using mouse or touch gestures. This tool provides a convenient way to navigate through the diagram and explore its contents. To enable this tool, set the tool property of the diagram object to DiagramTools.ZoomPan, as shown below:
public enableZoomPan() {
diagramInstance.tool = DiagramTools.ZoomPan;
}
Once the ZoomPan tool is enabled, users can pan around the diagram by dragging the diagram surface with the mouse or by using touch gestures on a touch-enabled device.
Zooming using the Mouse Wheel
Another way to zoom in and out of the diagram is by using the mouse wheel. This method is a quick and convenient way to zoom in and out without having to use any additional tools or gestures. To zoom in, hold down the Ctrl key and scroll up the mouse wheel. Conversely, to zoom out, hold down the Ctrl key and scroll down the mouse wheel.
Zooming and Panning using Touch Gestures
On a touch-enabled device, you can use touch gestures to zoom and pan the diagram. To zoom in and out of the diagram, you can use the pinch gesture, where you pinch your fingers together to zoom out and spread them apart to zoom in. To pan around the diagram, you can use the swipe gesture with two fingers.
Zooming using Keyboard Shortcuts:
Using keyboard shortcuts is a quick and easy way to zoom the diagram without having to use the mouse or touchpad. To zoom in, use the Ctrl + Plus key combination, and to zoom out, use the Ctrl + Minus key combination.
Sample:
Conclusion
I hope you enjoyed learning about how to perform zoom and pan in Vue Diagram.
You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
