Cel Cel - 4 months ago 39
Java Question

Draw transparent gradient with alpha transparency from 0 to 1

I have a dynamically generated bitmap in Android that I would like to feather from the top edge such that the border area would be fully transparent at the top and gradually change to fully opaque slightly below.

Create an evenly fully-transparent top edge



transparentPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
transparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
Shader shader = new LinearGradient(0, 0, 0, 20,
Color.TRANSPARENT, Color.TRANSPARENT, Shader.TileMode.CLAMP);
transparentPaint.setShader(shader);
// the bitmap is dynamically generated beforehand
Canvas c = new Canvas(bitmap);
c.drawRect(0, 0, bitmapWidth, 20, transparentPaint);


Alpha gradient instead of fully-transparent hole?



How would you achieve something like this:

enter image description here

[ Just the top edge in this case ]

Answer

Have a look at this example: Make certain area of bitmap transparent on touch

Here is a way to do it with a gradient paint:

Paint framePaint = new Paint();
for(int i = 1; i < 5; i++){
   setFramePaint(framePaint, i, imageW, imageH);
   myCanvas.drawPaint(framePaint);
}

...

private void setFramePaint(Paint p, int side, float iw, float ih){
                // paint, side of rect, image width, image height

                p.setShader(null);
                p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

                float borderSize = 0.1f; //relative size of border
                //use the smaller image size to calculate the actual border size
                float bSize = (iw > ih)? ih * borderSize: ih * borderSize; 
                float g1x = 0;
                float g1y = 0;
                float g2x = 0;
                float g2y = 0;
                int c1 = 0, c2 = 0;

                if (side == 1){
                    //left
                    g1x = 0;
                    g1y = ih/2;
                    g2x = bSize;
                    g2y = ih/2;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;

                }else if(side == 2){
                    //top
                    g1x = iw/2;
                    g1y = 0;
                    g2x = iw/2;
                    g2y = bSize;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;


                }else if(side == 3){
                    //right
                    g1x = iw;
                    g1y = ih/2;
                    g2x = iw - bSize;
                    g2y = ih/2;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;


                }else if(side == 4){
                    //bottom
                    g1x = iw/2;
                    g1y = ih;
                    g2x = iw/2;
                    g2y = ih - bSize;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;
                }

                p.setShader(new LinearGradient(g1x, g1y, g2x, g2y, c1, c2, Shader.TileMode.CLAMP));

            }
Comments