From 6bca0b2a6c9f6f4d1c1d89f4395e824fef60e550 Mon Sep 17 00:00:00 2001 From: Unknown Date: Fri, 27 Apr 2018 00:04:32 +0200 Subject: [PATCH] implement GradientRepetitionModes --- .../AbstractGradientBrush{TPixel}.cs | 52 +++++++++++++++-- .../GradientBrushes/EllipticGradientBrush.cs | 13 +++-- .../GradientBrushes/GradientRepetitionMode.cs | 35 ++++++++++++ .../LinearGradientBrush{TPixel}.cs | 17 ++++-- .../GradientBrushes/RadialGradientBrush.cs | 12 ++-- .../Drawing/FillEllipticGradientBrushTest.cs | 5 +- .../Drawing/FillLinearGradientBrushTests.cs | 56 +++++++++++++++++++ .../Drawing/FillRadialGradientBrushTests.cs | 2 + 8 files changed, 168 insertions(+), 24 deletions(-) create mode 100644 src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/GradientRepetitionMode.cs diff --git a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/AbstractGradientBrush{TPixel}.cs b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/AbstractGradientBrush{TPixel}.cs index 2939aed7de..c963c9831f 100644 --- a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/AbstractGradientBrush{TPixel}.cs +++ b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/AbstractGradientBrush{TPixel}.cs @@ -1,4 +1,5 @@ -using System.Numerics; +using System; +using System.Numerics; using SixLabors.ImageSharp.PixelFormats; using SixLabors.ImageSharp.PixelFormats.PixelBlenders; @@ -14,12 +15,21 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes where TPixel : struct, IPixel { /// + /// Defines how the colors are repeated beyond the interval [0..1] /// The gradient colors. - protected AbstractGradientBrush(params ColorStop[] colorStops) + protected AbstractGradientBrush( + GradientRepetitionMode repetitionMode, + params ColorStop[] colorStops) { + this.RepetitionMode = repetitionMode; this.ColorStops = colorStops; } + /// + /// Gets how the colors are repeated beyond the interval [0..1]. + /// + protected GradientRepetitionMode RepetitionMode { get; } + /// /// Gets the list of color stops for this gradient. /// @@ -38,21 +48,24 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes { private readonly ColorStop[] colorStops; + private readonly GradientRepetitionMode repetitionMode; + /// /// Initializes a new instance of the class. /// /// The target. /// The options. - /// an array of color stops sorted by their position. - /// TODO: use region, compare with other Brushes for reference + /// An array of color stops sorted by their position. + /// Defines if and how the gradient should be repeated. protected AbstractGradientBrushApplicator( ImageFrame target, GraphicsOptions options, ColorStop[] colorStops, - RectangleF region) + GradientRepetitionMode repetitionMode) : base(target, options) { this.colorStops = colorStops; // TODO: requires colorStops to be sorted by position - should that be checked? + this.repetitionMode = repetitionMode; } /// @@ -66,6 +79,35 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes get { float positionOnCompleteGradient = this.PositionOnGradient(x, y); + + switch (this.repetitionMode) + { + case GradientRepetitionMode.None: + // do nothing. The following could be done, but is not necessary: + // onLocalGradient = Math.Min(0, Math.Max(1, onLocalGradient)); + break; + case GradientRepetitionMode.Repeat: + positionOnCompleteGradient = positionOnCompleteGradient % 1; + break; + case GradientRepetitionMode.Reflect: + positionOnCompleteGradient = positionOnCompleteGradient % 2; + if (positionOnCompleteGradient > 1) + { + positionOnCompleteGradient = 2 - positionOnCompleteGradient; + } + + break; + case GradientRepetitionMode.DontFill: + if (positionOnCompleteGradient > 1 || positionOnCompleteGradient < 0) + { + return NamedColors.Transparent; + } + + break; + default: + throw new ArgumentOutOfRangeException(); + } + var (from, to) = this.GetGradientSegment(positionOnCompleteGradient); if (from.Color.Equals(to.Color)) diff --git a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/EllipticGradientBrush.cs b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/EllipticGradientBrush.cs index 8986853e27..4715533182 100644 --- a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/EllipticGradientBrush.cs +++ b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/EllipticGradientBrush.cs @@ -29,13 +29,15 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// The second axis' is perpendicular to the reference axis and /// it's length is the reference axis' length multiplied by this factor. /// + /// Defines how the colors of the gradients are repeated. /// the color stops as defined in base class. public EllipticGradientBrush( Point center, Point referenceAxisEnd, float axisRatio, + GradientRepetitionMode repetitionMode, params ColorStop[] colorStops) - : base(colorStops) + : base(repetitionMode, colorStops) { this.center = center; this.referenceAxisEnd = referenceAxisEnd; @@ -54,7 +56,7 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes this.referenceAxisEnd, this.axisRatio, this.ColorStops, - region); + this.RepetitionMode); /// protected class RadialGradientBrushApplicator : AbstractGradientBrushApplicator @@ -90,7 +92,7 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// Ratio of the axis length's. Used to determine the length of the second axis, /// the first is defined by and . /// Definition of colors - /// TODO ! + /// Defines how the gradient colors are repeated. public RadialGradientBrushApplicator( ImageFrame target, GraphicsOptions options, @@ -98,8 +100,8 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes Point referenceAxisEnd, float axisRatio, ColorStop[] colorStops, - RectangleF region) - : base(target, options, colorStops, region) + GradientRepetitionMode repetitionMode) + : base(target, options, colorStops, repetitionMode) { this.center = center; this.referenceAxisEnd = referenceAxisEnd; @@ -116,7 +118,6 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes this.sinRotation = (float)Math.Sin(this.rotation); this.cosRotation = (float)Math.Cos(this.rotation); - } /// diff --git a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/GradientRepetitionMode.cs b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/GradientRepetitionMode.cs new file mode 100644 index 0000000000..2fdc7fca6f --- /dev/null +++ b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/GradientRepetitionMode.cs @@ -0,0 +1,35 @@ +namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes +{ + /// + /// Modes to repeat a gradient. + /// + public enum GradientRepetitionMode + { + /// + /// don't repeat, keep the color of start and end beyond those points stable. + /// + None, + + /// + /// Repeat the gradient. + /// If it's a black-white gradient, with Repeat it will be Black->{gray}->White|Black->{gray}->White|... + /// + Repeat, + + /// + /// Reflect the gradient. + /// Similar to , but each other repetition uses inverse order of s. + /// Used on a Black-White gradient, Reflect leads to Black->{gray}->White->{gray}->White... + /// + Reflect, + + /// + /// With DontFill a gradient does not touch any pixel beyond it's borders. + /// For the this is beyond the orthogonal through start and end, + /// For the it's outside the polygon, + /// TODO For see cref="RadialGradientBrush{TPixel}"/> and it's beyond 1.0. + /// TODO: check documentation consistency according to 1.0 + /// + DontFill + } +} \ No newline at end of file diff --git a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/LinearGradientBrush{TPixel}.cs b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/LinearGradientBrush{TPixel}.cs index ba398995be..8dbc4df908 100644 --- a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/LinearGradientBrush{TPixel}.cs +++ b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/LinearGradientBrush{TPixel}.cs @@ -23,9 +23,14 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// /// Start point /// End point + /// defines how colors are repeated. /// - public LinearGradientBrush(Point p1, Point p2, params ColorStop[] colorStops) - : base(colorStops) + public LinearGradientBrush( + Point p1, + Point p2, + GradientRepetitionMode repetitionMode, + params ColorStop[] colorStops) + : base(repetitionMode, colorStops) { this.p1 = p1; this.p2 = p2; @@ -33,7 +38,7 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// public override BrushApplicator CreateApplicator(ImageFrame source, RectangleF region, GraphicsOptions options) - => new LinearGradientBrushApplicator(source, this.p1, this.p2, this.ColorStops, region, options); + => new LinearGradientBrushApplicator(source, this.p1, this.p2, this.ColorStops, this.RepetitionMode, options); /// /// The linear gradient brush applicator. @@ -81,16 +86,16 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// start point of the gradient /// end point of the gradient /// tuple list of colors and their respective position between 0 and 1 on the line - /// the region, copied from SolidColorBrush, not sure if necessary! TODO + /// defines how the gradient colors are repeated. /// the graphics options public LinearGradientBrushApplicator( ImageFrame source, Point start, Point end, ColorStop[] colorStops, - RectangleF region, + GradientRepetitionMode repetitionMode, GraphicsOptions options) - : base(source, options, colorStops, region) + : base(source, options, colorStops, repetitionMode) { this.start = start; this.end = end; diff --git a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/RadialGradientBrush.cs b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/RadialGradientBrush.cs index 60040ab3c7..53b34e2338 100644 --- a/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/RadialGradientBrush.cs +++ b/src/ImageSharp.Drawing/Processing/Drawing/Brushes/GradientBrushes/RadialGradientBrush.cs @@ -19,12 +19,14 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// /// The center of the circular gradient and 0 for the color stops. /// The radius of the circular gradient and 1 for the color stops. + /// Defines how the colors in the gradient are repeated. /// the color stops as defined in base class. public RadialGradientBrush( Point center, float radius, + GradientRepetitionMode repetitionMode, params ColorStop[] colorStops) - : base(colorStops) + : base(repetitionMode, colorStops) { this.center = center; this.radius = radius; @@ -41,7 +43,7 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes this.center, this.radius, this.ColorStops, - region); + this.RepetitionMode); /// protected class RadialGradientBrushApplicator : AbstractGradientBrushApplicator @@ -58,15 +60,15 @@ namespace SixLabors.ImageSharp.Processing.Drawing.Brushes.GradientBrushes /// Center point of the gradient. /// Radius of the gradient. /// Definition of colors. - /// TODO ! + /// How the colors are repeated beyond the first gradient. public RadialGradientBrushApplicator( ImageFrame target, GraphicsOptions options, Point center, float radius, ColorStop[] colorStops, - RectangleF region) - : base(target, options, colorStops, region) + GradientRepetitionMode repetitionMode) + : base(target, options, colorStops, repetitionMode) { this.center = center; this.radius = radius; diff --git a/tests/ImageSharp.Tests/Drawing/FillEllipticGradientBrushTest.cs b/tests/ImageSharp.Tests/Drawing/FillEllipticGradientBrushTest.cs index c789e3e467..1ec27d7628 100644 --- a/tests/ImageSharp.Tests/Drawing/FillEllipticGradientBrushTest.cs +++ b/tests/ImageSharp.Tests/Drawing/FillEllipticGradientBrushTest.cs @@ -2,8 +2,6 @@ // Licensed under the Apache License, Version 2.0. using System; -using System.Linq; -using System.Runtime.InteropServices; using SixLabors.ImageSharp.PixelFormats; using SixLabors.ImageSharp.Processing; @@ -27,6 +25,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new SixLabors.Primitives.Point(0, 0), new SixLabors.Primitives.Point(10, 0), 1.0f, + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Red)); @@ -62,6 +61,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new SixLabors.Primitives.Point(500, 500), new SixLabors.Primitives.Point(500, 750), ratio, + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Yellow), new ColorStop(1, Rgba32.Red), new ColorStop(1, Rgba32.Black)); @@ -112,6 +112,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing center, new SixLabors.Primitives.Point(axisX, axisY), ratio, + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Yellow), new ColorStop(1, Rgba32.Red), new ColorStop(1, Rgba32.Black)); diff --git a/tests/ImageSharp.Tests/Drawing/FillLinearGradientBrushTests.cs b/tests/ImageSharp.Tests/Drawing/FillLinearGradientBrushTests.cs index b9d37d8e8f..d080896a0a 100644 --- a/tests/ImageSharp.Tests/Drawing/FillLinearGradientBrushTests.cs +++ b/tests/ImageSharp.Tests/Drawing/FillLinearGradientBrushTests.cs @@ -24,6 +24,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new LinearGradientBrush( new SixLabors.Primitives.Point(0, 0), new SixLabors.Primitives.Point(10, 0), + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Red)); @@ -54,6 +55,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new LinearGradientBrush( new SixLabors.Primitives.Point(0, 0), new SixLabors.Primitives.Point(500, 0), + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Yellow)); @@ -84,6 +86,56 @@ namespace SixLabors.ImageSharp.Tests.Drawing } } + [Theory] + [InlineData(GradientRepetitionMode.DontFill)] + [InlineData(GradientRepetitionMode.None)] + [InlineData(GradientRepetitionMode.Repeat)] + [InlineData(GradientRepetitionMode.Reflect)] + public void HorizontalLinearGradientBrushWithDifferentRepetitionModesCreatesCorrectImages( + GradientRepetitionMode repetitionMode) + { + int width = 500; + int height = 10; + int lastColumnIndex = width - 1; + + string path = TestEnvironment.CreateOutputDirectory("Fill", "LinearGradientBrush"); + using (var image = new Image(width, height)) + { + LinearGradientBrush unicolorLinearGradientBrush = + new LinearGradientBrush( + new SixLabors.Primitives.Point(0, 0), + new SixLabors.Primitives.Point(50, 0), + repetitionMode, + new ColorStop(0, Rgba32.Red), + new ColorStop(1, Rgba32.Yellow)); + + image.Mutate(x => x.Fill(unicolorLinearGradientBrush)); + image.Save($"{path}/horizontalRedToYellow_{repetitionMode}.png"); + + using (PixelAccessor sourcePixels = image.Lock()) + { + Rgba32 columnColor0 = sourcePixels[0, 0]; + Rgba32 columnColor23 = sourcePixels[23, 0]; + Rgba32 columnColor42 = sourcePixels[42, 0]; + Rgba32 columnColor333 = sourcePixels[333, 0]; + + Rgba32 lastColumnColor = sourcePixels[lastColumnIndex, 0]; + + for (int i = 0; i < height; i++) + { + // check first and last column: + Assert.Equal(columnColor0, sourcePixels[0, i]); + Assert.Equal(lastColumnColor, sourcePixels[lastColumnIndex, i]); + + // check the random colors: + Assert.True(columnColor23 == sourcePixels[23, i], $"at {i}"); + Assert.Equal(columnColor42, sourcePixels[42, i]); + Assert.Equal(columnColor333, sourcePixels[333, i]); + } + } + } + } + [Theory] [InlineData(new[] { 0.5f })] [InlineData(new[] { 0.2f, 0.4f, 0.6f, 0.8f })] @@ -117,6 +169,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new LinearGradientBrush( new SixLabors.Primitives.Point(0, 0), new SixLabors.Primitives.Point(width, 0), + GradientRepetitionMode.None, colorStops); image.Mutate(x => x.Fill(unicolorLinearGradientBrush)); @@ -146,6 +199,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new LinearGradientBrush( new SixLabors.Primitives.Point(0, 0), new SixLabors.Primitives.Point(0, 500), + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Yellow)); @@ -194,6 +248,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new LinearGradientBrush( new SixLabors.Primitives.Point(startX, startY), new SixLabors.Primitives.Point(endX, endY), + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Yellow)); @@ -251,6 +306,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new LinearGradientBrush( new SixLabors.Primitives.Point(startX, startY), new SixLabors.Primitives.Point(endX, endY), + GradientRepetitionMode.None, colorStops); image.Mutate(x => x.Fill(unicolorLinearGradientBrush)); diff --git a/tests/ImageSharp.Tests/Drawing/FillRadialGradientBrushTests.cs b/tests/ImageSharp.Tests/Drawing/FillRadialGradientBrushTests.cs index 24a36a2524..7229e70412 100644 --- a/tests/ImageSharp.Tests/Drawing/FillRadialGradientBrushTests.cs +++ b/tests/ImageSharp.Tests/Drawing/FillRadialGradientBrushTests.cs @@ -19,6 +19,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new RadialGradientBrush( new SixLabors.Primitives.Point(0, 0), 100, + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Red)); @@ -54,6 +55,7 @@ namespace SixLabors.ImageSharp.Tests.Drawing new RadialGradientBrush( new SixLabors.Primitives.Point(centerX, centerY), width / 2f, + GradientRepetitionMode.None, new ColorStop(0, Rgba32.Red), new ColorStop(1, Rgba32.Yellow));