An efficient way to paint gradient rectangles

Question

I'm generating a bunch of RectangleF objects having different sizes and positions. What would be the best way to fill them with a gradient Brush in GDI+?

In WPF I could create a LinearGradientBrush, set Start and End relative points and WPF would take care of the rest.

In GDI+ however, the gradient brush constructor requires the position in absolute coordinates, which means I have to create a Brush for each of the rectangle, which would be a very complex operation.

Am I missing something or that's indeed the only way?

Answer 1

You can specify a transform at the moment just before the gradient is applied if you would like to declare the brush only once. Note that using transformations will override many of the constructor arguments that can be specified on a LinearGradientBrush.

LinearGradientBrush.Transform Property (System.Drawing.Drawing2D)

To modify the transformation, call the methods on the brush object corresponding to the desired matrix operations. Note that matrix operations are not commutative, so order is important. For your purposes, you'll probably want to do them in this order for each rendition of your rectangles: Scale, Rotate, Offset/Translate.

LinearGradientBrush.ResetTransform Method @ MSDN

LinearGradientBrush.ScaleTransform Method (Single, Single, MatrixOrder) @ MSDN

LinearGradientBrush.RotateTransform Method (Single, MatrixOrder) @ MSDN

LinearGradientBrush.TranslateTransform Method (Single, Single, MatrixOrder) @ MSDN

Note that the system-level drawing tools don't actually contain a stock definition for gradient brush, so if you have performance concerns about making multiple brushes, creating a multitude of gradient brushes shouldn't cost any more than the overhead of GDI+/System.Drawing maintaining the data required to define the gradient and styling. You may be just as well off to create a Brush per rectangle as needed, without having to dive into the math required to customize the brush via transform.

Brush Functions (Windows) @ MSDN

Here is a code example you can test in a WinForms app. This app paints tiles with a gradient brush using a 45 degree gradient, scaled to the largest dimension of the tile (naively calculated). If you fiddle with the values and transformations, you may find that it isn't worth using the technique setting a transform for all of your rectangles if you have non-trivial gradient definitions. Otherwise, remember that your transformations are applied at the world-level, and in the GDI world, the y-axis is upside down, whereas in the cartesian math world, it is ordered bottom-to-top. This also causes the angle to be applied clockwise, whereas in trigonometry, the angle progresses counter-clockwise in increasing value for a y-axis pointing up.

using System.Drawing.Drawing2D;

namespace TestMapTransform
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Rectangle rBrush = new Rectangle(0,0,1,1);
            Color startColor = Color.DarkRed;
            Color endColor = Color.White;
            LinearGradientBrush br = new LinearGradientBrush(rBrush, startColor, endColor, LinearGradientMode.Horizontal);

            int wPartitions = 5;
            int hPartitions = 5;

            int w = this.ClientSize.Width;
            w = w - (w % wPartitions) + wPartitions;
            int h = this.ClientSize.Height;
            h = h - (h % hPartitions) + hPartitions;

            for (int hStep = 0; hStep < hPartitions; hStep++)
            {
                int hUnit = h / hPartitions;
                for (int wStep = 0; wStep < wPartitions; wStep++)
                {
                    int wUnit = w / wPartitions;

                    Rectangle rTile = new Rectangle(wUnit * wStep, hUnit * hStep, wUnit, hUnit);

                    if (e.ClipRectangle.IntersectsWith(rTile))
                    {
                        int maxUnit = wUnit > hUnit ? wUnit : hUnit;

                        br.ResetTransform();
                        br.ScaleTransform((float)maxUnit * (float)Math.Sqrt(2d), (float)maxUnit * (float)Math.Sqrt(2d), MatrixOrder.Append);
                        br.RotateTransform(45f, MatrixOrder.Append);
                        br.TranslateTransform(wUnit * wStep, hUnit * hStep, MatrixOrder.Append);

                        e.Graphics.FillRectangle(br, rTile);

                        br.ResetTransform();
                    }
                }
            }
        }

        private void Form1_Resize(object sender, EventArgs e)
        {
            this.Invalidate();
        }
    }
}

Here's a snapshot of the output: