Drawing curved Elbow Connectors

[matthewcrews]

What would be the most effective way to draw curved elbow connectors on a Canvas? Straight elbow connectors like the following are just two blocks connective by three lines and an arrow symbol:

What I want to do is the following, though:

I am unsure of the most straightforward way to do that, though. Do I end up having to use SVGs?

Right now I'm just trying to recreate the example from the AvaloniaUI here:
https://docs.avaloniaui.net/docs/getting-started/programming-with-avalonia/graphics-and-animations

Which includes a couple of orange shapes with straight lines and curves. I can't figure out how to draw them as just lines and not filled in shapes, though.

I can't figure out how to get the outline to be orange in this example from the AvaloniaUI page:

Path.create [
    Path.left 30.0
    Path.top 250.0
    Path.stroke "orange"
    Path.data "M 0,0 c 0,0 50,0 50,-50 c 0,0 50,0 50,50 h -50 v 50 l -50,-50 Z"
]

My preference would be able to more directly translate this instead of needing to use Path.data since that has to interpret a string:

    <Path Fill="OrangeRed" Canvas.Left="180" Canvas.Top="250">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,0" IsClosed="True">
                    <QuadraticBezierSegment Point1="50,0" Point2="50,-50" />
                    <QuadraticBezierSegment Point1="100,-50" Point2="100,0" />
                    <LineSegment Point="50,0" />
                    <LineSegment Point="50,50" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

My intuition from working with the API would lead me to write the following to translate that last example:

Path.create [
    Path.left 180.0
    Path.top 250.0
    Path.data [
        PathGeometry.create [
            PathFigure.create [
                PathFigure.startPoint (0.0, 0.0)
                PathFigure.isClosed true
                PathFigure.points [
                    QuadraticBezierSegment.create [
                        Point (50.0, 0.0)
                        Point (50.0, -50.0)
                    ]
                    QuadraticBezierSegment.create [
                        Point (100.0, -50.0)
                        Point (100.0, 0.0)
                    ]
                    LineSegment.create [
                        Point (50.0, 0.0)
                    ]
                    LineSegment.create [
                        Point (50.0, 50.0)
                    ]
                ]
            ]
        ]
    ]
]

But that doesn't work with the API because several of those element only support init instead of create.

[JaggerJo]

Should be super easy to make this work, we're just missing the bindings.

Happy to take a PR for this.

Example of what's missing:

[<AutoOpen>]
module PathGeometry =
    open Avalonia.Media
    open Avalonia.Controls.Shapes
    open Avalonia.FuncUI.Builder
    open Avalonia.FuncUI.Types

    let create (attrs: IAttr<Path> list): IView<Path> =
        ViewBuilder.Create<Path>(attrs)

    type PathGeometry with

        static member figures<'t when 't :> PathGeometry>(figures: PathFigure list) : IAttr<'t> =
            let figureList = PathFigures()
            figureList.AddRange(figures)
            
            AttrBuilder<'t>.CreateProperty<PathFigures>(
                PathGeometry.FiguresProperty,
                figureList,
                ValueNone
            )

        static member fillRule<'t when 't :> PathGeometry>(fillRule: FillRule) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<FillRule>(PathGeometry.FillRuleProperty, fillRule, ValueNone)
           

[JaggerJo]

There are other ways of archiving the same result that might also be interesting. The best/fastest one IMHO would be:

Create a custom Shape control that renders the arrow (via AvaloniaUI's Drawing API or by using a custom drawing operation)