This post involves a little more complex example of what imagick can do. I am going to show you how to use the draw object to create an button which has rounded corners and a multi-colored curve accent using the “bezier” function of the ImagickDraw object.

First, lets get things set up. We are using four colors for this example. The border color, the accent color, the bezier curve color, and the font color. The bezier curve color in this example is placed over the accent color at 50% alpha to darken it. If you want a specific color, simply change the fill alpha value to 1 and change the bezier color to whatever you want. Note that this example’s image dimensions (as well as the coordinates of the bezier curve) are specific to the text “go” and the font sizes specified. If you want to change the text, you will have to play with these values to make it look right.

Once you’ve set up your colors, the script creates a new imagick object with background color of what you’ve specified in the “accent” color. The script then creates a new ImagickDraw object for the bezier curve. Next is the array of coordinates for the bezier curve to follow. You can have as many points in the curve as you want, but remember that the last point to have in the array will automatically be connected to the first point by the ImagickDraw object. You’ll notice that this script ends it’s curve well outside the x bounds of the image, but the y portion of the coordinate is at 0. This is done so when the draw object connects the first and last points, its at the top of the image and not cutting through the middle of the image making it look wacky.

The rest of the script is fairly straight forward. It continues adding to the draw object by setting the alpha value of the fill color to 1 for the text it’s about to write on the image. Then it draws the bezier curve and the text to the first canvas it set up. It then rounds the edges of the canvas to get the rounded corner effect.

The last step of the script is to create the border, or in this example, a rounded corner fill image that is slightly larger than the canvas the script just created with the text and the bezier curve. Once the corners are rounded on this new canvas, the script composites the first image on top of the second. And its done. The resulting image is outputted to the browser. Uncomment the caching code if you wish to write the resulting image to the server.

<?
 
$border = "#000000";
$accent = "#1365B1";
$bezier = "#000000";
$fontcolor = "#FFFFFF";
$text = "go";
 
$fontfile = "/path/to/your/fontfile.ttf";
 
//$cachefile = './path/to/your/cachefile.png';
//if (!file_exists($cachefile)) {
 
 
	try{
 
		$canvas = new Imagick();
		$canvas->newImage(30, 24, $accent, "png");
 
		$draw = new ImagickDraw();
 
		$draw->setFillColor($bezier);
		$draw->setFillAlpha(.5);
		$draw->bezier(
			array(
				 array("x" => 0, "y" => 0),
				 array("x" => 5, "y" => 8),
				 array("x" => 10, "y" => 11),
				 array("x" => 15, "y" => 15),
				 array("x" => 23, "y" => 18),
				 array("x" => 35, "y" => 30),
				 array("x" => 55, "y" => 0)
			 )
		);
 
		$draw->setFillAlpha(1);
		$canvas->drawImage($draw);
		$draw->setFontSize(16);
		$draw->setFillColor($fontcolor);
		$draw->setFont($fontfile);
		$canvas->annotateImage($draw, 7, 16, 0, $text);
		$canvas->roundCorners(2,2);
 
		$canvas2 = new Imagick();
		$canvas2->newImage( 32, 26, $border, "png" );	
		$canvas2->roundCorners(2,2);
		$canvas2->setImageFormat('png');
 
		$canvas2->compositeImage($canvas,Imagick::COMPOSITE_OVER,1,1);
 
		header( "Content-Type: image/png" );
		echo $canvas2;
 
 
		$canvas->clear();
		$canvas->destroy();
		$canvas2->clear();
		$canvas2->destroy();
 
		//$canvas2->writeImage($cachefile);
 
	}catch(Exception $e){
		echo 'Error: ',  $e->getMessage(), "";
	}
 
/*
}else{
 
	$canvas = new imagick($cachefile);
	header("Content-Type: image/png");
	echo $canvas;
 
}
*/
 
?>

NOTE: the cachefile folder must be writable by the server.