How can I help you?
Multiple Segments in Blazor Diagram Component
2 Feb 20263 minutes to read
How to Create Connectors with Multiple Segments
Connectors can include a sequence of segment objects. To create a connector with multiple segments, define the segments with ConnectorSegment class and add the segments to the 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.
private 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' collection.
_connectors.Add(connector1);
}
}A complete working sample can be downloaded from GitHub
- Similarly, you can create multiple segments for all the connector type.