Is there any APIs can draw arbitrary line by 2 points?

[dvlee1024]

I want to draw crosses between images as below. Is there any APIs can implement?

[DonkeyKongJr]

Hi, have you looked at LineHorizontal() or LineVertical()? We use LineHorizontal to draw a separation line.

[MarcinZiabek]

There are many available approaches, including generating SVG images with pre-calculated and defined line shapes, and then applied on the images using the Layers element.

However, for your specific use case, I suggest the following approach:

// from: https://pictogrammers.com/library/mdi/icon/plus/
const string plusSvg = 
    """
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>plus</title><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
    """;

page.Padding(15).Row(row =>
{
    row.AutoItem().Element(DrawImage);
    row.AutoItem().Element(DrawImage);
    row.AutoItem().Element(DrawImage);
});

void DrawImage(IContainer container)
{
    container.Shrink().Layers(layers =>
    {
        layers.PrimaryLayer().Padding(5).Width(100).Height(200).Image(Placeholders.Image);
        
        AddIcon(x => x.AlignLeft().AlignTop());
        AddIcon(x => x.AlignRight().AlignTop());
        AddIcon(x => x.AlignLeft().AlignBottom());
        AddIcon(x => x.AlignRight().AlignBottom());

        void AddIcon(Func<IContainer, IContainer> position)
        {
            layers
                .Layer()
                .Padding(-12)
                .Element(position)
                .Width(24)
                .Height(24)
                .Svg(plusSvg);
        }
    });
}

That produces: