Submitting a Form Using an Image Tag - The TextBox Class
(Page 7 of 8 )
When creating an instance of the textBox, we will need five values. The first two are the font size and font we are using, followed by the image resource for the background image and the string of text. The fifth argument is an offset parameter. As it turns out, GD has a bug: the descenders in a text string are not taken into account when calculating the bounding box of the text (the baseline is used instead).
The offset argument is meant to pad the height measurement, in order to avoid any problem with lines running together. This will need to be adjusted based on the font and the font size that you use. It isn't a perfect solution, but it is better than the mess you would get without it. Below is the code for the textBox class.
<?php
class textBox
{
var $h = 0;
var $w = 0;
var $hpos = 0;
var $textStr = "";
var $fontSize = 12;
var $font = "";
function textBox($fontSize,$font,$image,$str,$offset)
{
$this->h = $this->getBoxHeight($fontSize,$font,$str,$offset);
$this->w = $this->getBoxWidth($fontSize,$font,$str);
$this->gethorzcoordinates($image);
$this->textStr = $str;
$this->fontSize = $fontSize;
$this->font = $font;
}
function getBoxWidth($tsize,$fontPath,$str)
{
$bbox = imagettfbbox($tsize,0,$fontPath,$str);
$w = $bbox[4] - abs($bbox[6]);
return $w;
}
function getBoxHeight($tsize,$fontPath,$str,$offset)
{
$bbox = imagettfbbox($tsize,0,$fontPath,$str);
$h = abs($bbox[7]) - $bbox[1];
return ($h + $offset);
}
function gethorzcoordinates($im)
{
$s = imagesx($im);
$this->hpos = ($s - $this->w)/2;
}
}
?>
If you haven't written any PHP classes before, but have experience with Javascript, this code syntax will seem familiar. First of all, we have some object properties that are initialized. The keyword "var" is used, and this is the only place in PHP that you will see it. Also, you may notice that the keyword "this" is used. This keyword is used in the same manner that it is used in Javascript objects where it refers to the parent object, there must be a "$" character in front of it, however.
The methods in textBox can be treated as private, though there really is no such thing as private methods in PHP. All textBox methods are called by the constructor function when an instance is created, and are intended to get the dimensions of the text bounding box and the necessary x coordinate of the left side of the box for horizontal centering.
function getBoxWidth($tsize,$fontPath,$str)
{
$bbox = imagettfbbox($tsize,0,$fontPath,$str);
$w = $bbox[4] - abs($bbox[6]);
return $w;
}
function getBoxHeight($tsize,$fontPath,$str,$offset)
{
$bbox = imagettfbbox($tsize,0,$fontPath,$str);
$h = abs($bbox[7]) - $bbox[1];
return ($h + $offset);
}
Getting the dimensions of the bounding boxes requires the imagettfbox() function and a little math. The arguments include the text size, the angle (0 in this case), the font and the text string. This function returns an array that contains the x and y coordinates of each corner of the text bounding box in relation to the text. The x coordinate of the top left corner (which is in index 6) will come out as a negative number. Use the abs() function to get its absolute value, and then subtract it from the x coordinate of the upper right corner (index 4) to get the width of the text box.
Getting the box height requires subtracting the y coordinate of the bottom left corner from the absolute value of the y coordinate of the top left corner. We then return this value added to the offset that we established earlier.
function gethorzcoordinates($im)
{
$s = imagesx($im);
$this->hpos = ($s - $this->w)/2;
}
The final method will give us a position to the right of the edge of our background image to place the text. The imagesx() function is used to get the width of the background image. The width of the text box is then subtracted from that number and the result divided by two, thus giving us an x coordinate for our text block.
As I mentioned before, getting the vertical position in which text should be placed depends on how many text blocks we have. The vertical position is determined outside of the textBox class in a separate function called getVerticalPosition().
function getVerticalPosition($image)
{
global $blockSize;
$iw = imagesy($image);
$pos = ($iw - $blockSize)/2;
return $pos;
}
This function accepts a single argument that is the image resource of our background image. It uses the imagesy() function to obtain the height of the background image. We then subtract the global $blocksize (which you may remember is the total height of all text boxes combined with offset) from the height of the background image, and divide the result by 2. This will give us a y coordinate for all the text we will be writing to the background image.
Next: From the Top >>
More HTML Articles
More By Chris Root
