• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Zooming and Panning in ASP.NET Core Diagram Control

This sample illustrates how to zoom and pan in the diagram.

DEMO
SOURCE

This example explains zooming, panning, reset, fit to page, bring into view, and bring to center.

The fitToPage method adjusts the zoom level of a diagram so that all its content is visible within the viewport.

The bringIntoView method brings the specified rectangular or bounds region into the diagram viewport.

The bringToCenter method brings the specified rectangular region of the diagram content to the center of the viewport. You can zoom in and out using the zoom method, and reset the zoom and scroller offsets to default values using the reset zoom method.

In this sample, use pan, reset,zoomIn , and ZoomOut options to pan, reset the zoom and zoomin/out the diagram.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab