Rounded Corners with Transparency

GD and GD2 are useful libraries for creating graphics on-the-fly. Discuss your PHP GD and GD2 scripts here.

Moderators: onion2k, General Moderators

Rounded Corners with Transparency

Postby scuzzi » Wed Jun 20, 2007 12:44 pm

Hi,

I have spent hours and hours trying to come up with a solution and I simply cant seem to do it. What I am trying to do is, using GD2, draw a rectangle (with varying stroke) which has smooth rounded corners. The problem is that it is a border to be overlayed over a background image so the rectangle and corners need to be transparent.

I have had some success by creating graphics for the corners but when they are resampled to create the antialiasing effect it alters the colour so when I set the transparency, only some of the pixels are removed.

Can anyone help??

Example: http://www.betaversion.co.uk/rounded.php
scuzzi
Forum Newbie
 
Posts: 1
Joined: Wed Jun 20, 2007 12:40 pm

Postby dbevfat » Wed Jun 20, 2007 4:05 pm

resizing transparent images is quite tricky, because resampling doesn't keep color values intact. You've discovered that already.

I think the best way to do this would be to use a truecolor image and alpha channel, and only convert to transparent image at the end, after resizing with resample. This would have the desired effect, because you must be aware of the fact that even if you successfully resized a transparent image, the pixels that lay on the edge of the border will be background-ish (white-ish in your case) due to mixing white pixels with border pixels. These pixels wouldn't be neither border-color nor white. So if you'd then merge this image onto a background, that white artifacts will be very visible, unless the background itself is white (which it isn't, otherwise you wouldn't care about transparency).

Or, if not that, you can use 24-bit pngs if you don't mind the fact that IE6 doesn't support them.

But, anyhow, do you mind posting your code so I can take a look? I have some experience with resizing, because I've managed to handle it in my image library (see my sig). It doesn't support drawing, but maybe you'd find it useful.

regards
User avatar
dbevfat
Forum Contributor
 
Posts: 126
Joined: Tue Jun 28, 2005 2:47 pm
Location: Ljubljana, Slovenia

Postby onion2k » Wed Jun 20, 2007 4:43 pm

dbevfat wrote:Or, if not that, you can use 24-bit pngs if you don't mind the fact that IE6 doesn't support them.

IE6 can be made to support 32 bit PNG files.
User avatar
onion2k
Jedi Mod
 
Posts: 5263
Joined: Tue Dec 21, 2004 6:03 pm
Location: usrlab.com

Postby dbevfat » Wed Jun 20, 2007 4:47 pm

My mistake, I meant 32, not 24 bit. And yes, it can be done, but only through CSS which may not be good enough and requires the image to be displayed within an HTML document.
User avatar
dbevfat
Forum Contributor
 
Posts: 126
Joined: Tue Jun 28, 2005 2:47 pm
Location: Ljubljana, Slovenia

Re: Rounded Corners with Transparency

Postby oggame » Tue Mar 09, 2010 4:48 am

that php rounded corners looks great, thanks for sharing
oggame
Forum Newbie
 
Posts: 2
Joined: Tue Mar 09, 2010 4:45 am


Return to PHPGD.com

Who is online

Users browsing this forum: No registered users and 4 guests