Drawing Functions and the GD Library in PHP

If you’re a PHP developer looking for an approachable guide on how to use the popular GD extension available with PHP 4 and PHP 5, then look no further, because this series might be what you need. Welcome to the third article of the series that began with "A Close Look at the GD Library in PHP." In this group of tutorials, you’ll find distilled material on using the most important functions that come integrated with the GD library.

Introduction

As you probably recall, in the previous tutorial of the series I showed you a considerable number of practical examples to demonstrate how to utilize some of the intuitive functions bundled with the GD library. These functions dynamically generated different image streams from existing graphics.

Of course, the implementation of this concept led me straight to teaching you how to use the now familiar "imagecreatefromgif()," imagecreatefromjpeg()" and "imagecreatefrompng()" functions. These functions came in handy for creating a brand new image stream from an existing GIF, JPG, or PNG graphic.

As you have learned so far, the GD extension provides PHP developers with a great range of functions for building image streams from scratch, as well as creating streams from existing graphics. I have to admit that I’m far from covering the entirety of the helpful functions bundled with this powerful graphical library, but we have further to travel on this educational journey.

In this third article of the series I’ll show you how to take advantage of a few more handy functions integrated with this library. These function will help you perform some basic drawing operations on a specified image stream.

Hopefully, after you finish reading this tutorial, you’ll have a more solid background in how to use the GD extension to draw basic lines and characters, circles, rectangles, and other polygons too, thanks to using some simple GD functions.

So, are you ready to take your first steps into drawing with the GD extension? All right, let’s begin now!

{mospagebreak title=Taking a look at the imagearc() function}

In consonance with the concepts that I explained at the introduction of this article, the GD library comes well-equipped with a neat number of drawing functions. These functions are useful when utilized within a specific PHP application that requires the display of different types of basic shapes to users.

The GD extension can also help you create complex images, like 2D and 3D graphics, flow charts, and pie drawings, by using the appropriate set of functions provided by the library in question.

Please take a look at the following code sample, which demonstrates how to use the "imagearc()" function to display obviously different arcs. Here are the corresponding examples, so take some time and study them:

// example of ‘imagearc()’ function – draws a white arc

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // allocate a basic color
   if(!$whiteColor=imagecolorallocate($img,255,255,255)){
     throw new Exception(‘Error allocating color’);
   }
   // draw a white arc
   imagearc($img,100,100,100,100,0,360, $whiteColor);
   // display image to the browser
   header("Content-type: image/png");
   imagepng($img);
   // free memory
   imagedestroy($img);
           
}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

As you can see, the above "imagearc()" GD function is tasked with displaying several types of arcs on a given image stream. It takes up a few intuitive input parameters, such the image stream resource to draw on, the respective start and end coordinates, and finally the arc inclination and its corresponding color.

The previous script will display on the browser a white-colored arc, similar to the one shown below:

Due to the great versatility exposed by this function, it’s possible to create several types of arcs, with different colors. The following examples illustrate this concept very clearly, so have a look at them, please:

// example of ‘imagearc()’ function – draws a red arc

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // allocate a basic color
   if(!$redColor=imagecolorallocate($img,255,0,0)){
     throw new Exception(‘Error allocating color’);
   }
   // draw a red arc
   imagearc($img,100,100,100,100,0,360,$redColor);
   // display image to the browser
   header("Content-type: image/png");
   imagepng($img);
   // free memory
   imagedestroy($img);
          
}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

// example of ‘imagearc()’ function – draws a green arc

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // allocate some basic colors
   if(!$greenColor=imagecolorallocate($img,255,255,255)){
     throw new Exception(‘Error allocating color’);
   }
   // draw a green arc
   imagearc($img,100,100,100,100,0,360,$greenColor);
   // display image to the browser
   header("Content-type: image/png");
   imagepng($img);
   // free memory
   imagedestroy($img);
          
}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

Okay, at this point I believe that you now understand how to use the GB extension to draw a few basics arcs on a given image stream, thus it’s time to move forward and continue exploring more functions that come integrated with this library.

And speaking of analyzing some additional functions bundled with the GD library, in the section to come I’ll show you how to use two more functions to display some basic characters on a specified image stream.

To see how this will be achieved, jump ahead and read the next few lines. I’ll be there, waiting for you.

{mospagebreak title=Using the imagechar() and imagecharup() functions}

As I stated in the previous section, the GD library also provides PHP developers with a couple of intuitive functions for displaying single characters on a specified image stream. In this case, I’m talking about the "imagechar()" and "imagecharup()" functions respectively, whose basic usage is clearly demonstrated by the following code samples:

// example of ‘imagechar()’ function

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // allocate some colors
   $whiteColor=imagecolorallocate($img,255,255,255);
   $blackColor=imagecolorallocate($img,0,0,0);
   // display character
   imagechar($img,5,150,90,’X’,$whiteColor);
   header(‘Content-type: image/png’);
   imagepng($img);
   // free memory
   imagedestroy($img);

}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

// example of ‘imagecharup()’ function

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // allocate some colors
   $whiteColor=imagecolorallocate($img,255,255,255);
   $blackColor=imagecolorallocate($img,0,0,0);
   // display character
   imagecharup($img,5,150,90,’A’,$whiteColor);
   header(‘Content-type: image/gif’);
   imagegif($img);
   // free memory
   imagedestroy($img);

}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

As illustrated previously by the above pair of hands-on examples, displaying different characters on a specified image stream is actually a no-brainer process that can be performed with minor hassles. In the first case, a simple "X" character is included into a basic image stream via the corresponding "imagechar()" function. Quite simple, right?

In the second example, the "imagecharup()" function is properly utilized to display another basic character in front of a black-colored image stream. In this case, the character has been rotated 90 degrees clockwise, since this function allows you to specify the inclination angle used to show the character in question.

So far, so good. At this point I showed you how to display a few basic characters in front of a previously-created image stream, by using the pair of simple GD functions that you learned previously. As you may have noticed, the aforementioned functions aren’t actually as useful as the powerful "imagestring()" that you saw in the first tutorial of this series, but they did deserve a close look, since they could be helpful in certain circumstances.

Now, going back to covering the functions provided by the GD library to draw basic shapes on specific image streams, in the following section I’ll teach you how to display on the browser some primitive ellipses, something that can be quite helpful if your PHP application requires you to work with this type of shape.

To learn how to display some elemental ellipses with the GD library, please click on the link below and keep reading.

{mospagebreak title=Using the imageellipse() and imagefilledellipse() functions}

In accordance with the concepts that I expressed in the previous section, the GD library also offers a powerful set of functions for drawing basic shapes, such as ellipses, rectangles, and other polygons. However, for now, I’m going to show you only a couple of these functions, which in this case are responsible for displaying some simple ellipses on a given image stream.

That being said, here’s an example that shows how to use the brand new "imageellipse()" function to display this shape on the browser. The corresponding code sample is as follows:

// example of ‘imageellipse()’ function

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // fill the background color
   $bg=imagecolorallocate($img,0,0,0);
   // allocate elipse color
   $colEllipse=imagecolorallocate($img,255,255,255);
   // draw the ellipse
   imageellipse($img,150,100,100,200,$colEllipse);
   // display ellipse on the browser
   header("Content-type: image/gif");
   imagegif($img);

}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

As you can see, the above "imagellipse()" function is indeed very easy to grasp. It takes up as its incoming arguments an image stream resource, and them the corresponding start and end coordinates of the ellipse in question, and finally the color to be used with this shape.

Based upon the signature of the previous code sample, here’s the output that it displays on the browser:

In addition, the GD extension offers the "imagefilledellipse()" function, which behaves very similarly to the one that you learned before. In this case, however, it draws a filled ellipse on a specific image stream.

Given that, a basic implementation for this function is shown below:

// example of ‘imagefilledellipse()’ function

try{
   if(!$img=imagecreatetruecolor(300,200)){
     throw new Exception(‘Error creating image’);
   }
   // allocate blue color
   $blue=imagecolorallocate($img,0,0,255);
   // draw filled ellipse
   imagefilledellipse($img,100,90,150,100,$blue);
   header("Content-type: image/gif");
   imagegif($img);

}
catch(Exception $e){
   echo $e->getMessage();
   exit();
}

As you can see, the above "imagefilledellipse()" function is nearly identical to its counterpart "imageellipse()." However, it displays a filled ellipse on a specified image stream, as clearly illustrated by the below image:

All right, at this stage hopefully you have a much better idea of how to draw some basic shapes by using the functions that come bundled with the GD extension. For now, I recommend that you use the source code of all the examples shown here to improve your skills with using this powerful graphical library.

Final thoughts

In this third part of the series, I stepped you through using some of the most useful functions included with the GD library to display some basic string characters, on the browser, as well as a few simple arcs and ellipses.

In the next tutorial, things will get even more interesting, since I’ll teach you how to draw many other shapes by using the functionality provided by the GD extension.

Now that you’ve been warned, you won’t want to miss it!

[gp-comments width="770" linklove="off" ]

chat