Rounded Corners

Powwownow is available in so many countries that we offer comprehensive lists of dial-in numbers in PDF form.  There are a great many combinations of services and languages and we are adding new access numbers all the time so these PDFs are generated automatically by computer.  I was updating these last week and, as part of that, it came to my attention that the rounded corners weren’t working.  We had been using four little images in the background with the corners drawn on by hand.  Sadly, when customers printed the PDF, background images often weren’t shown.  That wasn’t a big problem, as long as you don’t mind the marketing department sawing off your head with a rusty spoon.

It immediately occurred to me that drawing the corners on with vector lines would make the most sense; there’s no way they wouldn’t be printed.  Unfortunately the PDF generator we use (FPDF) only draws straight lines, not circles, so I needed to figure out a way to achieve the same result using only straight lines.  I needed trigonometry.  It was just like being back in maths class in school!  I flicked ink at the boy next to me, blew spit balls at the office manager when his back was turned and stared at the clock.  Then I did some trigonometry.

I started out, above, trying to figure out a formula for moving from one point on the cricle to another but then realised that even if I succeeded, it would just leave me with a hollow circle, not a solid one. So I changed tack and realised it was blindingly simple.

If you start from the centre point, the co-ordinates of any one point on a circle can be expressed as x=radius*sin(angle), y=radius*cos(angle).  Both sin() and cos() are available within PHP so my plan was to start from the corner I wanted to “round off” and draw a series of white lines inwards to the border of an imaginary circle.  If there were enough lines they would cover up a sort of curved rectangle shape and make the corner look rounded.

PHP works in radians, which are like degrees except there are 2*pi radians in a full circle instead of 360.  Each corner has a range of 0.5*pi radians and zero is at the 3 o’clock position in the FPDF plugin .  To the right is a table showing the ranges each corner needs to use.   Because I’m lazy to a fault, I wrote a little loop to create an array of the boundaries marking the limits of each range.

Once that was ready, all I had to do was define which corner I wanted, from 1 to 4, and I’d be able to pull two adjacent numbers from the array to find the start and end of any quadrant I liked.  Once I had these boundaries, I could start at the lower end and draw a line, then add 0.1 and draw another line.. and so on until I reached the upper limit.  And you know what?  It worked!  In this image, you can see the original sharp corner on the far left and then the first attempt at drawing the lines in next to it.

Not bad, eh?  The next step was to change the line colour from red to white (obviously) and reduce the size of the step to make the lines so dense that it looked like a solid shape.  Rather than simply reduce the interval between lines from 0.1 to 0.01 I set the interval to 1/radius so it would get smaller as the corner got bigger.  That way, if anyone decided to make a bigger corner in the future, instead of gaps showing, it would simply draw more and more lines to make sure the shape was always solid white.

You can see in the middle of the imagea above what that looked like – pretty good, no?  The next step was to do the other three corners. Obviously, to get the appropriate curve, the imaginary circle should be inside the main coloured area, offset by a distance of one radius in both the x and y directions. However, that was a bit of a challenge – think about how you have to move in a different direction at each corner:

The sharp eyed among you will have noticed that the X offsets are the same in the middle and the Y offsets are in groups of two. So I wrote some cunning one-line logic statements to calculate the X and Y offset on-the-fly before adding (or subtracting) from the co-ordinates of the corner to produce my origin point.  Then I had the combination of an appropriately offset circle centre and the correct range of angles from before.

One other problem you may have noticed was a slightly ragged edge where the straight ends of the lines themselves were clearly visible at the ends of my overlay shape. So I subtracted from the offset value to put the circle just a tad outside where it should have been which keeps those rough ends away from the coloured area.  The far right above shows the final result and very satisfactory it is too.

Well, that’s job done in my book.   But of course I’m forgetting the most important stage: mess around with the settings to produce beautiful moire patterns all over the international dial-in PDF!

A vast improvement, I’m sure you’ll agree. Interested art gallery owners can reach me at the usual address…!

The finished function:

function corner ($pdf, $cnr, $x, $y, $r) {
	/*
	$pdf = fpdf object
	$cnr = corner number, 1 to 4
	$x and $y = coordinates of corner point
	$r = radius of corner curve
	*/

	// white to match document background
	$pdf->SetDrawColor(255,255,255);

	// define four sector ranges in radians
	for ($i=0;$i<=2;$i+=0.5) {
		$lim[] = $i*pi();
	}

	// find x and y of virtual circle's origin by adding a small offset
	$d = $r-0.1; // offset only needs to be tiny
	$ox = $x + ($cnr>1&&$cnr<4 ? $d : -$d); // 2 and 3 vs 1 and 4
	$oy = $y + ($cnr>2 ? +$d : -$d); // 1 and 2 vs 3 and 4

	$step = 1/($r*10);// more lines if it's larger
	for ($a=$lim[$cnr-1];$a<=$lim[$cnr]+$step;$a+=$step) {
		$yy = $r*sin($a);
		$xx = $r*cos($a);
		$pdf->Line($x,$y,$ox+$xx,$oy+$yy);
	}

}