Draw a color wheel in C#

The program uses a PathGradientBrush to fill the color wheel. Drawing the wheel is basically automatic but takes some effort to set up. The following DrawColorWheel method draws does all the work.

// Draw a color wheel in the indicated area.
private void DrawColorWheel(Graphics gr, Color outline_color,
int xmin, int ymin, int wid, int hgt)
{
Rectangle rect = new Rectangle(xmin, ymin, wid, hgt);
GraphicsPath wheel_path = new GraphicsPath();
wheel_path.AddEllipse(rect);
wheel_path.Flatten();

int num_pts = (wheel_path.PointCount - 1) / 3;
Color[] surround_colors = new Color[wheel_path.PointCount];
float r = 255, g = 0, b = 0;
float dr, dg, db;
dr = -255 / num_pts;
db = 255 / num_pts;
for (int i= 0; i < num_pts; i++)
{
surround_colors[i] = Color.FromArgb(255, (int)r, (int)g, (int)b);
r += dr;
b += db;
}

r = 0; g = 0; b = 255;
dg = 255 / num_pts;
db = -255 / num_pts;
for (int i = num_pts; i < 2 * num_pts; i++)
{
surround_colors[i] = Color.FromArgb(255, (int)r, (int)g, (int)b);
g += dg;
b += db;
}

r = 0 ; g = 255 ; b = 0;
dr = 255 / (wheel_path.PointCount - 2 * num_pts);
dg = -255 / (wheel_path.PointCount - 2 * num_pts);
for (int i = 2 * num_pts; i < wheel_path.PointCount; i++)
{
surround_colors[i] = Color.FromArgb(255, (int)r, (int)g, (int)b);
r += dr;
g += dg;
}

using (PathGradientBrush path_brush = new PathGradientBrush(wheel_path))
{
path_brush.CenterColor = Color.White;
path_brush.SurroundColors = surround_colors;

gr.FillPath(path_brush, wheel_path);

// It looks better if we outline the wheel.
using (Pen thick_pen = new Pen(outline_color, 2))
{
gr.DrawPath(thick_pen, wheel_path);
}
}

//// Uncomment the following to draw the path's points.
//for (int i = 0; i < wheel_path.PointCount; i++)
//{
// gr.FillEllipse(Brushes.Black,
// wheel_path.PathPoints[i].X - 2,
// wheel_path.PathPoints[i].Y - 2,
// 4, 4);
//}
}

First, the program makes a GraphicsPeth object and adds an ellipse to it. This will be the ellipse occupied by the wheel.

When you make a PathGradientBrush, you specify colors for the points along the path. Unfortunately the points for an ellipse are control points not points on the ellipse itself. The program calls the path object's Flatten method to convert the ellipse into a series of line segments. Now the points do lie along the flattened path.

The program loops through the points building an array of corresponding colors. The colors vary smoothly from red to blue to green.

Next the code creates a PathGradientBrush, sets the central color to be white, and assigns the array of colors to the points on the path. Finally it fills the path with the brush.

The filled path has slightly rough edges so the program draws an outline around it to smooth them out. In this example, the outline uses the form's background color so the result appears to be a wheel with no outline and smooth edges.

   

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments
  • No comments exist for this post.
Leave a comment

Submitted comments are subject to moderation before being displayed.

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.