• Android Blur效果之FastBlur


    Blur

    自从iOS系统引入了Blur效果,也就是所谓的毛玻璃、模糊化效果,磨砂效果,各大系统就開始竞相模仿,这是一个怎样的效果呢,我们现来看一些图:

    iOS / iPhone / iPad 使图片产生模糊化效果。



    这些就是典型的Blur效果,在iOS和MIUI中还有非常多,这里就不再贴图了。


    实现

    实现Blur效果主要有两种方式,一个是通过RenderScript来做,还有一种是通过直接对像素点来进行算法处理。

    RenderScript是API11之后才引入的,所以对版本号有限制,并且RenderScript确实挺复杂的,尽管使用他的Blur功能非常easy,可是要真正搞懂,不是一天两天的事。

    本文主要介绍还有一种算法来实现Blur,这个算法是眼下市面上对Blur效果处理比較好的一种算法了,研究的前沿网址请戳 我是Blur 。

    经典图:


    有兴趣的朋友能够去看看。


    使用

    以下我们来看看怎样在Android中来使用Blur,当然,我们须要使用上面提到的FastBlur

    package com.xys.blur;
    
    import android.graphics.Bitmap;
    
    /**
     * Created by paveld on 3/6/14.
     */
    public class FastBlur {
    
        public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {
    
            // Stack Blur v1.0 from
            // http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
            //
            // Java Author: Mario Klingemann <mario at quasimondo.com>
            // http://incubator.quasimondo.com
            // created Feburary 29, 2004
            // Android port : Yahel Bouaziz <yahel at kayenko.com>
            // http://www.kayenko.com
            // ported april 5th, 2012
    
            // This is a compromise between Gaussian Blur and Box blur
            // It creates much better looking blurs than Box Blur, but is
            // 7x faster than my Gaussian Blur implementation.
            //
            // I called it Stack Blur because this describes best how this
            // filter works internally: it creates a kind of moving stack
            // of colors whilst scanning through the image. Thereby it
            // just has to add one new block of color to the right side
            // of the stack and remove the leftmost color. The remaining
            // colors on the topmost layer of the stack are either added on
            // or reduced by one, depending on if they are on the right or
            // on the left side of the stack.
            //
            // If you are using this algorithm in your code please add
            // the following line:
            //
            // Stack Blur Algorithm by Mario Klingemann <mario@quasimondo.com>
    
            Bitmap bitmap;
            if (canReuseInBitmap) {
                bitmap = sentBitmap;
            } else {
                bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
            }
    
            if (radius < 1) {
                return (null);
            }
    
            int w = bitmap.getWidth();
            int h = bitmap.getHeight();
    
            int[] pix = new int[w * h];
            bitmap.getPixels(pix, 0, w, 0, 0, w, h);
    
            int wm = w - 1;
            int hm = h - 1;
            int wh = w * h;
            int div = radius + radius + 1;
    
            int r[] = new int[wh];
            int g[] = new int[wh];
            int b[] = new int[wh];
            int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
            int vmin[] = new int[Math.max(w, h)];
    
            int divsum = (div + 1) >> 1;
            divsum *= divsum;
            int dv[] = new int[256 * divsum];
            for (i = 0; i < 256 * divsum; i++) {
                dv[i] = (i / divsum);
            }
    
            yw = yi = 0;
    
            int[][] stack = new int[div][3];
            int stackpointer;
            int stackstart;
            int[] sir;
            int rbs;
            int r1 = radius + 1;
            int routsum, goutsum, boutsum;
            int rinsum, ginsum, binsum;
    
            for (y = 0; y < h; y++) {
                rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
                for (i = -radius; i <= radius; i++) {
                    p = pix[yi + Math.min(wm, Math.max(i, 0))];
                    sir = stack[i + radius];
                    sir[0] = (p & 0xff0000) >> 16;
                    sir[1] = (p & 0x00ff00) >> 8;
                    sir[2] = (p & 0x0000ff);
                    rbs = r1 - Math.abs(i);
                    rsum += sir[0] * rbs;
                    gsum += sir[1] * rbs;
                    bsum += sir[2] * rbs;
                    if (i > 0) {
                        rinsum += sir[0];
                        ginsum += sir[1];
                        binsum += sir[2];
                    } else {
                        routsum += sir[0];
                        goutsum += sir[1];
                        boutsum += sir[2];
                    }
                }
                stackpointer = radius;
    
                for (x = 0; x < w; x++) {
    
                    r[yi] = dv[rsum];
                    g[yi] = dv[gsum];
                    b[yi] = dv[bsum];
    
                    rsum -= routsum;
                    gsum -= goutsum;
                    bsum -= boutsum;
    
                    stackstart = stackpointer - radius + div;
                    sir = stack[stackstart % div];
    
                    routsum -= sir[0];
                    goutsum -= sir[1];
                    boutsum -= sir[2];
    
                    if (y == 0) {
                        vmin[x] = Math.min(x + radius + 1, wm);
                    }
                    p = pix[yw + vmin[x]];
    
                    sir[0] = (p & 0xff0000) >> 16;
                    sir[1] = (p & 0x00ff00) >> 8;
                    sir[2] = (p & 0x0000ff);
    
                    rinsum += sir[0];
                    ginsum += sir[1];
                    binsum += sir[2];
    
                    rsum += rinsum;
                    gsum += ginsum;
                    bsum += binsum;
    
                    stackpointer = (stackpointer + 1) % div;
                    sir = stack[(stackpointer) % div];
    
                    routsum += sir[0];
                    goutsum += sir[1];
                    boutsum += sir[2];
    
                    rinsum -= sir[0];
                    ginsum -= sir[1];
                    binsum -= sir[2];
    
                    yi++;
                }
                yw += w;
            }
            for (x = 0; x < w; x++) {
                rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
                yp = -radius * w;
                for (i = -radius; i <= radius; i++) {
                    yi = Math.max(0, yp) + x;
    
                    sir = stack[i + radius];
    
                    sir[0] = r[yi];
                    sir[1] = g[yi];
                    sir[2] = b[yi];
    
                    rbs = r1 - Math.abs(i);
    
                    rsum += r[yi] * rbs;
                    gsum += g[yi] * rbs;
                    bsum += b[yi] * rbs;
    
                    if (i > 0) {
                        rinsum += sir[0];
                        ginsum += sir[1];
                        binsum += sir[2];
                    } else {
                        routsum += sir[0];
                        goutsum += sir[1];
                        boutsum += sir[2];
                    }
    
                    if (i < hm) {
                        yp += w;
                    }
                }
                yi = x;
                stackpointer = radius;
                for (y = 0; y < h; y++) {
                    // Preserve alpha channel: ( 0xff000000 & pix[yi] )
                    pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];
    
                    rsum -= routsum;
                    gsum -= goutsum;
                    bsum -= boutsum;
    
                    stackstart = stackpointer - radius + div;
                    sir = stack[stackstart % div];
    
                    routsum -= sir[0];
                    goutsum -= sir[1];
                    boutsum -= sir[2];
    
                    if (x == 0) {
                        vmin[y] = Math.min(y + r1, hm) * w;
                    }
                    p = x + vmin[y];
    
                    sir[0] = r[p];
                    sir[1] = g[p];
                    sir[2] = b[p];
    
                    rinsum += sir[0];
                    ginsum += sir[1];
                    binsum += sir[2];
    
                    rsum += rinsum;
                    gsum += ginsum;
                    bsum += binsum;
    
                    stackpointer = (stackpointer + 1) % div;
                    sir = stack[stackpointer];
    
                    routsum += sir[0];
                    goutsum += sir[1];
                    boutsum += sir[2];
    
                    rinsum -= sir[0];
                    ginsum -= sir[1];
                    binsum -= sir[2];
    
                    yi += w;
                }
            }
    
            bitmap.setPixels(pix, 0, w, 0, 0, w, h);
    
            return (bitmap);
        }
    }
    

    算法就是这样了,不要问我懂不懂,你懂的。

    使用

    怎样在程序中使用呢,也非常easy:

    package com.xys.blur;
    
    import android.app.Activity;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.drawable.BitmapDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewTreeObserver.OnPreDrawListener;
    import android.widget.ImageView;
    
    public class Test extends Activity {
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.main);
    		final ImageView imageView = (ImageView) findViewById(R.id.image1);
    
    		final Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
    				R.drawable.blur);
    
    		imageView.getViewTreeObserver().addOnPreDrawListener(
    				new OnPreDrawListener() {
    
    					@Override
    					public boolean onPreDraw() {
    						blur(bitmap, imageView);
    						return true;
    					}
    				});
    	}
    
    	private void blur(Bitmap bkg, View view) {
    		long startMs = System.currentTimeMillis();
    		float scaleFactor = 8;
    		float radius = 2;
    
    		Bitmap overlay = Bitmap.createBitmap(
    				(int) (view.getMeasuredWidth() / scaleFactor),
    				(int) (view.getMeasuredHeight() / scaleFactor),
    				Bitmap.Config.ARGB_8888);
    		Canvas canvas = new Canvas(overlay);
    		canvas.translate(-view.getLeft() / scaleFactor, -view.getTop()
    				/ scaleFactor);
    		canvas.scale(1 / scaleFactor, 1 / scaleFactor);
    		Paint paint = new Paint();
    		paint.setFlags(Paint.FILTER_BITMAP_FLAG);
    		canvas.drawBitmap(bkg, 0, 0, paint);
    
    		overlay = FastBlur.doBlur(overlay, (int) radius, true);
    		view.setBackground(new BitmapDrawable(getResources(), overlay));
    		System.out.println(System.currentTimeMillis() - startMs + "ms");
    	}
    }
    

    为什么我们要在addOnPreDrawListener中来调用blur方法呢,看我前面的文章的朋友应该会知道,这样做是为了能够在onCreate中获取控件尺寸,通过scaleFactor和radius两个參数,我们来控制Blur的程度。

    代码中还有几点须要解释下:

    1、我们为什么要通过scaleFactor来缩小图片:因为在做Blur的时候,图片精度本来就要减少,那么我们为什么不先减少精度再去处理呢,这种效果就是巨大的缩小了生成时间

    2、我们给Paint提供了FILTER_BITMAP_FLAG标示,这种话在处理bitmap缩放的时候,就能够达到双缓冲的效果,模糊处理的过程就更加顺畅了

    3、假设我们要做某一部分的Blur效果,通常是将这部分图片裁减下来,然后Blur后设给某个控件的背景

    终于效果例如以下:


    效果已经出来了,Demo非常easy,仅仅是为了演示用法。

    以上。


  • 相关阅读:
    linux 通配符
    linux 常用快捷键
    datatables-2
    datables
    datatables
    http://blog.csdn.net/heqingsong1/article/details/8540665
    软件提升知识点
    深入浅出单实例Singleton设计模式
    详解js跨域问题
    自定义控件之绘图篇(四):canvas变换与操作
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4073370.html
Copyright © 2020-2023  润新知