• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1187
  • Last Modified:

Fade an image revisited

Hi,

I asked a question earlier about fading an image, that is create the impression that the image loose its colors. So the answer was using transparency which works fine.
But I wonder if there are other way of doing this? My problem is that when I draw an image behind the transparent image it will of course show.

So is it possible to make the colors fade by other means? Perhaps using the ColorFilter?

Thank you,

Peter
0
pivar
Asked:
pivar
  • 3
  • 3
  • 2
  • +1
4 Solutions
 
CEHJCommented:
>> My problem is that when I draw an image behind the transparent image it will of course show.

Yes it will. One approach you could try is to keep the image fully opaque but mask it with another image, which of course CAN have an alpha channel
0
 
pivarAuthor Commented:
I'm not sure I follow. Can you show with some code?
How will the image fade?
0
 
satsumoSoftware DeveloperCommented:
Yes, there are other methods.

One method is to draw a progressively more opaque rectangle on top of the image you want to fade. This is effectively what CEHJ suggests. This method can create a few styles of transition.  If you draw a white rectangle with alpha masking, this is a fade-to-white effect.  If you draw a white rectangle with an additive blend you get a white-out effect (like turning the brightness on TV right up).

The two methods have a different 'feel' about them.  The masking is smooth, the whiteout is more organic (the best word I can think of).  I don't know if the Canvas draw code from the previous question was any use to you.  Otherwise, I would show code for creating this effect.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
satsumoSoftware DeveloperCommented:
Yet, another method is palette manipulation.  However, thats not supported by an modern API that I know of and requires using an indexed image.
0
 
UnConnCommented:
If you do not mind 'modifiying' the bitmap in memory at run-time (a little expensive) look into Xfer modes Avoid or Target.  I am using it to tint (or replace) anythign that is white (or close to white).  If you did a paint with an Xfer mode of Avoid set to black (avoid black) you could 'color' everything else white.  This should 'tint' the image white thereby making it a vlack and white image.  If you wanted it to fade you would have to run a loop where the accuracy in matching the color changed each time from 0 to 255 I think.
0
 
pivarAuthor Commented:
satsumo, the canvas code from the previous question was in javascript (according to the methods used). I would prefer to have it in java (but pseudo-code could also work). I ended up setting the alpha on the paint object used to draw the bitmap as described in one of the links.

I feel I need to give some more details. The image I want to fade is of an irregular shape. Behind the shape I don't want image painted behind to show. But outside the shape I want images behind to show. The pixels outside the shape are set to full transparency.

I was thinking of painting a masked opaque bitmap with the background color behind my image. Would that give the same effect or better/worse than the one you described above?
If you just could show how to create an image from another image setting the opaque pixels to a certain (opaque) color and keep the transparent pixels I think it would be enough. Looping through all pixels you don't need to show, but hopefully there is a more efficient way to do this, perhaps by filters or the like.

0
 
UnConnCommented:
The first one uses Avoid, but also only does it for a circle that I set.

The second one uses Target, creates the shape by drawing a circle first and then painting the the whole circle using Target.

Both will maintain the transparencies set.

/* START modify back color */
Bitmap viewBack = BitmapFactory.decodeResource(context.getResources(),back);
Bitmap backBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas backCanvas = new Canvas(backBitmap);
Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
backCanvas.drawBitmap(viewBack, 0, 0, backPaint);
backPaint.setXfermode(new AvoidXfermode(Color.TRANSPARENT, 255, Mode.AVOID));
backPaint.setColor(colorBack);
backCanvas.drawCircle(147, 147, 294, backPaint);
backCanvas.setBitmap(backBitmap);
if (DEBUG) Log.v(TAG, "back " + mAppWidgetId);
/* END modify back color */


backPaint.setColor(Color.WHITE);
backCanvas.drawCircle(147, 147, 138, backPaint);
backPaint.setXfermode(new AvoidXfermode(Color.TRANSPARENT, 255, Mode.AVOID));
backPaint.setColor(Color.WHITE);
backCanvas.drawBitmap(viewPic, 0, 0, backPaint);
backCanvas.setBitmap(backBitmap);
0
 
satsumoSoftware DeveloperCommented:
Yes, the method you suggest (drawing the fade color as opaque and putting the semi-transparent image on top) gives the same result as the one I decribed.

Unless the graphics object you're using has better compositing functions than the HTML Canvas, the only way I can see to create the mask image is to load the original image into Photshop/GIMP/Some-Image-Editor and set the color channels to white but leave the alpha intact.  I know you can do the operation you want in other graphics systems.  UnConn might know a better way.

You could try repeatedly drawing the image over itself with an additive mode.  If pixels in the image have some whiteness the image will eventually become white.  By whiteness I mean every pixel has some amount of red, green and blue (even a small amount will do).  That would be an uneven sort of fade and it can only fade to white.
0
 
pivarAuthor Commented:
Thanks for your assistance,

I used the paint the fading image on an opaque background scheme.

I used a loop over pixels to create the opaque background bitmap mask.


/peter
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now