MorkaLork Development

Interesting stuff I've picked up over the years...

PHP/Drawing

2009-05-13 12:26:17 | 248 views | php draw drawing lines rectangles geometrical figures gd library

Introduction:


In this guide you will learn how to use some functions to draw lines, rectangles and different geometrical figures with some of the image functions in PHP provided by GD Library.


Prerequisites:


None, but if you feel unsure when you use the functions described in this guide, check them up at php.net and see if what you find there can help you to understand them better!


Requirements:


PHP 4+ with GD Library


Getting the business started:


First of all we need to create an image:


<?php

$image = imagecreate(200, 200);

?>


Here we call the function imagecreate() which demands two integers with the pixel value of width and height. Then we store the image resource that was created in $image.

If we would want to output this to our browser we have to use to add a little code:


<?php

$image = imagecreate(200, 200);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

?>


The header() function tells the browser that it should expect an image in png format. The imagepng() function sends the image to the browser. Actually you could skip header() and it will still work, at least in modern versions of PHP(with GD library). The imagedestroy() function frees up the memory of the image from the server. You could skip this to, but I would recommend that you use both imagedestroy() and header() when you create images using PHP.

From here we should grab some colors for our image:
(place this code before the header() function and after the imagecreate() function )


<?php

$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);

?>


The first call to the imagecolorallocate() function fills the backround color in palette based images - like the one we created with the imagecreate() function. The imagecolorallocate() function requests an image resource identifier and RGB(red, green, blue) values from 0-255.


Our image should now look like this:

imagehttp://www.morkalork.com/admin/uploads/WimpySE/images/BILD1_TextGuide.png

Now we are going to do some drawing:
(place this code after the color grabbing code)


<?php

imageline($image, 10, 10, 10, 190, $white);
imageline($image, 10, 10, 190, 10, $white);
imageline($image, 10, 190, 190, 190, $white);
imageline($image, 190, 190, 190, 10, $white);

?>


The imageline() function simply draws a line from point A to B, defined by the four integer values, first value is first points X-coordinate, second value, is the first points Y-coordinate, third is second the point's X-coordinate an so on. So, the imageline() function requests an image resource, the coordinates for the line and a color identifier.

As you might have guessed the above code simply draws a white rectangle in the picture 10 pixels from the border. This job could be done by using other functions and would still look the same, for example you could use the imagepolygon() function:


<?php

$points = array(10, 10, 190, 10, 190, 190, 10, 190);
imagepolygon($image, $points, 4, $white);

?>


This function requests an image resource, an array with the points to draw lines between, an integer value of the number of points to draw and a color. If you try this code you will get the exact same picture as with the code above.

So, now I have given you two examples of how to write a rectangle with two different functions but I also have got to show you how to use most simple function of them all to the same, the imagerectangle() function:


<?php

imagerectangle($image, 190, 190, 10, 10, $white);

?>


The imagerectangle() function requests as the others an image resource, but instead of four points it just need to, the top-left one, and the bottom-right one. Or, in fact, any other combination, bottom-left and top-right, bottom-right and top-left, it all will work and the image will still look the same. Also it just need one simple line of code.

All of the three above examples will output this image:

imagehttp://www.morkalork.com/admin/uploads/WimpySE/images/BILD1_DrawArticle.png

Well, let's move on exploring other functions, save the file you working with(if you are working with one) and make a copy of it. Open the copy and delete all code that draw stuff (imagerectangle, imageline, imagepolygon).

Now we are going to work with arcs and ellipses, try this code:


<?php

imageellipse($image, 100, 100, 150, 150, $white);

?>


The imageellipse() function requests an image resource, the coordinates for the center of the ellipse, the height and the width in pixels, and a color identifier. It simply draws an ellipse according to its given instructions. You should now be able to see a circle in the image.

As with rectangles you could create a circle with more than the imageellipse() function here's how you could use the imagearc() function to do the same work:


<?php

imagearc($image, 100, 100, 150, 150, 0, 360, $white);

?>


The imagearc() function takes the same parameters as imageellipse plus two values that tells PHP where to start drawing the arc and where to stop drawing the arc, you can in other words draw half of a circle if you wish. This is the one advantage with imagearc.

Both above examples should output something that looks like this:

imagehttp://www.morkalork.com/admin/uploads/WimpySE/images/BILD2_DrawArticle.png

So, what can you do with these functions? Well try this out:


<?php

$image = imagecreate(200, 200);

$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);

imageellipse($image, 100, 100, 150, 150, $white);

imageellipse($image, 75, 70, 20, 25, $white);
imageellipse($image, 125, 70, 20, 25, $white);

imagefilledellipse($image, 75, 70, 5, 8, $white);
imagefilledellipse($image, 125, 70, 5, 8, $white);

imagefilledellipse($image, 75, 70, 2, 3, $black);
imagefilledellipse($image, 125, 70, 2, 3, $black);

imagefilledellipse($image, 100, 100, 10, 15, $white);


imagearc($image, 75, 70, 24, 29, 360, 539, $white);
imagearc($image, 125, 70, 24, 29, 360, 539, $white);

imagearc($image, 75, 70, 30, 35, 240, 360, $white);
imagearc($image, 125, 70, 30, 35, 180, 300, $white);

imagearc($image, 100, 110, 120, 90, -10, 140, $white);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

?>


To see what this looks like and so on, you have to try it yourself! :) Have fun!

Stuff to think of:



None, actually, except for the fact that some older browsers may not have support for PNG format, so you should take a look at how to create your images in other formats like GIF or JPG, it's not that different actually! Check imagegif() and imagejpeg() out at php.net

Guide written by,
WimpySE



Article comments

Feel free to comment this article using a facebook profile.

I'm using facebook accounts for identification since even akismet couldn't handle all the spam I receive every day.