Bug: DrawLine doesn't draw pixels where line segments overlap.

[woutware]

Tested with SixLabors.ImageSharp 3.1.5, SixLabors.ImageSharp.Drawing 2.1.4, .NET 6.0:

Program to reproduce (Only draws line from (10, 10) to (20, 10). The part where it draws over itself is not drawn):

using System;

using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.Fonts;

namespace ConsoleApp {
    public static class SixLaborsBug {
        public static void DrawLineBug2() {
            Image<Bgra32> bitmap = new Image<Bgra32>(Configuration.Default, 100, 100, new Bgra32(0, 0, 0));
            // Only draws line from (10, 10) to (20, 10). The part where it draws over itself is not drawn.
            bitmap.Mutate(
                context => {
                    context.DrawLine(Color.Aqua, 1f, new PointF(10, 10), new PointF(90, 10), new PointF(20, 10));
                }
            );

            bitmap.Save(@"C:\tmp\DrawLineBug2.png");
        }
    }
}

Attached is the output bitmap.

[JimBobSquarePants]

@woutware I have the strangest feeling of déjà vu reading this although I cannot find a similar discussion/issue.

@tocsoft have you seen anything like this before?

[tocsoft]

yeah it'll likely be related to odd/even non-zero fill rules.

[JimBobSquarePants]

@tocsoft Turns out this is actually a bug which will require some research. The fill rule has no effect.

Using explicit separate lines....

int width = 100;
int height = 100;

Image<Bgra32> bitmap = new Image<Bgra32>(Configuration.Default, width, height, new Bgra32(0, 0, 0));

// Only draws line from (10, 10) to (20, 10). The part where it draws over itself is not drawn.
bitmap.Mutate(
    context =>
    {
        PathBuilder builder = new();
        builder.MoveTo(new PointF(10, 10));
        builder.LineTo(new PointF(90, 10));
        builder.LineTo(new PointF(20, 10));

        context.Draw(Color.Aqua, 1F, builder.Build());
    }
);

bitmap.Save(@"C:\Users\james\Downloads\DrawLineBug2.png");

Here's a SkiaSharp equivalent which does what I would expect positionally (though I don't know why part of the line appears semi opaque).

using var bitmap2 = new SKBitmap(width, height);
using var canvas = new SKCanvas(bitmap2);

// Set background to black
canvas.Clear(SKColors.Black);

// Create a paint object for drawing
using var paint = new SKPaint
{
    Color = SKColors.Aqua,
    StrokeWidth = 1f,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke
};

// Define the path for the overlapping line segments
using var path = new SKPath();
path.MoveTo(new SKPoint(10, 10));
path.LineTo(new SKPoint(90, 10));
path.LineTo(new SKPoint(20, 10));

// Draw the path as a single connected line
canvas.DrawPath(path, paint);

// Save the output as a PNG file
using var image = SKImage.FromBitmap(bitmap2);
using var data = image.Encode(SKEncodedImageFormat.Png, 100);
using var stream = System.IO.File.OpenWrite(@"C:\Users\james\Downloads\SkiaSharpDrawLineBug.png");

data.SaveTo(stream);

[woutware]

Now that I'm thinking of it some more, also you have to consider how to handle drawing semi transparent pixels when drawing overlapping lines, e.g. when drawing a 20% opaque pixel. Would at the overlap be the result a 20% opaque pixel, or 0.2 x 0.2 for a single overlap (as if performing DrawLine twice for both line segments individually?

[JimBobSquarePants]

Better late than never but my new PR #377 that rewrites the library to centre around a new DrawingCanvas<TPixel> type contains a fix for this. We intentionally stripping collinear points during simplification but failed to consider points that represent a direction reversal (U-turn) within a single segment.