Problem on overlaying translucent images (GD)

Hi all,

In php if I draw two translucent shapes with some parts of the one overlaying on the other, the overlaid parts will have a darker colour:

i.e. the following code…

<?php $im = ImageCreateTrueColor(150,150); $blue = ImageColorAllocate($im,150,150,255); ImageFilledRectangle($im,0,0,150,150,$blue); $gray = ImageColorResolveAlpha($im,70,70,70,63); ImageFilledRectangle($im,10,10,80,80,$gray); ImageFilledRectangle($im,60,60,120,120,$gray); header('Content-Type: image/png'); ImagePNG($im); ?>

… will give an image as follows:

However, what should I do in order to eliminate the discrepancy in the colour of the two areas (the overlaid parts have the same colour as the non-overlaid parts)? i.e. I’m planning to create a image like the following (I’ve added a red circle to show that the gray area is really translucent)…

…which I made using the following code:

<?php $im = ImageCreateTrueColor(150,150); $blue = ImageColorAllocate($im,150,150,255); $red = ImageColorAllocate($im,255,0,0); ImageFilledRectangle($im,0,0,150,150,$blue); $gray = ImageColorResolveAlpha($im,70,70,70,63); ImageFilledEllipse($im,50,90,40,40,$red); ImageFilledPolygon($im,array(10,10,10,80,60,80,60,120,120,120,120,60,80,60,80,10),8,$gray); header('Content-Type: image/png'); ImagePNG($im); ?>

In my actual project, the areas are of course more complex than this simple rectangle problem, and so I need an easier way to achieve this, e.g. by adding a suitable command while I draw the rectangles (or ellipses or polygons).


I’m not familiar with the GD library, but my common sense tells me that you’re drawing ‘objects’, which, if tranlucent and overlaid, render into a darker color by default. If you don’t want that, you’re going to have to make them one object: a polygon. Perhaps there’s some obscure setting that would globally turn the darker overlaid part off, but the question is if that’s really what you want.

I finally overcame this problem by drawing on a transparent image and then merging it with the original one and setting a transparency percentage.

Thanks anyway!

Sponsor our Newsletter | Privacy Policy | Terms of Service