Creating a filled circle in a PNG file using PHP, for use as a CSS sprite in a rounded corners box affect.

© copyright 23.Apr.2009 by Paul Bradley filed under PHP


On a recent project, I had to upgrade a database admin area for an existing site, adding the ability for users to configure the colour scheme they preferred to use. The existing site made use of css rounded corners, using four images for each quadrant of the rounded box. This is very poor for performance, as one of the main rules for speeding up a web site is to minimize the number of HTTP requests.

So I decided to use a css sprite for the rounded corners, and hence I needed a PHP function to draw a user defined coloured circle on a user defined coloured background, of a given diameter, saving the graphics file as a single PNG, so that it could be used later as the sprite and positioned using CSS.

The function I finally came up with is called CirclePng and it has four parameters. The first parameter is an integer which represents the diameter that the circle should be in pixels. The second parameter is a hex HTML code for the foreground colour that the circle will be filled with. The third parameter is a hex HTML code determining what colour the background of the image should be flood filled with. The last parameter is the name of the image file that gets saved to disk for later use.

Using the CirclePng Function

The draw circle function is used like :-

CirclePng(50, '#6CC048', '#FFFFFF', 'circle50.png');

which would produce the following green circle on a white background PNG graphics file :-

CirclePng - created with PHP

 

The Function Explained

The PHP code for the function is shown below, along with a brief explanation of each step highlighted in the code.

function CirclePng
    ($diameter, $forecolor, $backcolor, $filename) {

// [step 1]
$img_width = ($diameter + 2) * 2;
$img_1 = imagecreatetruecolor($img_width, $img_width);

// [step 2]
list ($r, $g, $b) = sscanf($backcolor, '#%2x%2x%2x');
$bkcolor = imagecolorallocate($img_1, $r, $g, $b);
imagefill($img_1, 0, 0, $bkcolor);

// [step 3]
list ($r, $g, $b) = sscanf($forecolor, '#%2x%2x%2x');
$circlecolor = imagecolorallocate($img_1, $r, $g, $b);

imagefilledarc($img_1, $diameter+1, $diameter+1,
    $img_width, $img_width, 0, 360,
    $circlecolor, IMG_ARC_PIE);

// [step 4]
$img_2 = imagecreatetruecolor($diameter+2, $diameter+2);

imagecopyresampled($img_2, $img_1, 0, 0, 0, 0,
    $diameter+2, $diameter+2, $img_width, $img_width);

// [step 5]
imagepng($img_2, $filename, 5);

// [step 6]
imagedestroy($img_1);
imagedestroy($img_2);

}

Step 1

The resulting PNG graphics file will be 2 pixels higher and wider than the supplied circle diameter, so that there is a 1 pixel margin on all four sides. To produce the smoothest looking circle, we first need to create an image twice the size than we actually need, then use the anti aliasing side affects of the imagecopyresampled command as we reduce it to the correct diameter.

Step 2

Get the red, green and blue values for the background colour and flood fill the image using the imagefill command.

Step 3

Get the red, green and blue values for the colour we need to draw the circle in; and then use the imagefilledarc command to draw a complete circle by specifying a starting angle of 0° and a closing angle of 360°.

Step 4

Create a new image for the final size we require, copy and resample the larger image into the smaller image reference.

Step 5

Save the image to a PNG file using the name supplied, and a compression setting of 5.

Step 6

Destroy the GD image references to release memory.

 


If you have found this article helpful or useful please consider linking to it, emailing it to friends, or share it with others using social sites like del.icio.us, Stumble Upon or Twitter.

Paul Bradley

About the Author
Paul Bradley is a VB.NET software developer living and working in Cumbria. He has over 20 years programming experience. He also produces e-learning videos at Linux by Example

Other Popular Articles

Categories & Topics

Home · Apache · JavaScript · Perl · PDF · PHP · MySQL · MSSQL · TAR · Ubuntu Linux · Video · Visual Basic

Browse the complete article history, and if you like what you see; consider subscribing to the rss feed.