Quadratic Curve Segments

11 Jan 20242 minutes to read

Quadratic curve segments are used to create curve segments as quadratic shape and the curves are configurable with middle control point.

How to create the Quadratic Curve Segments

To create a quadratic curve line, you should specify the segment as QuadraticCurveSegment.

XAML

<!--Initialize the Sfdiagram-->
<syncfusion:SfDiagram x:Name="diagram">
    <syncfusion:SfDiagram.Connectors>
        <!--Initialize the Connector Collection-->
        <syncfusion:ConnectorCollection>
            <!--create the connector with qudratic curve segments-->
            <syncfusion:ConnectorViewModel SourcePoint="1000,100" TargetPoint="1100,200">
                <syncfusion:ConnectorViewModel.Segments>
                    <syncfusion:ConnectorSegments>
                        <!--Specify the segment as cubic curve segment-->
                        <syncfusion:QuadraticCurveSegment/>
                    </syncfusion:ConnectorSegments>
                </syncfusion:ConnectorViewModel.Segments>
            </syncfusion:ConnectorViewModel>
        </syncfusion:ConnectorCollection>
    </syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>

C#

//Initialize the SfDiagram
SfDiagram diagram = new SfDiagram();
//create the connector with qudratic bezier segments
ConnectorViewModel qudraticBezierConnector = new ConnectorViewModel()
{
    SourcePoint = new Point(1000, 100),
    TargetPoint = new Point(1100, 200),
    Segments = new ObservableCollection<IConnectorSegment>()
    {
        //Specify the segment as cubic curve segment
        new QuadraticCurveSegment()
    }
};

//Adding connector into Collection
(diagram.Connectors as ConnectorCollection).Add(qudraticBezierConnector);

How to edit the quadratic curve segments

Quadratic bezier segments are annotated with single thumb to represent the control point. Control point of the curve can be configured by clicking and dragging the control point thumb.

NOTE

Quadratic bezier segments also supports to have multiple quadratic bezier segments and BezierSmoothness as Cubic bezier segments.

See Also

How to detect or get notification when editing the thumbs of connector?