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.

In this post I will show you how to “draw” a rounded rectangle with a border. This will involve creating a new ImagickDraw object, then applying your draw settings to an Imagick object.

First, set up all your colors, image size, border width, and corner radius. After you have set all the input variables, the script will calculate the dimensions of the rectangle you are going to draw within the size of your image. To do this you must subtract the size of the border from the height and width of your desired image size, otherwise the rectangle will get cut off.

Then the script creates a new Imagick object, and applies your background color. The next step is to create your ImagickDraw object and set your fill color. If you have specified a border width greater than 0, the script will set the stroke color and width. Now the script sets up the rounded rectangle with all the settings you specified in the first step and what the script had calculated for the rectangle’s height and width.

Once the ImagickDraw object is all set up, the script will “draw” it onto the Imagick canvas previously created. And Voila! You have a rounded rectangle with a border. Uncomment the caching code if you want to have the script save the resulting image to disk.

<?
 
$background = "transparent";
$fillcolor = "#C5E3FF";
$bordercolor = "#226FB6";
$borderwidth = 2;
$cornerradius = 10;
 
$height = 300;
$width = 300;
 
//$cachefile = 'path/to/your/cachefile.png';
//if (!file_exists($cachefile)) {
 
	try{
 
		$rectwidth = ($borderwidth>0?($width-($borderwidth+1)):$width-1);
		$rectheight = ($borderwidth>0?($height-($borderwidth+1)):$height-1);
 
		$canvas = new Imagick();
		$canvas->newImage($width, $height, $background, "png" );
 
		$draw = new ImagickDraw();
		$draw->setFillColor($fillcolor);
		if($borderwidth>0){
			$draw->setStrokeColor($bordercolor);
			$draw->setStrokeWidth($borderwidth);
		}
		$draw->roundRectangle($borderwidth, $borderwidth, $rectheight, $rectwidth, $cornerradius, $cornerradius);
 
		$canvas->drawImage($draw);
 
		//$canvas->writeImage($cachefile);
 
		header("Content-Type: image/png");
		echo $canvas;
 
		$canvas->clear();
		$sanvas->destroy();
 
	}catch(Exception $e){
		echo 'Error: ',  $e->getMessage(), "";
	}
 
/*
}else{
 
	$canvas = new imagick($cachefile);
	header("Content-Type: image/png");
	echo $canvas;
 
}
*/
 
?>

NOTE: “$cachefile” path must be writable by the server if you want to save the image to disk.