How to alpha mask a color

问题:

Working in Android (1.5), I have a hundred or so grayscale images in the form of byte arrays. I want to use the images as alpha masks for drawing solid colors in a Canvas. The images are fixed but the colors can change. I can create Bitmap objects for each image/color combination, but that seems terribly inefficient. What would be a good way to approach this problem, in terms of both memory and speed? (I need to do this many times for each image/color combo.)

回答1:

I think I found the answer I was looking for:

1. Create an ARGB_8888 Bitmap where each pixel color is set to (gray << 24) | 0xFFFFFF.
2. For each color, create a new PorterDuffColorFilter(color, PorterDuff.Mode.MULTIPLY).
3. To render, create a Paint object and call setColorFilter() with the filter corresponding to the color to be used. Then call canvas.drawBitmap using the Bitmap and Paint objects.

For a single color, this probably isn't as fast as building exactly the Bitmap I want and drawing without a Paint object, but it's much more space efficient than a Bitmap for each image/color combo.

回答2:

float contrast = 100/ 180.f; float scale = contrast + 1.f;

        cm.set(new float[] {
               scale, 0, 0, 0, 0,//Red
               0, 1.5f, 0, 0, 0,//Green
               0, 0, 1.5f, 0, 0,//Blue
               0, 0, 0, 1, 0 });//alpha
        bmpGrayscale = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.RGB_565);

        Canvas c = new Canvas(bmpGrayscale);
        Paint paint = new Paint();

        ColorMatrixColorFilter f = new ColorMatrixColorFilter(cm);
        paint.setColorFilter(f);
        c.drawBitmap(bitmap, 0, 0, paint);
        /*BitmapDrawable bmd = new BitmapDrawable(bmpGrayscale);
        photo_view.setBackgroundDrawable(bmd);*/

        photo_view.setImageBitmap(bmpGrayscale);

回答3:

I would use drawImage to blit the image to a canvas, getImageData() to access the pixels, and then loop over the .data of the image data, setting the RGB values for each pixel to your constant and the fourth (alpha) value to what you got from the image. You can then layer this semi-transparent canvas over whatever you need.

Edit: I've put a working example of this on my website. Only works on Chrome/Safari.