13,248,766 members (54,424 online)
alternative version

#### Stats

364.9K views
111 bookmarked
Posted 26 Nov 1999

# Round Buttons

, 11 Jun 2003
 Rate this:
A class that turns rectangular buttons into round buttons.

## Introduction

I wanted a button that looked exactly like normal buttons, but instead I wanted them circular. This class can be used like any other owner drawn control - simply include the header file, and declare your button controls as `CRoundButton` instead of `CButton`

First of all I make sure the buttons are circles (and not ellipses) and store the centre and radius of the button. Next I simply make the button owner drawn and draw it like every other owner drwn button, but instead of being able to use nice routines like `Draw3dRect`, I had to roll my own circle drawing routine which would draw each pixel with the correct colour dependant on the point on the circle I was drawing.

I will not include the full source in this page - it is available for download here. The owner draw part is simple and follows along the lines of any other owner drawn button. The circle drawing routine is a standard algorithm, with the only modification in calculating the pixel colour. Given two colours crBright and crDark, and an angle relative to the x-axis, the colour for a pixel can be calculated using the following.

```COLORREF GetColour(double dAngle, COLORREF crBright, COLORREF crDark)
{
#define LIGHT_SOURCE_ANGLE  -2.356    // -2.356 radians = -135 degrees,
// i.e. From the top left of the screen

ASSERT(dAngle > -3.1416 && dAngle < 3.1416);
double dAngleDifference = LIGHT_SOURCE_ANGLE - dAngle;

if (dAngleDifference < -3.1415)
dAngleDifference = 6.293 + dAngleDifference;
else if (dAngleDifference > 3.1415)
dAngleDifference = 6.293 - dAngleDifference;

double Weight = 0.5*(cos(dAngleDifference)+1.0);

BYTE Red   = (BYTE) (Weight*GetRValue(crBright) +
(1.0-Weight)*GetRValue(crDark));
BYTE Green = (BYTE) (Weight*GetGValue(crBright) +
(1.0-Weight)*GetGValue(crDark));
BYTE Blue  = (BYTE) (Weight*GetBValue(crBright) +
(1.0-Weight)*GetBValue(crDark));

return RGB(Red, Green, Blue);
}```

This is a simple linear interpolation between the two colours based on the cosine of the angle between the light source and the point. Angles are measured from the +ve x-axis (i.e. (1,0) = 0 degrees, (0,1) = 90 degrees ), but remember: positive y points down!

## Update

Tom Kalmijn kindly added routines that post-process the button image to smooth out the jagged edges. His method uses a nearest-neighbours algorithm to interpolate missing pixels. It's not particularly fast but it does increase smoothing.

## Share

Chris is the Co-founder, Administrator, Architect, Chief Editor and Shameless Hack who wrote and runs The Code Project. He's been programming since 1988 while pretending to be, in various guises, an astrophysicist, mathematician, physicist, hydrologist, geomorphologist, defence intelligence researcher and then, when all that got a bit rough on the nerves, a web developer. He is a Microsoft Visual C++ MVP both globally and for Canada locally.

His programming experience includes C/C++, C#, SQL, MFC, ASP, ASP.NET, and far, far too much FORTRAN. He has worked on PocketPCs, AIX mainframes, Sun workstations, and a CRAY YMP C90 behemoth but finds notebooks take up less desk space.

He dodges, he weaves, and he never gets enough sleep. He is kind to small animals.

Chris was born and bred in Australia but splits his time between Toronto and Melbourne, depending on the weather. For relaxation he is into road cycling, snowboarding, rock climbing, and storm chasing.

## You may also be interested in...

 First Prev Next
 Bitmap Adding Ajin Vijay25-Jul-17 4:25 Ajin Vijay 25-Jul-17 4:25
 How to add color on the Round Button vipreshshah10-Jun-15 21:19 vipreshshah 10-Jun-15 21:19
 Excellent article! DrABELL16-Sep-09 13:39 DrABELL 16-Sep-09 13:39
 A nice article Derek Bartram22-Mar-08 11:53 Derek Bartram 22-Mar-08 11:53
 how to implement this class to see the buttons toutounesan_bg14-Aug-07 12:12 toutounesan_bg 14-Aug-07 12:12
 How to add button dynamic in VB6.0? myphuong2442-Sep-05 20:32 myphuong244 2-Sep-05 20:32
 Some explanations,please... Dudi Avramov12-Dec-04 5:49 Dudi Avramov 12-Dec-04 5:49
 Re: Some explanations,please... Dudi Avramov13-Dec-04 1:14 Dudi Avramov 13-Dec-04 1:14
 Can anyone show me some good ebook about design control hoangbao6-Nov-04 3:58 hoangbao 6-Nov-04 3:58
 Dear everyone , I'm studying VC++ MFC , but now i'm on basic level , i'm very interested in customed control . i'd like to know more about this aspect , to understand the code that some experts wrote here , and will be able to write some . Thanks a lot . Hoang Bao
 How to insert this in view class mymauve2119-Mar-04 2:10 mymauve21 19-Mar-04 2:10
 Re: How to insert this in view class maruku8-Nov-04 19:58 maruku 8-Nov-04 19:58
 Re: How to insert this in view class toucherzxb25-Nov-07 21:09 toucherzxb 25-Nov-07 21:09
 Underline the shortcut character? AAntix7-Nov-03 11:15 AAntix 7-Nov-03 11:15
 how to create command button through code Anonymous30-Sep-03 5:30 Anonymous 30-Sep-03 5:30
 How To Create a Round Shape Control ? Vikrant Vikrant29-Jun-03 22:58 Vikrant Vikrant 29-Jun-03 22:58
 Not the most important thing in the world tkalmijn9-Jun-03 22:48 tkalmijn 9-Jun-03 22:48
 Re: Not the most important thing in the world Chris Maunder10-Jun-03 5:57 Chris Maunder 10-Jun-03 5:57
 Where can we declare aimenkawaz5-Oct-02 12:53 aimenkawaz 5-Oct-02 12:53
 Round Button Java Eric Minor26-Jun-02 6:38 Eric Minor 26-Jun-02 6:38
 Re: Round Button Java Sebuliba Peter1-Jan-03 20:48 Sebuliba Peter 1-Jan-03 20:48
 #How to implement a round button in C#? Anonymous24-Jun-02 7:42 Anonymous 24-Jun-02 7:42
 Kewl... HockeyDude2-Apr-02 15:35 HockeyDude 2-Apr-02 15:35
 RGN qustion kuzi6-Mar-02 6:53 kuzi 6-Mar-02 6:53
 The size of the circle Huda2-Sep-01 5:34 Huda 2-Sep-01 5:34
 Cool but... Earl Rex Arao-arao11-May-01 0:11 Earl Rex Arao-arao 11-May-01 0:11
 How to add a bitmap to the round buttons? Bernd Giesen8-Jun-00 23:52 Bernd Giesen 8-Jun-00 23:52
 real round button ?!? tuvok18-Mar-00 21:55 tuvok 18-Mar-00 21:55
 Re: real round button ?!? Doug Kaye23-Mar-00 13:57 Doug Kaye 23-Mar-00 13:57
 Re: real round button ?!? Doug Kaye23-Mar-00 13:57 Doug Kaye 23-Mar-00 13:57
 One things needs to be fixed Raghav Gupta16-Feb-00 5:58 Raghav Gupta 16-Feb-00 5:58
 One things needs to be fixed Raghav Gupta16-Feb-00 5:58 Raghav Gupta 16-Feb-00 5:58
 Last Visit: 31-Dec-99 19:00     Last Update: 18-Nov-17 11:54 Refresh 1