How to draw an image atop of another one with rotation

[ggolda]

How to draw an image atop of another one but with some rotation in degrees? x.DrawImage() call doesn't accept anything related to degrees or rotation matrices.

Thanks!

[antonfirsov]

Edit: the idea below won't work, see next comment.

You need to use ImageSharp.Drawing's ImageBrush with global transform on DrawingOptions. I can't recalll/create a proper code example from heart, but you should be able to do something like this:

Matrix3x2 transformMatrix = Matrix3x2.CreateRotation(...);
ImageBrush imageBrush = new ImageBrush(overlayImage);
destinationImage.Mutate(с => c.SetDrawingTransform(transformMatrix).FillRectangle(imageBrush, rectangle));

For more correct details, see this test:
https://github.com/SixLabors/ImageSharp.Drawing/blob/master/tests/ImageSharp.Drawing.Tests/Drawing/FillImageBrushTests.cs

and the PR adding global transform for the transform API:
SixLabors/ImageSharp.Drawing#126

[ggolda]

@JimBobSquarePants As I can see, AffineTransformBuilder works correctly if you rotate image once. If you apply this transformation multiple times in a sequence, the pivot point moves because after each rotation image dimensions are being changed.

This is a video example: https://streamable.com/i0fbzj

[antonfirsov]

Instead of rotating subsequent rotaded images further, you can try keeping a copy of the original image and apply rotations of increasing angles creating new rotated images with original.Clone(...) .

[ggolda]

Yep, this is exactly what I do:

_imageToDraw = _original.Clone();
_imageToDraw.Mutate(x => {
    AffineTransformBuilder builder = new AffineTransformBuilder();
    builder.AppendRotationDegrees(Transform.Rotation);
    x.Transform(builder);
});

[ggolda]

Also approach with rotating image before drawing doesn't work if you want to rotate it around some external pivot point.

[ggolda]

so to make "smooth" rotations, I have to adjust location parameter of a DrawImage call according to a width and height changes of a drawn image:

int deltaX = Math.Abs(_imageToDraw.Width - _original.Width) / 2;
int deltaY = Math.Abs(_imageToDraw.Height - _original.Height) / 2;

previousFrame.Mutate(x => {
    x.DrawImage(_imageToDraw, new Point(X - deltaX, Y - deltaY), Opacity);
});

This makes a chain of rotations to work as expected: https://streamable.com/112egc

Still, the issue with rotation around custom pivot point exists, and I don't think that its possible to solve it without changing DrawImage to accept a matrix.

[vpenades]

I'm trying to do something like this and I found another issue: it seems that ImageBrush don't care about alpha composition (Drawing 1.0.0-beta13)

So, I'm trying to overlay one image over another image with a rotation, exactly the same issue described by @ggolda , but with the additional requirement that the source image has alpha transparency, I've tried these two approaches:

• Mutate => DrawImage
  • supports alpha composition, but doesn't support transform.
• Mutate => Fill Brush
  • supports transform, but doesn't support alpha composition.

Furthermore, what I would need is to draw a region of the source image into the destination image, with a transform and blending composition.

I believe this is a fairly common operation and I'm surprised I have to struggle so much every time I need to do something like this.

I think an API such as this would be needed:

public static IImageProcessingContext DrawImage(this IImageProcessingContext source, Image image, Rectangle imageRect, Matrix3x2 location, GraphicsOptions options);

Also, it could be great if we could get a code snippet for an extension that does exactly that

[JimBobSquarePants]

So, I'm trying to overlay one image over another image with a rotation, exactly the same issue described by @ggolda , but with the additional requirement that the source image has alpha transparency, I've tried these two approaches:

• Mutate => DrawImage
  • supports alpha composition, but doesn't support transform.
• Mutate => Fill Brush
  • supports transform, but doesn't support alpha composition.

DrawImage - You're currently supposed to transform the image first. We used to allow transforms but that required an interim buffer of the size of the transformed result.
Fill Brush - Definitely supports alpha composition. We have unit tests (SolidFillBlendedShapesTests) in the repository demonstrating this.

ImageSharp.Drawing also has an ImageBrush.

P.S

I'm surprised I have to struggle so much every time I need to do something like this.

I REALLY do not like your tone here. This is an open source project supported by an extremely small group working in their spare time. Consider this a warning.

[vpenades]

I REALLY do not like your tone here. This is an open source project supported by an extremely small group working in their spare time. Consider this a warning.

I'm sorry you took it that way, I am aware Imagesharp is maintained by a small team, and it was not my intention to blame on anybody.

Having said that, I kept investigating about why I was having so many issues, and I've found that ImageSharp silently fails to load the PNG I was using for the tests... and that deceived me into thinking that what were rendering issues, was actually loading issues.

Should I open an issue for this PNG load issue?

[antonfirsov]

If it's a correct PNG other libraries can load and it fails with the latest ImageSharp 1.0.4 package, it might be a bug we should fix, so an issue (with image attached) is welcome. (Make sure it's not a duplicate of #1704)

Regarding the API suggestion, to me it seems like a reasonable addition, but the implementation is non-trivial:

1. You need to cut out the overlay image from the "atlas", let's name the result "brush image"
2. Matrix3x2 location has to be decomposed to an orientation * translation form
3. orientation shall executed "in place" on the "brush image"
4. If you rotate the overlay image by for example 45°, dimensions will change which has to be taken into account before translating the "brush image" to it's target location

We are currently focusing on pushing out ImageSharp 2.0 and making the current Drawing feature set production-ready, so I doubt we can implement this request without community help. If you think you can go for it, a PR is welcome as always.

[vpenades]

@antonfirsov yes, it is a duplicate of #1704, it happened the same to me with that image I posted in the (now closed) #1879

As it happens, the "map" I was drawing used most of the top left tiles of the image, which loaded correctly. And the tiles that were being used for transforms happened to be in the bottom right of the image, which failed to load, and made me think that all the transforms were wrong. I only realized the problem many hours later, when I dumped all the tiles, one by one, and found half of them where missing.

Back to the transforms topic, I don't know which is the right solution, I think a different approach would be to have a TransformedImageBrush. That would allow image transforms without an intermediate copy.

[antonfirsov]

Yeah we released 1.0.4 just to patch that particular issue.

TransformedImageBrush

It doesn't matter how we name or expose the API, to me it looks like internally it has to do all the steps I described, otherwise we'd have to transform+resample+blend per-pixel which seems to be slower and more complicated to me.