Potentially introduce a new PixelColorBlendingMode.And value

[JimmyWoodhouse]

It seems that the functionality for does not currently exist for drawing onto an image and only keeping the overlapping sections of the image with a polygon, or similar.

For example, my use case is that I have an image where I wish to make it transparent in a certain area. However, the contents of this image have a stroke/outline, so the stroke needs to be repositioned.
My idea was to clone the image and draw a polygon onto the cloned image, only take the overlapping areas. I would then draw the overlapping areas (from the cloned image) onto the original image in a different colour.

In regards to a possible new PixelColorBlendingMode.And with my examples below, the image would only contain either a red or a blue right angled triangle where they overlap (potentially even choosing between new PixelColorBlendingMode.SrcAnd and PixelColorBlendingMode.DestAnd values for this)

Sorry if I'm wrong here, but I'm not sure if the current PixelColorBlendingMode values all work correctly? I might be wrong and misunderstanding them here though, but here is my testing:

Image:

Polygon that gets drawn onto the image:

Here are the results:

I thought you'd have received something very different for either DestAtop or DestIn:

Thanks!

[JimmyWoodhouse]

To add to this, here's some examples:

var drawingOptions = new DrawingOptions
{
    GraphicsOptions = new GraphicsOptions()
    {
        AlphaCompositionMode = PixelAlphaCompositionMode.SrcAnd
    }
};

var brush = new SolidBrush(Color.Red);
var points = new PointF[] { new PointF(0, 0), new PointF(512, 0), new PointF(512, 512), new PointF(0, 512) };

image.Mutate(i => i.FillPolygon(drawingOptions, brush, polygon.Points.ToArray()));

using the red and blue images above, you would get:

and for DestAnd:

[JimBobSquarePants]

@JimmyWoodhouse

There's something not right about your results there as they do not match the expected output.

Here's example code of mine which generates each entry.

using Image<Rgba32> src = Image.Load<Rgba32>(@"C:\Users\james\Downloads\src.png");
using Image<Rgba32> dst = Image.Load<Rgba32>(@"C:\Users\james\Downloads\dst.png");

foreach (var mode in Enum.GetValues<PixelAlphaCompositionMode>())
{
    GraphicsOptions options = new()
    {
        AlphaCompositionMode = mode
    };
    
    using Image<Rgba32> res = dst.Clone(x => x.DrawImage(src, options));
    res.Save(@$"C:\Users\james\Downloads\341-porter-duff\{mode}.png");
}

And here's the output. (Ignore Clear, Windows 11 has a bug where explorer thumbnails of fully clear PNG files sometimes display as black)

Which matches the examples from this article on Porter-Duff Compositing Operators from the University of Auckland.

https://www.stat.auckland.ac.nz/~paul/Reports/GraphicsEngine/compositing/compositing.html

DestIn and SrcIn already exist providing the results that you require.

[JimmyWoodhouse]

Your code given works for me too, so it's correct when drawing images onto other images.
However, it looks like it is broken when filling polygons onto images.

Here are my results when using the same Src image above, and the points that make up the Dest image above (but not the Dest image itself)

Here's the code I used for this:

using Image<Rgba32> src = Image.Load<Rgba32>(@"C:\Users\Jimmy\Downloads\testingimages\src.png");

var drawingOptions = new DrawingOptions
{
    GraphicsOptions = new GraphicsOptions()
    {
        AlphaCompositionMode = PixelAlphaCompositionMode.SrcIn
        //AlphaCompositionMode = PixelAlphaCompositionMode.DestIn
    }
};

var brush = new SolidBrush(Color.CornflowerBlue);
var points = new PointF[] { new PointF(0, 0), new PointF(512, 0), new PointF(512, 512), new PointF(0, 512) };

src.Mutate(i => i.FillPolygon(drawingOptions, brush, points.ToArray()));


src.SaveAsPng(@"C:\Users\Jimmy\Downloads\testingimages\srcIn.png");
//src.SaveAsPng(@"C:\Users\Jimmy\Downloads\testingimages\destIn.png");

Good to know that DestIn and SrcIn provide this though, I thought it was strange that it didn't seem to have anything for those scenarios!

[JimBobSquarePants]

I'm seeing the following:

The algorithm is drawing the parts of the polygon as specified by the composition mode.
I think it's correct, but I've not had enough sleep to be 100% confident. It's probably a good idea to compare them to a skiasharp equivalent.

using Image<Rgba32> dst = Image.Load<Rgba32>(@"C:\Users\james\Downloads\dst.png");
SolidBrush brush = new(Color.CornflowerBlue);
PointF[] points = [new PointF(0, 0), new PointF(512, 0), new PointF(512, 512), new PointF(0, 512)];

foreach (var mode in Enum.GetValues<PixelAlphaCompositionMode>())
{
    DrawingOptions options = new()
    {
        GraphicsOptions = new()
        {
            AlphaCompositionMode = mode
        }
    };

    using Image<Rgba32> res = dst.Clone(x => x.FillPolygon(options, brush, points));
    res.Save(@$"C:\Users\james\Downloads\341-porter-duff\poly-{mode}.png");
}

[JimmyWoodhouse]

You're getting the same results as me here it seems, but it seems wrong to me haha.
SrcIn acts the same as SrcAtop, DestIn acts the same as Dest, and Src isn't the source image only?
There is no "and" combination in your results when drawing a PointF[] here.
Might be me misunderstanding obviously but it doesn't seem right to me!

[JimBobSquarePants]

LGTM.

string imagePath = @"C:\Users\james\Downloads\dst.png";
string outputPath = @"C:\Users\james\Downloads\341-porter-duff\skia\";

// Load the source image into SkiaSharp
using SKBitmap dstBitmap = SKBitmap.Decode(imagePath);
SKImageInfo imageInfo = new SKImageInfo(dstBitmap.Width, dstBitmap.Height);

// Define the polygon points
SKPoint[] points = new SKPoint[]
{
    new SKPoint(0, 0),
    new SKPoint(512, 0),
    new SKPoint(512, 512),
    new SKPoint(0, 512)
};

// Define the brush color
SKColor brushColor = SKColors.CornflowerBlue;

SKBlendMode[] porterDuffModes = new[]
{
    SKBlendMode.Clear,
    SKBlendMode.Src,
    SKBlendMode.Dst,
    SKBlendMode.SrcOver,
    SKBlendMode.DstOver,
    SKBlendMode.SrcIn,
    SKBlendMode.DstIn,
    SKBlendMode.SrcOut,
    SKBlendMode.DstOut,
    SKBlendMode.SrcATop,
    SKBlendMode.DstATop,
    SKBlendMode.Xor
};

// Iterate through all SkBlendMode options
foreach (SKBlendMode mode in porterDuffModes)
{
    using SKSurface surface = SKSurface.Create(imageInfo);
    using SKCanvas canvas = surface.Canvas;

    // Draw the background image onto the canvas
    canvas.DrawBitmap(dstBitmap, 0, 0);

    // Set up the paint with the specified blend mode
    using SKPaint paint = new SKPaint
    {
        Color = brushColor,
        BlendMode = mode,
        IsAntialias = true
    };

    // Draw the polygon with the specified blend mode
    using SKPath path = new SKPath();
    path.AddPoly(points, close: true);
    canvas.DrawPath(path, paint);

    // Save the resulting image to a file
    using SKImage resultImage = surface.Snapshot();
    using SKData data = resultImage.Encode(SKEncodedImageFormat.Png, 100);
    string filePath = Path.Combine(outputPath, $"sk-poly-{mode}.png");
    Directory.CreateDirectory(outputPath);
    File.WriteAllBytes(filePath, data.ToArray());
}

[JimmyWoodhouse]

Cheers, I must have misinterpreted what was going on.
I was expecting your results with using images, to match with your results when using polygons:

This (the result when using images) is what I was hoping to get when using polygons:

But you and I get this when using polygons:

So yeah, I assume that's a misunderstanding on how the process works on my end.

Thanks for the explanation