閱讀739 返回首頁    go 技術社區[雲棲]

Android高級模煳技術

轉自https://www.eoeandroid.com/forum.php?mod=viewthread&tid=330350



模煳五帖
Android模煳圖像教程（1）
https://www.eoeandroid.com/thread-330348-1-1.html
Android模煳圖像教程（2）
https://www.eoeandroid.com/thread-330349-1-1.html
Android模煳圖像教程（3）
https://www.eoeandroid.com/thread-332510-1-1.html
Android模煳圖像教程（4）
https://www.eoeandroid.com/thread-332511-1-1.html
Android高級模煳技術
https://www.eoeandroid.com/thread-330350-1-1.html

今天我們來更深入了解一下Android開發上的模煳技術。我讀過幾篇有關的文章，也在StackOverFlow上看過一些相關教程的帖子，所以我想在這裏總結一下學到的東西。
為什麼學習這個模煳技術？
現在越來越多的開發者喜歡在自定義控件的時候加上各種模煳背景，看看RomanNurik開發的Muzei或者Yahoo的Weather應用app都非常不錯。我非常喜歡他們的設計。
我從Mark Allison的帖子(帖子地址)得到啟發，然後寫了這篇文章。
這是我們需要完成下圖展示的效果：

預備知識
首先描述一下我們需要的文件。我們需要一個主Activity，裏麵有一個含有多個Fragment的ViewPager，每個Fragment展示一種模煳技術。
這是主Activity的布局文件內容：
  1. <android.support.v4.view.ViewPager
  2. xmlns:andro
  3.     xmlns:tools="https://schemas.android.com/tools"
  4.     android:
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context="com.paveldudka.MainActivity" />
複製代碼

這是Fragment的布局文件內容：
  1. <?xml version="1.0" encoding="utf-8"?>

  3. <FrameLayout xmlns:andro
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">

  7.     <ImageView
  8.         android:
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:src="@drawable/picture"
  12.         android:scaleType="centerCrop" />

  14.     <TextView
  15.         android:
  16.         android:gravity="center_horizontal"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="wrap_content"
  19.         android:text="My super text"
  20.         android:textColor="<a href="https://www.jobbole.com/members/android/" rel="nofollow">@android</a>:color/white"
  21.         android:layout_gravity="center_vertical"
  22.         android:textStyle="bold"
  23.         android:textSize="48sp" />
  24.     <LinearLayout
  25.         android:
  26.         android:layout_width="match_parent"
  27.         android:layout_height="wrap_content"
  28.         android:background="#7f000000"
  29.         android:orientation="vertical"
  30.         android:layout_gravity="bottom"/>
  31. </FrameLayout>
複製代碼

我們隻是在布局上放了一個ImageView，然後在中間加一個TextView，還有一些作為效果顯示和測試的控件（如 @+id/controls）。
最普遍的模煳技術是這樣做的：
  • 從TextView的後一層背景中截取一部分；
  • 進行模煳處理；
  • 把模煳處理後的部分設置為TextView的背景。
Renderscript
那怎麼在Android中實現模煳處理呢？最好的答案就是Renderscript。這是一個功能強大的圖形處理“引擎”。RenderScript的底層原理就不做介紹了（因為我也不知道），而且這超過了我們這篇文章的範圍。
先看下麵的代碼：
  1. public class RSBlurFragment extends Fragment {
  2.     private ImageView image;
  3.     private TextView text;
  4.     private TextView statusText;

  6.     @Override
  7.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  8.         View view = inflater.inflate(R.layout.fragment_layout, container, false);
  9.         image = (ImageView) view.findViewById(R.id.picture);
  10.         text = (TextView) view.findViewById(R.id.text);
  11.         statusText = addStatusText((ViewGroup) view.findViewById(R.id.controls));
  12.         applyBlur();
  13.         return view;
  14.     }

  16.     private void applyBlur() {
  17.         image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
  18.             @Override
  19.             public boolean onPreDraw() {
  20.                 image.getViewTreeObserver().removeOnPreDrawListener(this);
  21.                 image.buildDrawingCache();

  23.                 Bitmap bmp = image.getDrawingCache();
  24.                 blur(bmp, text);
  25.                 return true;
  26.             }
  27.         });
  28.     }

  30.     @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
  31.     private void blur(Bitmap bkg, View view) {
  32.         long startMs = System.currentTimeMillis();

  34.         float radius = 20;

  36.         Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()),
  37.                 (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888);

  39.         Canvas canvas = new Canvas(overlay);

  41.         canvas.translate(-view.getLeft(), -view.getTop());
  42.         canvas.drawBitmap(bkg, 0, 0, null);

  44.         RenderScript rs = RenderScript.create(getActivity());

  46.         Allocation overlayAlloc = Allocation.createFromBitmap(
  47.                 rs, overlay);

  49.         ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(
  50.                 rs, overlayAlloc.getElement());

  52.         blur.setInput(overlayAlloc);

  54.         blur.setRadius(radius);

  56.         blur.forEach(overlayAlloc);

  58.         overlayAlloc.copyTo(overlay);

  60.         view.setBackground(new BitmapDrawable(
  61.                 getResources(), overlay));

  63.         rs.destroy();
  64.         statusText.setText(System.currentTimeMillis() - startMs + "ms");
  65.     }

  67.     @Override
  68.     public String toString() {
  69.         return "RenderScript";
  70.     }

  72.     private TextView addStatusText(ViewGroup container) {
  73.         TextView result = new TextView(getActivity());
  74.         result.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
  75.         result.setTextColor(0xFFFFFFFF);
  76.         container.addView(result);
  77.         return result;
  78.     }
  79. }
複製代碼

  • 在Fragment創建的時候，我先載入了布局文件，然後把TextView添加到我在布局文件中定義的LinearLayout中（用來顯示模煳效果，進行效果測試），最後對圖片做模煳處理。
  • 在applyBlur()函數中我注冊了onPreDrawListener()。因為在applyBlur()方法調用的時候界麵還沒有開始布局，所以我需要實現這個監聽器否則不能進行模煳處理。需要等到布局文件全都經過measured、laid out、displayed的時候，才能進行操作。
  • 在onPreDraw()回調函數中，我首先把返回值false改成true。這個很重要，如果返回false的話，剛開始出現的那一幀畫麵會被跳過，但是我們需要顯示這第一幀，所以要返回true。
  • 接著我去掉了裏麵的回調方法，因為我們不需要監聽它的preDraw事件。
  • 然後我們需要從ImageView中獲取Bitmap，然後用getDrawingCache()函數創建drawing cache並保存。
  • 最後就是進行模煳處理了，我們接下來會詳細討論這個環節。
需要說明的是，我的代碼中在兩種情況下考慮不是很周全：
  • 在布局文件改變時不會再自動重新模煳處理。這個問題可以通過注冊onGlobalLayoutListener監聽器解決，在布局文件改變時重新進行模煳處理就可以了。
  • 這個模煳處理操作是在主線程中進行的。我們知道在實際開發中不會這麼做，但是為了方便暫時先這麼做了。
現在回到blur()方法：
  • 首先我創建了一個空的bitmap，把背景的一部分複製進去，之後我會對這個bitmap進行模煳處理並設置為TextView的背景。
  • 通過這個bitmap保存Canvas的狀態；
  • 在父布局文件中把Canvas移動到TextView的位置；
  • 把ImageView的內容繪到bitmap中；
  • 此時，我們就有了一個和TextView一樣大小的bitmap，它包含了ImageView的一部分內容，也就是TextView背後一層布局的內容；
  • 創建一個Renderscript的實例；
  • 把bitmap複製一份到Renderscript需要的數據片中；
  • 創建Renderscript模煳處理的實例；
  • 設置輸入，半徑範圍然後進行模煳處理；
  • 把處理後的結果複製回之前的bitmap中；
  • 好了，我們已經把bitmap驚醒模煳處理了，可以將它設置為TextView背景了；
這是我們處理後的效果：

可以看到效果還不錯，但是它用了57ms的時間。我們知道在Android中渲染一幀的時間應該不超過16ms（60fps），但如果在UI線程中做模煳處理就會讓幀率降到了17fps。顯然這是不可接受的，我們需要把這個操作移到AsyncTask上或者使用別的機製實現。
而且有必要說明的是，ScriptIntrinsicBlur隻支持API17以上，當然也可以用Renderscript的support lib降低一些API版本的要求。
可是我們還是需要支持一些老一些的API版本，它們不支持Renderscript，現在我們看看該怎麼辦吧。
FastBlur
因為我們知道，這種模煳處理的過程也就是像素處理而已，所以我們可以嚐試著手動進行模煳操作。幸運的是，Java上已經有了很多實現模煳處理方案的例子。我們唯一要做的就是找到一個相對快速的實現方案。
感謝在StackOverFlow上的一篇帖子，我找到了一個能快速實現模煳處理的方案。先看看它是怎麼樣的。
因為很多代碼都是一樣的，所以這裏隻討論關於模煳處理的函數：
  1. private void blur(Bitmap bkg, View view) {
  2.     long startMs = System.currentTimeMillis();
  3.     float radius = 20;

  5.     Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()),
  6.             (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888);
  7.     Canvas canvas = new Canvas(overlay);
  8.     canvas.translate(-view.getLeft(), -view.getTop());
  9.     canvas.drawBitmap(bkg, 0, 0, null);
  10.     overlay = FastBlur.doBlur(overlay, (int)radius, true);
  11.     view.setBackground(new BitmapDrawable(getResources(), overlay));
  12.     statusText.setText(System.currentTimeMillis() - startMs + "ms");
  13. }
複製代碼

實現的效果如下：

可以看到，模煳處理的效果也相當不錯。使用FastBlur的好處是，我們可以去掉對Renderscript的依賴（還有最低API版本的限製）。但是可惡的是，理模煳操作竟然花費了147ms！這還不是最慢的SW模煳算法，我都不敢用高斯模煳了…
繼續深入
現在我們要想想該怎麼做。模煳處理的過程都會有精度損失，你知道什麼是精度損失嗎？對，要降低尺寸。
既然這樣，為什麼不把bitmap的尺寸先降低然後進行模煳處理，然後再放大尺寸呢？我試著實現了一下這個想法，這是處理後得到的效果：

看到了嗎！Renderscript隻用了13ms，FastBlur隻用了2ms！還不錯。
再看看代碼。這裏隻討論FastBlur版本，因為Renderscript也是一樣的，全部代碼都可以從GitHub倉庫中檢出。
  1. private void blur(Bitmap bkg, View view) {
  2.     long startMs = System.currentTimeMillis();
  3.     float scaleFactor = 1;
  4.     float radius = 20;
  5.     if (downScale.isChecked()) {
  6.         scaleFactor = 8;
  7.         radius = 2;
  8.     }

  10.     Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()/scaleFactor),
  11.             (int) (view.getMeasuredHeight()/scaleFactor), Bitmap.Config.ARGB_8888);
  12.     Canvas canvas = new Canvas(overlay);
  13.     canvas.translate(-view.getLeft()/scaleFactor, -view.getTop()/scaleFactor);
  14.     canvas.scale(1 / scaleFactor, 1 / scaleFactor);
  15.     Paint paint = new Paint();
  16.     paint.setFlags(Paint.FILTER_BITMAP_FLAG);
  17.     canvas.drawBitmap(bkg, 0, 0, paint);

  19.     overlay = FastBlur.doBlur(overlay, (int)radius, true);
  20.     view.setBackground(new BitmapDrawable(getResources(), overlay));
  21.     statusText.setText(System.currentTimeMillis() - startMs + "ms");
  22. }
複製代碼

我們過一遍這個代碼：
  • scaleFactor提供了需要縮小的等級，在代碼中我把bitmap的尺寸縮小到原圖的1/8。因為這個bitmap在模煳處理時會先被縮小然後再放大，所以在我的模煳算法中就不用radius這個參數了，所以把它設成2。
  • 接著需要創建bitmap，這個bitmap比最後需要的小八倍。
  • 請注意我給Paint提供了FILTER_BITMAP_FLAG標示，這樣的話在處理bitmap縮放的時候，就可以達到雙緩衝的效果，模煳處理的過程就更加順暢了。
  • 接下來和之前一樣進行模煳處理操作，這次的圖片小了很多，幅度也降低了很多，所以模煳過程非常快。
  • 把模煳處理後的圖片作為背景，它會自動進行放大操作的。
之前說到FastBlur進行模煳操作比Renderscript還要快，這是因為FastBlur在進行bitmap複製操作時還會同時進行其他操作，節省了時間。經過了這些處理後，我們應該已經掌握了相對快速的模煳處理方案和原理，並去掉了對Renderscript的依賴。
本文的示例代碼：GitHub – blurring。
https://github.com/paveldudka/blurring
via：
原文鏈接： trickyandroid   翻譯： 伯樂在線- chris
譯文鏈接： https://blog.jobbole.com/63894/

最後更新：2017-04-03 07:57:00

  上一篇：go 如何在高版本的Xcode中部署低版本的ios程序
  下一篇：go Swift 學習之二十一：？和 ！（詳解）