Image Transparency

[mait]

In my application I am drawing some gauges directly onto a bitmap canvas and have been using a standard TIWImage component to display the results. The TIWImage component supports transparency (as long as the IOType is set to PNG).

I want to add a context menu to the image so am trialling the TIWCGJQImage component. This component supports the context menu but I cannot find a way to render transparent images. Can this be done?

[Alexander Bulei]

Hi mait,

Use PNG image directly, our TIWCGJQImage component supports PNG format.

Best Regards.

[mait]

Thanks for the reply Alexander. However, I am not loading a PNG file from disk. I am manually drawing an image onto the IWCGJQImage.Picture.Picture.Bitmap.Canvas and I can't find any options that will allow me to render this as a PNG. I guess I could try saving my hand drawn image to disk as a PNG and then load it from the disk into the IWCGJQImage but that seems a lot of overhead. Any other ideas?

[Alexander Bulei]

Hi mait,

Please check this topic on stackoverflow: http://stackoverflow.com/questions/5372586/delphi-2006-run-time-assignment-of-png-to-timage-loses-alpha-transparency

Best Regards.

[mait]

Thanks for the leads on image transparency and PNG support but I eventually decided on a different solution.

For anyone who comes across this post, here's the scenario and solution. My aim was to have transparent images (e.g. PNG images) rendered from drawings that I had drawn directly onto the Picture.Bitmap.Canvas. I also wanted each of these images to have a context menu. TIWImage inherently supports transparency but not context menus. Conversely, TIWCGJQImage supports the context menu but transparent images rendered from canvas drawings are not inherently supported.

I decided to keep the TIWImage components because of the simplicity in rendering transparent images from the canvas drawings and use a TIWCJQRegion (which supports the context menu) to hold the images.

My solution was to:
1. Drop a TIWCGJQRegion onto the page.
2. Set the region's width and height to 1 so that it did not show on the web page.
3. Assign this region to each TIWImage.Parent.
4. Assign the left and top positions of each TIWImage to be relative to the region.

The magic here is that, even though the region has a width and height of 1 pixel, the TIWImage components are displayed on the web page in the correct positions as if the region had been made large enough to contain all the images.

All that remained was to determine which TIWImage had been selected when the context menu was invoked. This was handled by the TIWImage.OnAsyncMouseOver and TIWImage.OnAsyncMouseOut events which set a global variable identifying the current image.