Multiple Segments in Blazor Diagram Component
19 Dec 20233 minutes to read
How to create multiple segments
Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to the connector.Segments collection. The following code example illustrates how to create a connector with multiple segments.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector connector1 = new Connector()
{
ID = "Connector1",
Type = ConnectorSegmentType.Orthogonal,
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint() { X = 300, Y = 200 },
Segments = new DiagramObjectCollection<ConnectorSegment>()
{
new OrthogonalSegment
{
Length = 100,
Type = ConnectorSegmentType.Orthogonal,
Direction = Direction.Right
},
new OrthogonalSegment
{
Length = 100,
Type = ConnectorSegmentType.Orthogonal,
Direction = Direction.Bottom
}
},
};
//Add the connector into connectors's collection.
connectors.Add(connector1);
}
}
You can download a complete working sample from GitHub
- Similarly, you can create multiple segments for all the connector type.