Adobe Photoshop has two very professional controls that are used for effects such as Drop Shadow and Bevel and Emboss: one being the angle selector control and the other being the angle and altitude selector control.
In this article, we will go through the process of creating two C# custom controls to mimic the appearance and behavior of those in Photoshop.
The Foundation - Math to Know
The Pythagoras Theorem lets us calculate the hypotenuse of a right triangle (the longest side). The formula is
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>. Thus, the hypotenuse,
c, will always equal the square root of
a<sup>2</sup> + b<sup>2</sup>.
Since we will be working with angles and circles, it will be helpful to be familiar with the format of a unit circle. The unit circle is simply a circle with a radius of 1 centered at the point
(0, 0) on a conventional grid. The angle
0 starts at point
(1, 0) [the right], and increases counterclockwise. Thus, angle
90 is at
(0, 1), angle
180 is at
(-1, 0), angle
(0, -1), and
360 back at the
We will only need the three basic trig functions:
tan. If we remember soh cah toa, we know that sine in a triangle is equal to the opposite leg over the hypotenuse, cosine is equal to the adjacent over hypotenuse, and tangent is equal to the opposite over adjacent.
Also remember that the inverse trig functions are used to calculate an unknown angle.
Both of our custom controls will share two important functions:
- One to take an angle and a radius and return the corresponding
Point location on a circle around a specified origin. (Basically, convert an angle to a point.)
- One to do the opposite, take a point
(X, Y) and find the closest matching angle.
The first function is the simpler of the two:
private PointF DegreesToXY(float degrees, float radius, Point origin)
PointF xy = new PointF();
double radians = degrees * Math.PI / 180.0;
xy.X = (float)Math.Cos(radians) * radius + origin.X;
xy.Y = (float)Math.Sin(-radians) * radius + origin.Y;
The thing to note is we first need to convert the angle into radians. (Converting Degrees into Radians.) But, for the general concept, we only need to visualize our unit circle:
The function has the angle and radius, so using trig, we can figure out the
Y values as if it were a triangle. To center the values on the specified origin, we only need to add the origin’s initial coordinates.
Also notice that the function uses the opposite value of the angle for the
Y component. That is to accommodate the fact that the grid on the computer monitor is upside down compared to a conventional grid. (Positive values go downward on the computer.)
The second function is so the user can click on our control and the point can be converted into a matching angle. It is only trickier because we need to add some things into consideration. To keep the article at a reasonable length, I’ll post part of it:
private float XYToDegrees(Point xy, Point origin)
double angle = 0.0;
if (xy.Y < origin.Y)
if (xy.X > origin.X)
angle = (double)(xy.X - origin.X) / (double)(origin.Y - xy.Y);
angle = Math.Atan(angle);
angle = 90.0 - angle * 180.0 / Math.PI;
else if (xy.X < origin.X)
else if (xy.Y > origin.Y)
if (angle > 180) angle -= 360;
The main gist of the function is to check the mouse’s position against the center of the control to determine on which of the four unit circle quadrants the point is in. Once we know the quadrant, we can use trig (the inverse of tangent) to figure out the angle.
For these controls, I subtract
360 degrees from the angle if it’s larger than
180. This keeps the angles between
180 as Photoshop does. However, that is optional and the control will work without that line.
Building the Control
Drawing the Control
The background for both controls will be the same:
- The outline of the circle drawn with a
- A 40% opacity (about
100 value) white fill.
- A 3x3 pixel square at the center of the control.
protected override void OnPaint(PaintEventArgs e)
g.SmoothingMode = SmoothingMode.AntiAlias;
g.SmoothingMode = SmoothingMode.HighSpeed;
The important part to note is the
SmoothingMode property. Set it to
AntiAlias when drawing the circle to make the control look smooth and professional. But, if we draw the square with
AntiAlias, the edges come out fuzzy. The workaround is to set the
SmoothingMode back to
HighSpeed, making the edges sharp again.
The marker part of the drawing depends on the control. The simple angle selector needs only to create a line from the origin to the point returned by our
DegreesToXY function. The angle and altitude angle will instead plot a 1x1 rectangle at that point and then draw four cross marks.
Handling User Clicks
Handling the user clicks is extremely simple, thanks to our
XYToDegrees function. To successfully mimic the behavior of the Photoshop version of our controls, we will need to set up the
MouseMove events. That way, the values are updated on-the-fly. Here is the helper function:
private int findNearestAngle(Point mouseXY)
int thisAngle = (int)XYToDegrees(mouseXY, origin);
if (thisAngle != 0)
The altitude control will need an additional step, which is to find the distance between the center of the custom control and the mouse’s click point:
private int findAltitude(Point mouseXY)
float distance = getDistance(mouseXY, origin);
int alt = 90 - (int)(90.0f * (distance / origin.X));
if (alt < 0) alt = 0;
Altitude, as measured in Photoshop, is
90 when the selected point is exactly on the origin, and
0 when it is at the edge of the control. Thus, we figure out the altitude by finding the ratio of the length of the radius and the length between the point clicked and the origin. Then, subtract it from
90 to essentially “flip” the values (
To make the custom controls even more professional, they need to programmatically be able to alert when one of its values changes. This is where custom events come in.
For example, to create an event for when the angle changes, first it’s defined like so:
public delegate void AngleChangedDelegate();
public event AngleChangedDelegate AngleChanged;
Then, all we need to do is call
AngleChanged() (making sure that it isn’t null first) whenever we change the
Angle property within the custom control.
Limitations and Improvements
There is none! The .NET Framework 2.0 and up comes with the
DoubleBuffer property that only needs to be set to
true when constructing the control. The Framework takes care of the work to make sure the control is smoothly redrawn.
Since both controls rely on math that assumes the radius to be equal at all times, the width and height dimensions must always be equal for the control to look and work correctly.
I did not include properties for the background and outline colors of the control since I was going for the Photoshop look. However, look over the code and see that it wouldn’t be too hard to change the colors to your liking or even make them dynamic.
I recommend you download the project files (or at least the sample application) so you can see how well the controls come together.
As for the uses and applications of the controls, that is up to your imagination.