• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Mode Selection
Theme Selection
*Translated by Google Translator.
Essential Studio
All Controls

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

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


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.