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