Skip to content Skip to sidebar Skip to footer

Get A Vignette Effect By Shaders

Im trying to create a vignette effect for my app. I've been searching a lot for help achieving this but was unable to find anything. I recently found this tutorial. And i tried to

Solution 1:

After long time i found it

public Bitmap vignett(Bitmap bm, int p){
    Bitmapimage= Bitmap.createBitmap(bm.getWidth(),bm.getHeight(), Bitmap.Config.ARGB_8888);
    int rad;
    Canvascanvas=newCanvas(image);
    canvas.drawBitmap(bm, 0, 0, newPaint());
    if(bm.getWidth()<bm.getHeight()){
        into= (bm.getHeight()*2)/100;
        rad = bm.getHeight() - o*p/3;
    }else{
        into= (bm.getWidth()*2)/100;
        rad = bm.getWidth() - o*p/3;
    }
    Rectrect=newRect(0, 0, bm.getWidth(), bm.getHeight());
    RectFrectf=newRectF(rect);
    int[] colors = newint[] { 0, 0, Color.BLACK };
    float[] pos = newfloat[] { 0.0f, 0.1f, 1.0f };
    ShaderlinGradLR=newRadialGradient(rect.centerX(), rect.centerY(),rad, colors, pos, Shader.TileMode.CLAMP);
    Paintpaint=newPaint();
    paint.setShader(linGradLR);
    paint.setAntiAlias(true);
    paint.setDither(true);
    paint.setAlpha(255);
    canvas.drawRect(rectf, paint);
    return image;
}

here int p is standard value of seekbar from 1 to 100; for intensity of effect u can set paint.setAlpha 0 to 255!!!

Solution 2:

My first answer got deleted because i pointed to my solution via link. So I'll answer your question right here. The trick is to use 4 linear gradients. Applying them will give you a result that comes pretty close to a true Vignette effect. And it's freaking fast too ;) So here's part of my solution. First you must create a canvas:

Canvascanvas=newCanvas(bitmapOut);
    canvas.drawBitmap(mVignette.getBitmapIn(), 0, 0, null);

Then you define how far the effect should reach into your image:

int tenthLeftRight = (int)(width/5);
    int tenthTopBottom = (int)(height/5);

Now you create your four shaders:

// Gradient left - rightShaderlinGradLR=newLinearGradient(0, height/2, tenthLeftRight/2, height/2, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
    // Gradient top - bottomShaderlinGradTB=newLinearGradient(width/2, 0, width/2, tenthTopBottom, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
    // Gradient right - leftShaderlinGradRL=newLinearGradient(width, height/2, (width-tenthLeftRight), height/2, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
    // Gradient bottom - topShaderlinGradBT=newLinearGradient(width/2, height, width/2, (height - tenthTopBottom), Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP); 

Now all that's left to do is to draw on the canvas:

Paintpaint=newPaint();
    paint.setShader(linGradLR);
    paint.setAntiAlias(true);
    paint.setDither(true);
    paint.setAlpha(125);
    // Rect for Grad left - rightRectrect=newRect(0, 0, tenthLeftRight, height);
    RectFrectf=newRectF(rect);
    canvas.drawRect(rectf, paint);

    // Rect for Grad top - bottom
    paint.setShader(linGradTB);
    rect = newRect(0, 0, width, tenthTopBottom);
    rectf = newRectF(rect);
    canvas.drawRect(rectf, paint);

    // Rect for Grad right - left
    paint.setShader(linGradRL);
    rect = newRect(width, 0, width - tenthLeftRight, height);
    rectf = newRectF(rect);
    canvas.drawRect(rectf, paint);

    // Rect for Grad bottom - top
    paint.setShader(linGradBT);
    rect = newRect(0, height - tenthTopBottom, width, height);
    rectf = newRectF(rect);
    canvas.drawRect(rectf, paint);

Post a Comment for "Get A Vignette Effect By Shaders"