Example of Drawing Tools in ASP.NET Core Diagram Control

This sample visualizes how to build a diagram interactively using drawing tools. Continuous draw option, snapping, and undo/redo support are enabled to easily draw diagrams. Rulers, gridlines, and snapping options are enabled to easily align objects.

DEMO
SOURCE
Properties
Shapes
Connector

This example shows how to draw shapes and connections interactively. In addition to that, rulers, gridlines, and snapping options are enabled to assist drawing. The tool property can be used to enable drawing. Add DrawOnce or ContinousDraw option to the tool property of the diagram. The drawingObject property can be used to define a shape/connector to be drawn.

Few shape and connector templates are added in the palette. To draw basic shapes and connectors, click the templates in the palette. For polygon shapes, a corner/point will be added to the polygon for each mouse left button click. Drawing will be completed either on mouse right button click or double click.

The diagram component’s features are segregated into individual feature-wise modules. To enable undo and redo support, inject UndoRedo module using Diagram.Inject(UndoRedo) method.

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