Bezier Segments interaction in Blazor Diagram Component

12 Nov 20244 minutes to read

How to interact with the bezier segments efficiently

When interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the BezierConnectorSettings.Smoothness property of the Connector class.

BezierSmoothness value Description Output
SymmetricDistance Both control points of adjacent segments will be at the same distance when one of them is editing. SymmetricDistance
SymmetricAngle Both control points of adjacent segments will be at the same angle when one of them is editing. SymmetricAngle
Both Both control points of adjacent segments will be at the same angle and same distance when one of them is editing. Symmetric
None Segment’s control points interact independently from each other. SymmetricNone

How to show or hide the bezier segment’s control points

By using the BezierConnectorSettings.ControlPointsVisibility property of the Connector class, you can enable or disable the visibility of the bezier segment’s control points.

ControlPointsVisibility value Description Output
None Hides all control points of the bezier connector. None
Source Shows control points of the source segment and hides all other control points in a bezier connector. Source
Target Shows control points of the target segment and hides all other control points in a bezier connector. Target
Intermediate Shows control points of the intermediate segments and hides all other control points in a bezier connector. Intermediate
All Shows all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. All
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors"></SfDiagramComponent>
@code {
    //Define the diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
        Connector connector1 = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint() { X = 700, Y = 200 },
            TargetPoint = new DiagramPoint() { X = 1000, Y = 400 },
            Segments = new DiagramObjectCollection<ConnectorSegment>()
            {
                new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 750, Y = 250}},
                new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 900, Y = 350}}
            },
            Type = ConnectorSegmentType.Bezier,
            BezierConnectorSettings = new BezierConnectorSettings() 
            {
                //Define the visibility of the control points. 
                ControlPointsVisibility = ControlPointsVisibility.Intermediate 
            },
        };
        connectors.Add(connector1);
    }
}

You can download a complete working sample from GitHub.