CGradientRender

• Download demo project - 20.2 Kb
• Download source - 2.29 Kb

Introduction

Most programmers used Windows SDK function GradientFill to draw horizontal or vertical linear gradients or triangle gradients. Also, classes for diagonal gradients can be found on CodeProject. But what about custom gradients? Or experimental gradients? In this article, a class for drawing such gradients is presented. Its functionality is not hard-tested or free of bugs, so please have that in mind when using it.

Background

One can find various articles on gradients all over the Internet and very good examples on CodeProject also.

Using the code

To use the CGradientRender class, include the provided header file "GradientRender.h" and make an instance of this class.

#include "GradientRender.h"

CGradientRender gradientRender;

Now, this class has only one public method called DrawGradient, so call this method like in the example below:

// hDC is a destination device context (i.e. screen device context)

RECT rect = {100, 100, 300, 300};     // gradient rectangle
COLORREF startColor = RGB(0,0,255);   // start gradient color
COLORREF endColor = RGB(255,0,0);     // end gradient color
gradientRender.DrawGradient(hDC,rect,startColor, 
       endColor,GRADIENT_HORIZONTAL,TRANSFORMATION_NONE);

The last two arguments are the type of the gradient and the type of the transformation. If the type of the transformation is TRANSFORMATION_NONE then this class can perform drawing of five basic gradient types:

• Horizontal gradient (GRADIENT_HORIZONTAL)
• Vertical gradient (GRADIENT_VERTICAL)
• Forward diagonal gradient (GRADIENT_FDIAGONAL)
• Backward diagonal gradient (GRADIENT_BDIAGONAL)
• Radial gradient (GRADIENT_RADIAL)

Also, using some type of transformation, the results can vary. This is the field of customization and experimenting. Current transformations are listed below:

• No transformation (TRANSFORMATION_NONE)
• Caricature transformation (TRANSFORMATION_CHARICATURE)
• Fisheye transformation (TRANSFORMATION_FISHEYE)
• Swirled transformation (TRANSFORMATION_SWIRLED)
• Cylinder transformation (TRANSFORMATION_CYLINDER)
• Shift transformation (TRANSFORMATION_SHIFT)

In basic, these six transformations are performed on five different types of gradients. There are 30 combinations for now. Some good, some even better. But, one must experiment with the parameters of the transformation in order to get custom results, or add a new transformation which would be the best. All transformations are performed in the private method ApplyTransformation of the CGradientRender class.

Points of Interest

Working on this material, I found an interesting research field. Almost any image transformation can be applied here (even color transformation which is not tested here) and everyone is invited to try.