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

Example of Zooming And Panning in ASP.NET MVC 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.