Creating a composited image with a transparent background - eclipse

In Eclipse, I have a view that uses GEF and for some of the figures that I display. I need to paint some background.
For some of the background, I use a system of folders with a set of predefined images (top_left.png, top.png, top_right.png, left.png, middle.png, ...., bottom_right.png) and, while I can recreate the background when needed, it is highly inefficient (especially since it redraws every time the view is being scrolled or a fly is passing by).
To avoid having to recreate the background image everytime, I want to use a cache system: I create an Image object on which I paint each image, and then I cache that image in a map (the key being the dimension of the image).
To be able to have rounded corners, the cache image needs to have a transparent background and this is where I am blocking:
I have tried to set the transparent pixel and paint with the same color but without success
I tried to use ImageData to set the alpha depending on the alpha of each source image but in that case, while the transparency is done well, the image created is all white.
Is there a way in SWT to do a transparent background image that I can paint some images on?
Update:
I found a possible solution by using a BufferedImage from AWT and converting to SWT using code found in http://www.java2s.com/Code/Java/SWT-JFace-Eclipse/ConvertbetweenSWTImageandAWTBufferedImage.htm
While a good base, this code doesn't actually handle transparency, and I modified it quickly (and quite dirtily) to do it. Is there a reliable code for converting Images from AWT to SWT and inverse?
I would prefer some solution to my problem that doesn't involve converting back and forth between images format.

Related

Flutter change transparency of png image with finger touch

I have a png image with transparent areas and opaque areas.
I want to be able to draw with my finger, with GestureDetector for example, on that image to be able to add transparency in the opaque areas and add opaque areas in the transparent areas. Both. For example with a button that allows you to switch between erase and paint modes.
The objective is that it can represent two images on the screen, inside a stack, one after the other. The back image is completely opaque and the front image has areas with transparency and you can paint over it as I mentioned before. In this way, as you add transparent areas in the front image, what is in the back image will be revealed. And conversely, you can add opacity to the image so that the image behind is hidden by the image in front.
I've tried CustonPaint but it's very difficult since you would have to add the image with drawImage, and do a lot of complicated steps. And I couldn't change the transparency of the image either, also, even if I could, with CustonPaint if you draw a lot, the screen slows down.

How to merge an image to fill in other image with shape?

I want to merge an image to another image in one shape. Example:
1- People image
2- Shape Image:
So how to do draw that. I already implement for merging but it's not fill to that shape.
It's possible to do this using the masking functions in the Quartz 2D framework. It's a little bit more involved than using the higher level image functions of UI Kit, but Quartz 2D gives you a lot more power to do cool graphics techniques.
The relevant Apple Developer guide to this can be found here: https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_images/dq_images.html
For this example, you'd want to create a mask shape for the inside part of the shape image. There are two ways you can do this. One way is to use image editing software to create a second mask image, with the same size as your shape image, with pure black in the area where you want the people image to appear, and white where you don't want to appear. In this example, that would be the area inside the blue shape. It is important to not crop this image, or else they won't match up exactly.
The other way to create the masking image would be to do that dynamically based on the shape image, and honestly, this is the way I would do it. This would mean that you're including fewer images in your app, and if you made any changes to the shape image, you wouldn't have to recreate the mask image as well. You could do this by making a small change to the way your shape image is formatted. You would need to use a format that allows transparency - png is preferred - so that there is alpha transparency in the part of the image outside of the shape, which is white in your JPEG image. Make sure the section in the center of the image is white (really, any color that is NOT USED in the wanted part of the shape image would work, but I'll say white for this example) and that you don't have parts of it that aren't pure white after image compression.
You will then use Quartz to select the area that's white, and create a mask from that. This technique is a bit more involved, but what you need can be found in the document I linked to above. Because of this, you might start with a static masking image, and then convert to the more involved technique after you've got the code to make the first technique work.
When you have your masking image, you would create the mask itself with the function CGImageMaskCreate(::::::::). You can then apply the mask to the people image using the function CGImageCreateWithMask(::), which will give you an image with the person's portrait, with the correct shape cropped from the center.
Finally, you would display this in your app by placing the masked people image on top of the shape image, and voila, you'll have what you're looking for.
Also, keep in mind, when using the Quartz 2D framework, you'll have to make sure you release images when they are no longer needed, or else you could have memory leaks.

How to draw a Pixmap with partial transparency in GTK application

I'm just getting started with Mono programming using GTK, and have been pleasantly surprised. However, I have come across a hurdle I haven't been able to get over yet.
In the app I'm working on, I am able to load a JPEG image into a Pixmap and draw it to my GUI's Drawing Area. That works fine. However, I want to be able to take a second JPEG image, make it partially transparent, and draw it over the first. So far, I haven't been able to figure out a decent way to do this.
Is it somehow possible to change the alpha value of an entire Pixmap before I draw it? I'm not sure where to go from here.
If you're using GtkDrawingArea you should be using Cairo to do the drawing itself. As an alternative to using cairo_paint() there is a cairo_paint_with_alpha() which lets you specify the opacity you wish to paint with.

Transparency on images inside opaque UIImageView

I often export PNG images from Photoshop for use in an iPhone app, using the Save For Web and Devices feature. I always leave the transparency option selected, even if there are no transparent parts to the image. This is because I assumed that it would have no effect if the image has no transparent areas, and it's easier to just leave the option selected.
I was told recently that by doing this, the opaque property of a UIImageView is effectively ignored because the UIImage will have an alpha channel, having a negative impact on performance.
Is this correct? Should I turn off the transparency option if it's not needed when exporting PNGs from Photoshop?
The image itself should have zero effect on a UIImageView or its opaque property except for the amount of image data that has to be loaded into the UIImageView's image property. Since, an image with transparency will usually have a larger amount of data than the same image without any transparency, it would take slightly longer for it to load into a UIImageView.image when setting it (imageView.image = [UIImage imageNamed:#"myTransparentImage.png"];). Unless, of course, you use a different quality/compression/format/color depth/etc when exporting from Photoshop.
You can verify all of this and see the exact amount of time, I/O, memory, etc for each different image by using the Instruments App with the System Usage, Time Profiler, and/or Activity Monitor templates.

Changing color of part of an image

I have a png image file that is partly opaque and partly transparent. I display it in a UIImageView as a mask of sorts over another UIImageView layered behind it (as a sibling subview of a common superview). It gives me perfect borders around something painted using a finger on the lower UIImageView in my stack of UIImageViews. Perhaps there are better ways to do this, but I am new-ish, and this is the best way I came up with thus far. None the less, my app is in the App Store and now I want to enhance it to provide more images to use as the mask of sorts over the finger painting. But I don't want to bloat my bundle size by adding more static mask images as I did for the initial implementation. Not to mention I don't want to spend lots of time in photoshop making 100 masks. I'd rather programmatically change the color of the mask, without affecting the clear portion in the middle, which is not a simple regtangle or circle, but rather a complex shape. So my question is this: How can I change the colored portion of my loaded image without affecting the clear color portion in the middle? Is there a reasonably easy way to do this? Essentially I want to do what is described in this post (How would I tint an image programmatically on the iPhone?) without affecting the clear portion of my image. Thanks for any insights.
Have a look at the Tinted Image sample project. Try out the different modes until you get the effect you want.