ARTICLE

Blending Using LinearGradientBrush Objects in GDI+

Posted by Mahesh Chand Articles | GDI+ & Graphics April 03, 2010
In this article I will explain about Blending Using LinearGradientBrush Objects in GDI+.
Reader Level:
Download Files:
 

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.jpg

FIGURE 9.29: Using linear gradient brushes

Figure 9.30.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.

bookGDI.jpg
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.

erver'>
COMMENT USING

Trending up