Blending Using LinearGradientBrush Objects in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

The LinearGradeintBrush object represents a linear gradient brush, which lets us specify the starting and ending colors, and the starting and ending points of the gradient patter.

The linear gradient brushes work differently from solid and hatch brushes. For solid and hatch brushes, an application creates a brush and uses the brush to fill graphics shapes; the brush pattern applies to the entire shape. For linear gradient brushes, an application creates a linear gradient brush with a rectangle. The rectangle passed in the constructor of the LinearGradeintBrush object defines the boundaries of a gradient pattern. For example, Listing 9.20 creates a linear gradient brush with starting point (0,0) ending point (50,50), starting color red, and ending color green. Then the code fills a rectangle starting at point (0,0) and ending at point (200,50):

LISTING 9.20: Creating a LinearGradientBrush object

            Graphics g = e.Graphics;

            LinearGradientBrush rgBrush = new LinearGradientBrush

                ( new RectangleF(0, 0, 50, 50),

                Color.Red, Color.Green,

                LinearGradientMode.Horizontal

                );

            g.FillRectangle(rgBrush, 0, 0, 200, 50);

Figure 9.29 shows the output from Listing 9.20. After point (50,50) the gradient pattern repeats itself.

Now let's create one more linear gradient brush using code from Listing 9.21. The brush's range is greater, and the rectangle starts at point (50, 50) with height and width 200 and 50, respectively.

LISTING 9.21: Setting a brush's rectangle

            Graphics g = e.Graphics;

            LinearGradientBrush rgBrush =

                new LinearGradientBrush

                (

                new RectangleF(0, 0, 200, 200),

                Color.Red, Color.Green,

                LinearGradientMode.Horizontal

                );

            g.FillRectangle(rgBrush, 50, 50, 200, 50);

As the output of Listing 9.21 shows (see Figure 9.30), the pattern repeats after it crosses point (200,200).

The LinearGradeintBrush class also provides two methods-SetBlendTriangularShape and SetSigmaBellShape-which can be used to set gradient properties. SetBlendTriangularShape creates a gradient with a center color and a linear falloff color. This method takes two parameters-representing focus and scale both floating-point values that vary from 0 to1. The focus parameter is optional. Listing 9.22 shows the SetBlendTriangularShape method being used.

FIGURE 9.29: Using linear gradient brushes

FIGURE 9.30: Using a rectangle in the linear gradient brushes

LISTING 9.22: Using the SetBlendTriangularShape method

        private void Form1_Paint(object sender, PaintEventArgs e)

        {

            Graphics g = this.CreateGraphics();

            g.Clear(this.BackColor);

            // Create a rectangle

            Rectangle rect = new Rectangle(20, 20, 100, 50);

            // Create a linear gradeint brush

            LinearGradientBrush rgBrush =

                new LinearGradientBrush(

                rect, Color.Red, Color.Green,

                0.0f, true);

            // Fill rectangle

            g.FillRectangle(rgBrush, rect);

            rect.Y = 90;

            // Set blend triangular shape

            rgBrush.SetBlendTriangularShape(0.5f, 1.0f);

            // fill rectangle again

            g.FillRectangle(rgBrush, rect);

            // Dispose of object

            g.Dispose();

        }

Figure 9.31 shows the output from Listing 9.22. The first image starts with red and ends with green; the second image has green as the center, and red as both the starting and the ending edge color.

FIGURE 9.31: Using the SetBlendTriangularShape method

The SetSigmaBellShape method creates a gradient falloff based on a bell-shaped curve. Much like SetBlendTriangularShape, this method takes two parameters representing focus and scale (the focus parameter is optional) whose values vary from 0 to1. Listing 9.23 shows the SetSigmaBellShape method being used.

LISTING 9.23: Using the SetSigmaBellShape method

        private void Form1_Paint(object sender, PaintEventArgs e)

        {

            Graphics g = this.CreateGraphics();

            g.Clear(this.BackColor);

            // Create a rectangle

            Rectangle rect = new Rectangle(20, 20, 100, 50);

            // Create a linear gradient brush

            LinearGradientBrush rgBrush =

                new LinearGradientBrush(

                rect, Color.Red, Color.Green,

                0.0f, true);

            // Fill rectangle

            g.FillRectangle(rgBrush, rect);

            rect.Y = 90;

            // Set sigma bell shape

            rgBrush.SetSigmaBellShape(0.5f, 1.0f);

            // fill rectangle again

            g.FillRectangle(rgBrush, rect);

            // Dispose of object

            g.Dispose();

        }

FIGURE 9.32: Using the SetSigmaBellShape method

Figure 9.32 shows the output from Listing 9.23. The first image starts with red and ends with green. After the sigma bell shape is set, the image's center is green and its starting and ending edges are red.

Now let's compare the effect of SetSigmaBellShape and SetBlendTriangularShape. Listing 9.24 draws three rectangles: one using the LinearGradeint brush with no effect, one using SetSigmaBellShape, and one using SetBlendTringularShape.

LISTING 9.24: Comparing the effect of SetBlendTriangularShape and SetSigmaBellShape

        private void Form1_Paint(object sender, PaintEventArgs e)

        {

            Graphics g = this.CreateGraphics();

            g.Clear(this.BackColor);

            // Create a rectangle

            Rectangle rect = new Rectangle(0, 0, 40, 20);

            // Create a linear gradient brush

            LinearGradientBrush rgBrush =

                new LinearGradientBrush(

                rect, Color.Black, Color.Blue,

                0.0f, true);

            // Fill rectangle

            g.FillRectangle(rgBrush, new Rectangle(10, 10, 300, 100));

            // Set sigma bell shape

            rgBrush.SetSigmaBellShape(0.5f, 1.0f);

            // fill rectangle again

            g.FillRectangle(rgBrush,

                new Rectangle(10, 120, 300, 100));

            // Set blend triangular shape

            rgBrush.SetBlendTriangularShape(0.5f, 1.0f);

            // Fill rectangle again

            g.FillRectangle(rgBrush, new Rectangle(10, 240, 300, 100));

            // dispose of object

            g.Dispose();

        }

Figure 9.33 shows the output from Listing 9.24. The first image is the original image, the second image is a sigma bell shape, and the third image is a blend triangular shape. SetBlendTriangularShape produces a glassy effect in the center of the color, and SetSigmaBellShape produces a faded effect.

FIGURE 9.33: Comparing the effect of SetBlendTriangularShape and SetSigmaBellShape

The first parameter of SetBlendTriangularShape and SetSigmaBellShape represents the center of the gradient (color), which varies between 0.0f and 1.0f, where 0.0f is the starting point and 1.0f is the ending point of the gradient.

Now let's change the center of the gradient by modifying the two relevant lines of Listing 9.24 as follows:

            rgBrush.SetSigmaBellShape(0.8f, 1.0f);

            rgBrush.SetBlendTriangularShape(0.2f, 1.0f);

The new output looks like Figure 9.34. The center of the gradient in the second and third images is visibly different.

FIGURE 9.34: Setting the center of a gradient

Conclusion

Hope the article would have helped you in understanding Blending Using LinearGradientBrush Objects in GDI+. Read other articles on GDI+ on the website.

This book teaches .NET developers how to work with GDI+ as they develop applications that include graphics, or that interact with monitors or printers. It begins by explaining the difference between GDI and GDI+, and covering the basic concepts of graphics programming in Windows.