Page 1 of 1

A beginners look at the GD library part 2/3 Rate Topic: -----

#1 JBrace1990  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 109
  • View blog
  • Posts: 760
  • Joined: 09-March 08

Posted 10 June 2008 - 11:26 AM

This is the second of a three part tutorial on the GD library and the functions contained within.

Creating shapes is probably one of the most overlooked and underused functions.

Creating Simple Shapes


imagearc: imagearc is a complex function that may take a while to use effectively. it creates part (or all) of a circle on an image. As seen below, there are several parts to the function, and it will take some getting used to before you can master it. the arc produced is not filled, and can use Alpha Transparency colors
imagearc($img, //designates the image it should be applied to
50, //refers to the X coordinate of the center
50, //refers to the Y coordinate of the center
3, //sets the arc width (in pixels)
30, //sets the arc height (in pixels)
300, //the arc start angle in degrees (0 degrees is at 3 on a clock
0, //the arc end angle in degrees
$white); // the color of the arc


imageellipse: creates an ellipse in the target image. the ellipse can be any height or width, as long as it is not larger then the image itself. the ellipse is unfilled, and can use Alpha transparency colors.
imageellipse($img, //sets which image to use it on
50, //sets the center of the ellipse at the X coordinate
50, //sets the center of the ellipse at the Y coordinate
3, //sets the ellipse width
5, //sets the ellipse height
$white); //sets the color of the ellipse


imagefilledellipse: Produces a filled Ellipse starting at the given coordinates and of the target size. Alpha transparency is possible, and the ellipse must not be larger then the actual image. Alpha transparency is possible.
imagefilledellipse($img, //sets the target image
50, //sets the starting X coordinate
50, //sets the starting Y coordinate
10, //sets the width of the ellipse in pixels
15, //sets the height of the ellipse in pixels
$white); //sets the color of the ellipse


imagefilledrectangle: This function creates a 2D rectangle. You set 2 points in the initial coding, and the rectangle fills from the first to the last. The color can be changed. as always, 0,0 is the starting top left position.
imagefilledrectangle($img, //sets the image to apply this to
0, //sets the starting X coordinate
0, //sets the starting Y coordinate
25, //sets the ending X coordinate
25, //sets the ending Y coordinate
$white); //sets the color of the rectangle.


imagerectangle: Creates a hollow rectangle between the starting and ending coordinates. 0,0 is the top left position. The rectangle must not be larger then the actual image. the color refers to the border of the image.
imagerectangle($img, //sets the image to apply this to
0, //sets the starting X coordinate
0, //sets the starting Y coordinate
25, //sets the ending X coordinate
25, //sets the ending Y coordinate
$white); //sets the color of the rectangle border


imageline: produces a line from the starting coordinates to the ending coordinates. The width of the line can not be modified, and is always 1 pixel in width. Alpha Transparency colors can be used.
imageline($img, //sets the image to apply it to
0, //designates the starting X coordinate
0, //designates the starting Y coordinate
25, //designates the ending X coordinate
25, //designates the ending Y coordinate
$black(; //sets the color of the line



Creating Advanced Shapes


Yes, there are advanced shapes as well. Polygons require arrays instead of given points. Alpha Transparency can be used on all of them.

the following two functions contain arrays. $position[0] is the fist X coordinate. $position[1] is the first Y coordinate. $position[2] is the second X coordinate, and the pattern continues for the rest of the coordinates listed. they will always be in an X,Y format.

imagepolygon: creates a polygon. the amount of sides can be modified. their locations are set in an array containing the values in an X,Y format. It is important to note, that the polygon will loop back to the beginning after it has reached it's max corners.
$positions = array(0,0, //starting and last position
100,100, //second position
100,40, //third position
30,25); //fourth position
imagepolygon($img, //designates the image the polygon will be applied to
$positions, //is the array containing the values listed above
4, //sets that there will be 4 vertices (vertex)
$white); //sets the color of the polygon


imagefilledpolygon: creates a polygon. the amount of sides can be modified. their locations are set in an array containing the values in an X,Y format. It is important to note, that the polygon will loop back to the beginning after it has reached it's max corners. This version of the polygon will be filled.
$positions = array(0,0, //starting and last position
100,100, //second position
100,40, //third position
30,25); //fourth position
imagepolygon($img, //designates the image the polygon will be applied to
$positions, //is the array containing the values listed above
4, //sets that there will be 4 vertices (vertex)
$white); //sets the color of the polygon


Creating Filled Arcs

I have decided to make filled arcs their own sub section, because I want to explain the different types of filled arcs you can produce, or you may come across.

there are 4 types of filled Arcs you can make:
  • IMG_ARC_PIE
  • IMG_ARC_CHORD
  • IMG_ARC_NOFILL
  • IMG_ARC_EDGED



IMG_ARC_CHORD: when IMG_ARC_CHORD is used, the starting and ending angles of the arc will be connected with a Straight Line.

IMG_ARC_PIE: Produces a rounded edge from the starting and ending angles. They will be connected with an unfilled arc.

IMG_ARC_NOFILL: when IMG_ARC_NOFILL is used, the 3D arc is no longer filled, it is made hollow, with only an outline.

IMG_ARC_EDGED: IMG_ARC_EDGED is used in Conjunction with IMG_ARC_NOFILL. When combined, the starting and ending angles of the arc are connected at the center. This gives it a "Pie Slice" type of cut.

imagefilledarc
imagefilledarc($img, //sets the target image to apply the shape to
50, //Sets the X coordinate of the center of the arc
50, //Sets the Y coordinate of the center of the arc
5, //Sets the arc Width
5, //Sets the arc Height
300, //The start Angle in degrees
0, //the end of the arc, in degreed
$red, //sets the color of the arc
IMG_ARC_PIE); //sets the arc style, as posted above


And this brings us to the end of Part 2. Part 3 will be about advanced GD functions, including copying and color searching.

Is This A Good Question/Topic? 1
  • +

Page 1 of 1