Merge pull request #2474 from SixLabors/js/enhanced-drawing

Fix DrawImage offsetting issues and improve API parameter names.

Author: JimBobSquarePants

src/ImageSharp/Processing/Extensions/Drawing/DrawImageExtensions.cs

@@ -14,20 +14,41 @@ public class DrawImageProcessor : IImageProcessor
     /// <summary>
     /// Initializes a new instance of the <see cref="DrawImageProcessor"/> class.
     /// </summary>
-    /// <param name="image">The image to blend.</param>
-    /// <param name="location">The location to draw the blended image.</param>
+    /// <param name="foreground">The image to blend.</param>
+    /// <param name="backgroundLocation">The location to draw the foreground image on the background.</param>
     /// <param name="colorBlendingMode">The blending mode to use when drawing the image.</param>
     /// <param name="alphaCompositionMode">The Alpha blending mode to use when drawing the image.</param>
     /// <param name="opacity">The opacity of the image to blend.</param>
     public DrawImageProcessor(
-        Image image,
-        Point location,
+        Image foreground,
+        Point backgroundLocation,
         PixelColorBlendingMode colorBlendingMode,
         PixelAlphaCompositionMode alphaCompositionMode,
         float opacity)
+        : this(foreground, backgroundLocation, foreground.Bounds, colorBlendingMode, alphaCompositionMode, opacity)
     {
-        this.Image = image;
-        this.Location = location;
+    }
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="DrawImageProcessor"/> class.
+    /// </summary>
+    /// <param name="foreground">The image to blend.</param>
+    /// <param name="backgroundLocation">The location to draw the foreground image on the background.</param>
+    /// <param name="foregroundRectangle">The rectangular portion of the foreground image to draw.</param>
+    /// <param name="colorBlendingMode">The blending mode to use when drawing the image.</param>
+    /// <param name="alphaCompositionMode">The Alpha blending mode to use when drawing the image.</param>
+    /// <param name="opacity">The opacity of the image to blend.</param>
+    public DrawImageProcessor(
+        Image foreground,
+        Point backgroundLocation,
+        Rectangle foregroundRectangle,
+        PixelColorBlendingMode colorBlendingMode,
+        PixelAlphaCompositionMode alphaCompositionMode,
+        float opacity)
+    {
+        this.ForeGround = foreground;
+        this.BackgroundLocation = backgroundLocation;
+        this.ForegroundRectangle = foregroundRectangle;
         this.ColorBlendingMode = colorBlendingMode;
         this.AlphaCompositionMode = alphaCompositionMode;
         this.Opacity = opacity;
@@ -36,12 +57,17 @@ public DrawImageProcessor(
     /// <summary>
     /// Gets the image to blend.
     /// </summary>
-    public Image Image { get; }
+    public Image ForeGround { get; }
+
+    /// <summary>
+    /// Gets the location to draw the foreground image on the background.
+    /// </summary>
+    public Point BackgroundLocation { get; }
 
     /// <summary>
-    /// Gets the location to draw the blended image.
+    /// Gets the rectangular portion of the foreground image to draw.
     /// </summary>
-    public Point Location { get; }
+    public Rectangle ForegroundRectangle { get; }
 
     /// <summary>
     /// Gets the blending mode to use when drawing the image.
@@ -62,8 +88,8 @@ public DrawImageProcessor(
     public IImageProcessor<TPixelBg> CreatePixelSpecificProcessor<TPixelBg>(Configuration configuration, Image<TPixelBg> source, Rectangle sourceRectangle)
         where TPixelBg : unmanaged, IPixel<TPixelBg>
     {
-        ProcessorFactoryVisitor<TPixelBg> visitor = new(configuration, this, source, sourceRectangle);
-        this.Image.AcceptVisitor(visitor);
+        ProcessorFactoryVisitor<TPixelBg> visitor = new(configuration, this, source);
+        this.ForeGround.AcceptVisitor(visitor);
         return visitor.Result!;
     }
 
@@ -73,14 +99,15 @@ private class ProcessorFactoryVisitor<TPixelBg> : IImageVisitor
         private readonly Configuration configuration;
         private readonly DrawImageProcessor definition;
         private readonly Image<TPixelBg> source;
-        private readonly Rectangle sourceRectangle;
 
-        public ProcessorFactoryVisitor(Configuration configuration, DrawImageProcessor definition, Image<TPixelBg> source, Rectangle sourceRectangle)
+        public ProcessorFactoryVisitor(
+            Configuration configuration,
+            DrawImageProcessor definition,
+            Image<TPixelBg> source)
         {
             this.configuration = configuration;
             this.definition = definition;
             this.source = source;
-            this.sourceRectangle = sourceRectangle;
         }
 
         public IImageProcessor<TPixelBg>? Result { get; private set; }
@@ -91,8 +118,8 @@ public void Visit<TPixelFg>(Image<TPixelFg> image)
                 this.configuration,
                 image,
                 this.source,
-                this.sourceRectangle,
-                this.definition.Location,
+                this.definition.BackgroundLocation,
+                this.definition.ForegroundRectangle,
                 this.definition.ColorBlendingMode,
                 this.definition.AlphaCompositionMode,
                 this.definition.Opacity);

src/ImageSharp/Processing/Processors/Drawing/DrawImageProcessor.cs

@@ -21,36 +21,42 @@ internal class DrawImageProcessor<TPixelBg, TPixelFg> : ImageProcessor<TPixelBg>
     /// Initializes a new instance of the <see cref="DrawImageProcessor{TPixelBg, TPixelFg}"/> class.
     /// </summary>
     /// <param name="configuration">The configuration which allows altering default behaviour or extending the library.</param>
-    /// <param name="image">The foreground <see cref="Image{TPixelFg}"/> to blend with the currently processing image.</param>
-    /// <param name="source">The source <see cref="Image{TPixelBg}"/> for the current processor instance.</param>
-    /// <param name="sourceRectangle">The source area to process for the current processor instance.</param>
-    /// <param name="location">The location to draw the blended image.</param>
+    /// <param name="foregroundImage">The foreground <see cref="Image{TPixelFg}"/> to blend with the currently processing image.</param>
+    /// <param name="backgroundImage">The source <see cref="Image{TPixelBg}"/> for the current processor instance.</param>
+    /// <param name="backgroundLocation">The location to draw the blended image.</param>
+    /// <param name="foregroundRectangle">The source area to process for the current processor instance.</param>
     /// <param name="colorBlendingMode">The blending mode to use when drawing the image.</param>
-    /// <param name="alphaCompositionMode">The Alpha blending mode to use when drawing the image.</param>
+    /// <param name="alphaCompositionMode">The alpha blending mode to use when drawing the image.</param>
     /// <param name="opacity">The opacity of the image to blend. Must be between 0 and 1.</param>
     public DrawImageProcessor(
         Configuration configuration,
-        Image<TPixelFg> image,
-        Image<TPixelBg> source,
-        Rectangle sourceRectangle,
-        Point location,
+        Image<TPixelFg> foregroundImage,
+        Image<TPixelBg> backgroundImage,
+        Point backgroundLocation,
+        Rectangle foregroundRectangle,
         PixelColorBlendingMode colorBlendingMode,
         PixelAlphaCompositionMode alphaCompositionMode,
         float opacity)
-        : base(configuration, source, sourceRectangle)
+        : base(configuration, backgroundImage, backgroundImage.Bounds)
     {
         Guard.MustBeBetweenOrEqualTo(opacity, 0, 1, nameof(opacity));
 
-        this.Image = image;
+        this.ForegroundImage = foregroundImage;
+        this.ForegroundRectangle = foregroundRectangle;
         this.Opacity = opacity;
         this.Blender = PixelOperations<TPixelBg>.Instance.GetPixelBlender(colorBlendingMode, alphaCompositionMode);
-        this.Location = location;
+        this.BackgroundLocation = backgroundLocation;
     }
 
     /// <summary>
     /// Gets the image to blend
     /// </summary>
-    public Image<TPixelFg> Image { get; }
+    public Image<TPixelFg> ForegroundImage { get; }
+
+    /// <summary>
+    /// Gets the rectangular portion of the foreground image to draw.
+    /// </summary>
+    public Rectangle ForegroundRectangle { get; }
 
     /// <summary>
     /// Gets the opacity of the image to blend
@@ -65,43 +71,57 @@ public DrawImageProcessor(
     /// <summary>
     /// Gets the location to draw the blended image
     /// </summary>
-    public Point Location { get; }
+    public Point BackgroundLocation { get; }
 
     /// <inheritdoc/>
     protected override void OnFrameApply(ImageFrame<TPixelBg> source)
     {
-        Rectangle sourceRectangle = this.SourceRectangle;
-        Configuration configuration = this.Configuration;
-
-        Image<TPixelFg> targetImage = this.Image;
-        PixelBlender<TPixelBg> blender = this.Blender;
-        int locationY = this.Location.Y;
+        // Align the bounds so that both the source and targets are the same width and height for blending.
+        // We ensure that negative locations are subtracted from both bounds so that foreground images can partially overlap.
+        Rectangle foregroundRectangle = this.ForegroundRectangle;
 
-        // Align start/end positions.
-        Rectangle bounds = targetImage.Bounds;
+        // Sanitize the location so that we don't try and sample outside the image.
+        int left = this.BackgroundLocation.X;
+        int top = this.BackgroundLocation.Y;
 
-        int minX = Math.Max(this.Location.X, sourceRectangle.X);
-        int maxX = Math.Min(this.Location.X + bounds.Width, sourceRectangle.Right);
-        int targetX = minX - this.Location.X;
-
-        int minY = Math.Max(this.Location.Y, sourceRectangle.Y);
-        int maxY = Math.Min(this.Location.Y + bounds.Height, sourceRectangle.Bottom);
-
-        int width = maxX - minX;
+        if (this.BackgroundLocation.X < 0)
+        {
+            foregroundRectangle.Width += this.BackgroundLocation.X;
+            left = 0;
+        }
 
-        Rectangle workingRect = Rectangle.FromLTRB(minX, minY, maxX, maxY);
+        if (this.BackgroundLocation.Y < 0)
+        {
+            foregroundRectangle.Height += this.BackgroundLocation.Y;
+            top = 0;
+        }
 
-        // Not a valid operation because rectangle does not overlap with this image.
-        if (workingRect.Width <= 0 || workingRect.Height <= 0)
+        int width = foregroundRectangle.Width;
+        int height = foregroundRectangle.Height;
+        if (width <= 0 || height <= 0)
         {
-            throw new ImageProcessingException(
-                "Cannot draw image because the source image does not overlap the target image.");
+            // Nothing to do, return.
+            return;
         }
 
-        DrawImageProcessor<TPixelBg, TPixelFg>.RowOperation operation = new(source.PixelBuffer, targetImage.Frames.RootFrame.PixelBuffer, blender, configuration, minX, width, locationY, targetX, this.Opacity);
+        // Sanitize the dimensions so that we don't try and sample outside the image.
+        foregroundRectangle = Rectangle.Intersect(foregroundRectangle, this.ForegroundImage.Bounds);
+        Rectangle backgroundRectangle = Rectangle.Intersect(new(left, top, width, height), this.SourceRectangle);
+        Configuration configuration = this.Configuration;
+
+        DrawImageProcessor<TPixelBg, TPixelFg>.RowOperation operation =
+            new(
+                configuration,
+                source.PixelBuffer,
+                this.ForegroundImage.Frames.RootFrame.PixelBuffer,
+                backgroundRectangle,
+                foregroundRectangle,
+                this.Blender,
+                this.Opacity);
+
         ParallelRowIterator.IterateRows(
             configuration,
-            workingRect,
+            new(0, 0, foregroundRectangle.Width, foregroundRectangle.Height),
             in operation);
     }
 
@@ -110,45 +130,39 @@ protected override void OnFrameApply(ImageFrame<TPixelBg> source)
     /// </summary>
     private readonly struct RowOperation : IRowOperation
     {
-        private readonly Buffer2D<TPixelBg> source;
-        private readonly Buffer2D<TPixelFg> target;
+        private readonly Buffer2D<TPixelBg> background;
+        private readonly Buffer2D<TPixelFg> foreground;
         private readonly PixelBlender<TPixelBg> blender;
         private readonly Configuration configuration;
-        private readonly int minX;
-        private readonly int width;
-        private readonly int locationY;
-        private readonly int targetX;
+        private readonly Rectangle foregroundRectangle;
+        private readonly Rectangle backgroundRectangle;
         private readonly float opacity;
 
         [MethodImpl(InliningOptions.ShortMethod)]
         public RowOperation(
-            Buffer2D<TPixelBg> source,
-            Buffer2D<TPixelFg> target,
-            PixelBlender<TPixelBg> blender,
             Configuration configuration,
-            int minX,
-            int width,
-            int locationY,
-            int targetX,
+            Buffer2D<TPixelBg> background,
+            Buffer2D<TPixelFg> foreground,
+            Rectangle backgroundRectangle,
+            Rectangle foregroundRectangle,
+            PixelBlender<TPixelBg> blender,
             float opacity)
         {
-            this.source = source;
-            this.target = target;
-            this.blender = blender;
             this.configuration = configuration;
-            this.minX = minX;
-            this.width = width;
-            this.locationY = locationY;
-            this.targetX = targetX;
+            this.background = background;
+            this.foreground = foreground;
+            this.backgroundRectangle = backgroundRectangle;
+            this.foregroundRectangle = foregroundRectangle;
+            this.blender = blender;
             this.opacity = opacity;
         }
 
         /// <inheritdoc/>
         [MethodImpl(InliningOptions.ShortMethod)]
         public void Invoke(int y)
         {
-            Span<TPixelBg> background = this.source.DangerousGetRowSpan(y).Slice(this.minX, this.width);
-            Span<TPixelFg> foreground = this.target.DangerousGetRowSpan(y - this.locationY).Slice(this.targetX, this.width);
+            Span<TPixelBg> background = this.background.DangerousGetRowSpan(y + this.backgroundRectangle.Top).Slice(this.backgroundRectangle.Left, this.backgroundRectangle.Width);
+            Span<TPixelFg> foreground = this.foreground.DangerousGetRowSpan(y + this.foregroundRectangle.Top).Slice(this.foregroundRectangle.Left, this.foregroundRectangle.Width);
             this.blender.Blend<TPixelFg>(this.configuration, background, background, foreground, this.opacity);
         }
     }

src/ImageSharp/Processing/Processors/Drawing/DrawImageProcessor{TPixelBg,TPixelFg}.cs

@@ -13,11 +13,12 @@ public class DrawImageExtensionsTests : BaseImageOperationsExtensionTest
     [Fact]
     public void DrawImage_OpacityOnly_VerifyGraphicOptionsTakenFromContext()
     {
-        // non-default values as we cant easly defect usage otherwise
+        // non-default values as we cant easily defect usage otherwise
         this.options.AlphaCompositionMode = PixelAlphaCompositionMode.Xor;
         this.options.ColorBlendingMode = PixelColorBlendingMode.Screen;
 
-        this.operations.DrawImage(null, 0.5f);
+        using Image<Rgba32> image = new(Configuration.Default, 1, 1);
+        this.operations.DrawImage(image, 0.5f);
         DrawImageProcessor dip = this.Verify<DrawImageProcessor>();
 
         Assert.Equal(0.5, dip.Opacity);
@@ -28,11 +29,12 @@ public void DrawImage_OpacityOnly_VerifyGraphicOptionsTakenFromContext()
     [Fact]
     public void DrawImage_OpacityAndBlending_VerifyGraphicOptionsTakenFromContext()
     {
-        // non-default values as we cant easly defect usage otherwise
+        // non-default values as we cant easily defect usage otherwise
         this.options.AlphaCompositionMode = PixelAlphaCompositionMode.Xor;
         this.options.ColorBlendingMode = PixelColorBlendingMode.Screen;
 
-        this.operations.DrawImage(null, PixelColorBlendingMode.Multiply, 0.5f);
+        using Image<Rgba32> image = new(Configuration.Default, 1, 1);
+        this.operations.DrawImage(image, PixelColorBlendingMode.Multiply, 0.5f);
         DrawImageProcessor dip = this.Verify<DrawImageProcessor>();
 
         Assert.Equal(0.5, dip.Opacity);
@@ -43,11 +45,12 @@ public void DrawImage_OpacityAndBlending_VerifyGraphicOptionsTakenFromContext()
     [Fact]
     public void DrawImage_LocationAndOpacity_VerifyGraphicOptionsTakenFromContext()
     {
-        // non-default values as we cant easly defect usage otherwise
+        // non-default values as we cant easily defect usage otherwise
         this.options.AlphaCompositionMode = PixelAlphaCompositionMode.Xor;
         this.options.ColorBlendingMode = PixelColorBlendingMode.Screen;
 
-        this.operations.DrawImage(null, Point.Empty, 0.5f);
+        using Image<Rgba32> image = new(Configuration.Default, 1, 1);
+        this.operations.DrawImage(image, Point.Empty, 0.5f);
         DrawImageProcessor dip = this.Verify<DrawImageProcessor>();
 
         Assert.Equal(0.5, dip.Opacity);
@@ -58,11 +61,12 @@ public void DrawImage_LocationAndOpacity_VerifyGraphicOptionsTakenFromContext()
     [Fact]
     public void DrawImage_LocationAndOpacityAndBlending_VerifyGraphicOptionsTakenFromContext()
     {
-        // non-default values as we cant easly defect usage otherwise
+        // non-default values as we cant easily defect usage otherwise
         this.options.AlphaCompositionMode = PixelAlphaCompositionMode.Xor;
         this.options.ColorBlendingMode = PixelColorBlendingMode.Screen;
 
-        this.operations.DrawImage(null, Point.Empty, PixelColorBlendingMode.Multiply, 0.5f);
+        using Image<Rgba32> image = new(Configuration.Default, 1, 1);
+        this.operations.DrawImage(image, Point.Empty, PixelColorBlendingMode.Multiply, 0.5f);
         DrawImageProcessor dip = this.Verify<DrawImageProcessor>();
 
         Assert.Equal(0.5, dip.Opacity);