Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復

澤毛發表於2017-12-21
CanvasAI

一、和Canvas儲存相關的標誌

在瞭解Canvas的儲存之前，我們先看一下和儲存相關的標誌的定義，它們定義了儲存的型別，這些標誌定義在Canvas.java當中，一共有六個標誌。

/**
     * Restore the current matrix when restore() is called.
     */
    public static final int MATRIX_SAVE_FLAG = 0x01;

    /**
     * Restore the current clip when restore() is called.
     */
    public static final int CLIP_SAVE_FLAG = 0x02;

    /**
     * The layer requires a per-pixel alpha channel.
     */
    public static final int HAS_ALPHA_LAYER_SAVE_FLAG = 0x04;

    /**
     * The layer requires full 8-bit precision for each color channel.
     */
    public static final int FULL_COLOR_LAYER_SAVE_FLAG = 0x08;

    /**
     * Clip drawing to the bounds of the offscreen layer, omit at your own peril.
     * <p class="note"><strong>Note:</strong> it is strongly recommended to not
     * omit this flag for any call to <code>saveLayer()</code> and
     * <code>saveLayerAlpha()</code> variants. Not passing this flag generally
     * triggers extremely poor performance with hardware accelerated rendering.
     */
    public static final int CLIP_TO_LAYER_SAVE_FLAG = 0x10;

    /**
     * Restore everything when restore() is called (standard save flags).
     * <p class="note"><strong>Note:</strong> for performance reasons, it is
     * strongly recommended to pass this - the complete set of flags - to any
     * call to <code>saveLayer()</code> and <code>saveLayerAlpha()</code>
     * variants.
     */
    public static final int ALL_SAVE_FLAG = 0x1F;
複製程式碼

從上面的定義可以看出，flag是用一個32位的int型變數來定義的，它的低5位的每一位用來表示需要儲存Canvas當前哪部分的資訊，如果全部開啟，那麼就是全部儲存，也就是最後定義的ALL_SAVE_FLAG，這5位分別對應：

  • xxxx1：儲存Matrix資訊，例如平移、旋轉、縮放、傾斜等。
  • xxx1x：儲存Clip資訊，也就是裁剪。
  • xx1xx：儲存Alpha資訊。
  • x1xxx：儲存8位的顏色資訊。
  • 1xxxx：Clip drawing to the bounds of the offscreen layer，不太明白是什麼意思。

如果需要多選以上的幾個資訊進行儲存，那麼對多個標誌位執行或操作即可。

二、save()和save(int saveFlags)

下面是這兩個方法的定義：

    /**
     * Saves the current matrix and clip onto a private stack.
     * <p>
     * Subsequent calls to translate,scale,rotate,skew,concat or clipRect,
     * clipPath will all operate as usual, but when the balancing call to
     * restore() is made, those calls will be forgotten, and the settings that
     * existed before the save() will be reinstated.
     *
     * @return The value to pass to restoreToCount() to balance this save()
     */
    public int save() {
        return native_save(mNativeCanvasWrapper, MATRIX_SAVE_FLAG | CLIP_SAVE_FLAG);
    }

    /**
     * Based on saveFlags, can save the current matrix and clip onto a private
     * stack.
     * <p class="note"><strong>Note:</strong> if possible, use the
     * parameter-less save(). It is simpler and faster than individually
     * disabling the saving of matrix or clip with this method.
     *
     * @param saveFlags flag bits that specify which parts of the Canvas state
     *                  to save/restore
     * @return The value to pass to restoreToCount() to balance this save()
     */
    public int save(@Saveflags int saveFlags) {
        return native_save(mNativeCanvasWrapper, saveFlags);
    }
複製程式碼

註釋已經很好地說明了save()和save(int saveFlags)的作用：當呼叫完save方法之後，例如平移、縮放、旋轉、傾斜、拼接或者裁剪這些操作，都是和原來的一樣，而當呼叫完restore方法之後，在save()到restore()之間的所有操作都會被遺忘，並且會恢復呼叫save()之前的所有設定。此外還可以獲得以下資訊：

  • 這兩個方法最終都呼叫native_save方法，而無參方法save()預設是儲存Matrix和Clip這兩個資訊。
  • 如果允許，那麼儘量使用無參的save()方法，而不是使用有參的save(int saveFlags)方法傳入別的Flag。
  • 該方法的返回值，對應的是在堆疊中的index，之後可以在restoreToCount(int saveCount)中傳入它來講在它之上的所有儲存圖層都出棧。
  • 所有的操作都是呼叫了native_save來對這個mNativeCanvasWrapper變數，我們會發現，所有對於Canvas的操作，其實最終都是操作了mNativeCanvasWrapper這個物件。
  • 從XXX_SAVE_FLAG的命名來看，帶有引數的save(int saveFlags)方法只允許儲存MATRIX_/CLIP_/ALL_這三種狀態，而HAS_ALPHA_LAYER/FULL_COLOR_LAYER_/CLIP_TO_LAYER_這三種狀態，則是為後面的saveLayer/saveLayerAlpha提供的。

三、restore() restoreToCount(int count) getSaveCount()

這三個方法用來恢復圖層資訊，也就是將之前儲存到棧中的元素出棧，我們看一下這幾個方法的定義：

    /**
     * This call balances a previous call to save(), and is used to remove all
     * modifications to the matrix/clip state since the last save call. It is
     * an error to call restore() more times than save() was called.
     */
    public void restore() {
        boolean throwOnUnderflow = !sCompatibilityRestore || !isHardwareAccelerated();
        native_restore(mNativeCanvasWrapper, throwOnUnderflow);
    }

    /**
     * Returns the number of matrix/clip states on the Canvas' private stack.
     * This will equal # save() calls - # restore() calls.
     */
    public int getSaveCount() {
        return native_getSaveCount(mNativeCanvasWrapper);
    }

    /**
     * Efficient way to pop any calls to save() that happened after the save
     * count reached saveCount. It is an error for saveCount to be less than 1.
     *
     * Example:
     *    int count = canvas.save();
     *    ... // more calls potentially to save()
     *    canvas.restoreToCount(count);
     *    // now the canvas is back in the same state it was before the initial
     *    // call to save().
     *
     * @param saveCount The save level to restore to.
     */
    public void restoreToCount(int saveCount) {
        boolean throwOnUnderflow = !sCompatibilityRestore || !isHardwareAccelerated();
        native_restoreToCount(mNativeCanvasWrapper, saveCount, throwOnUnderflow);
    }
複製程式碼

這個幾個方法很好理解：

  • restore()方法用來恢復，最近一次呼叫save()之前的Matrix/Clip資訊，如果呼叫restore()的次數大於save()的一次，也就是棧中已經沒有元素，那麼會丟擲異常。
  • getSaveCount()：返回的是當前棧中元素的數量。
  • restoreToCount(int count)會將saveCount()之上對應的所有元素都出棧，如果count < 1，那麼會丟擲異常。
  • 它們最終都是呼叫了native的方法。

四、示例

下面，我們用一個簡單的例子，來更加直觀的瞭解一下save()和restore()，我們重寫了一個View當中的onDraw()方法：

4.1 恢復Matrix資訊

    private void saveMatrix(Canvas canvas) {
        //繪製藍色矩形
        mPaint.setColor(getResources().getColor(android.R.color.holo_blue_light));
        canvas.drawRect(0, 0, 200, 200, mPaint);
        //儲存
        canvas.save();
        //裁剪畫布,並繪製紅色矩形
        mPaint.setColor(getResources().getColor(android.R.color.holo_red_light));
        //平移.
        //canvas.translate(100, 0);
        //縮放.
        //canvas.scale(0.5f, 0.5f);
        //旋轉
        //canvas.rotate(-45);
        //傾斜
        canvas.skew(0, 0.5f);
        canvas.drawRect(0, 0, 200, 200, mPaint);
        //恢復畫布
        canvas.restore();
        //繪製綠色矩形
        mPaint.setColor(getResources().getColor(android.R.color.holo_green_light));
        canvas.drawRect(0, 0, 50, 200, mPaint);
    }
複製程式碼

我們對畫布分別進行了平移、縮放、旋轉、傾斜，得到的結果為：

Translate.png

Scale.png

Rotate.png

Skew.png

可以看到，當我們呼叫上面這些方法時，其實就是對Canvas先進行了一些移動，旋轉，縮放的操作，然後再在它這個新的狀態上進行繪製，之後呼叫restore()之後，又恢復回了呼叫save()之前的狀態。

4.2 恢復Clip資訊

    private void saveClip(Canvas canvas) {
        //繪製藍色矩形
        mPaint.setColor(getResources().getColor(android.R.color.holo_blue_light));
        canvas.drawRect(0, 0, 200, 200, mPaint);
        //儲存.
        canvas.save();
        //裁剪畫布,並繪製紅色矩形
        mPaint.setColor(getResources().getColor(android.R.color.holo_red_light));
        canvas.clipRect(150, 0, 200, 200);
        canvas.drawRect(0, 0, 200, 200, mPaint);
        //恢復畫布
        canvas.restore();
        //繪製綠色矩形
        mPaint.setColor(getResources().getColor(android.R.color.holo_green_light));
        canvas.drawRect(0, 0, 50, 200, mPaint);
    }
複製程式碼

最終的結果如下所示：

Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復

  • 初始的時候，canvas的大小和View的大小是一樣的，我們以(0,0)為原點座標，繪製了一個大小為200px * 200px的藍色矩形。
  • 我們儲存畫布的當前資訊，之後以(150, 0)為原點座標，裁剪成了一個大小為50px * 200px的新畫布，對於這個裁剪的過程可以這麼理解：就是我們以前上學時候用的那些帶鏤空的板子，上面有各種的形狀，而這一裁剪，其實就是在原來的canvas上蓋了這麼一個鏤空的板子，鏤空部分就是我們定義的裁剪區域，當我們進行繪製時，就是在這個板子上面進行繪製，而最終在canvas上展現的部分就是這些鏤空部分和之後繪製部分的交集。
  • 之後我們嘗試以(0, 0)為原點繪製一個大小為200px * 200px的紅色矩形，但是此時由於(0, 0) - (150, 200)這部分被蓋住了，所以不我們畫不上去，實際畫上去的只有(50, 0) - (200, 200)這一部分。
  • 之後呼叫了restore()方法，就相當於把板子拿掉，那麼這時候就能夠像之前那樣正常的繪製了。

五、saveLayer saveLayerAlpha

5.1 方法定義

除了save()方法之外，canvas還提供了saveLayer方法

Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復
以上的這八個方法可以分為兩個大類：saveLayer和saveLayerAlpha，它們最終都是呼叫了兩個native方法： 對於saveLayer，如果不傳入saveFlag，那麼預設是採用ALL_SAVE_FLAG：

native_saveLayer(mNativeCanvasWrapper, left, top, right, bottom, paint != null ? paint.getNativeInstance() : 0, saveFlags);
複製程式碼

對於saveLayerAlpha，如果不傳入saveFlag，那麼預設是採用ALL_SAVE_FLAG，如果不傳入alpha，那麼最終呼叫的alpha = 0。

native_saveLayerAlpha(mNativeCanvasWrapper, left, top, right, bottom, alpha, saveFlags);
複製程式碼

5.2 和save()方法的區別

關於save()和saveLayer()的區別，原始碼當中是這麼解釋的，也就是說它會新建一個不在螢幕之內的bitmap，之後的所有繪製都是在這個bitmap上操作的。

This behaves the same as save(), but in addition it allocates and redirects drawing to an offscreen bitmap.

並且這個方法是相當消耗資源的，因為它會導致內容的二次渲染，特別是當canvas的邊界很大或者使用了CLIP_TO_LAYER這個標誌時，更推薦使用LAYER_TYPE_HARDWARE，也就是硬體渲染來進行Xfermode或者ColorFilter的操作，它會更加高效。

     * this method is very expensive,
     *
     * incurring more than double rendering cost for contained content. Avoid
     * using this method, especially if the bounds provided are large, or if
     * the {@link #CLIP_TO_LAYER_SAVE_FLAG} is omitted from the
     * {@code saveFlags} parameter. It is recommended to use a
     * {@link android.view.View#LAYER_TYPE_HARDWARE hardware layer} on a View
     * to apply an xfermode, color filter, or alpha, as it will perform much
     * better than this method.
複製程式碼

當我們在之後呼叫restore()方法之後，那麼這個新建的bitmap會繪製回Canvas的當前目標，如果當前就位於canvas的最底層圖層，那麼就是目標螢幕，否則就是之前的圖層。

     * All drawing calls are directed to a newly allocated offscreen bitmap.
     * Only when the balancing call to restore() is made, is that offscreen
     * buffer drawn back to the current target of the Canvas (either the
     * screen, it's target Bitmap, or the previous layer).
複製程式碼

再回頭看下方法的引數，這兩大類方法分別傳入了Paint和Alpha這兩個變數，對於saveLayer來說，Paint的下面這三個屬性會在新生成的bitmap被重新繪製到當前畫布時，也就是呼叫了restore()方法之後，被採用：

     * Attributes of the Paint - {@link Paint#getAlpha() alpha},
     * {@link Paint#getXfermode() Xfermode}, and
     * {@link Paint#getColorFilter() ColorFilter} are applied when the
     * offscreen bitmap is drawn back when restore() is called.
複製程式碼

而對於saveLayerAlpha來說，它的Alpha則會在被重新繪製回來時被採用：

     * The {@code alpha} parameter is applied when the offscreen bitmap is
     * drawn back when restore() is called.
複製程式碼

對於這兩個方法，都推薦傳入ALL_SAVE_FLAG來提高效能，它們的返回值和save()方法的含義是相同的，都是用來提供給restoreToCount(int count)使用。 總結一下：就是呼叫saveLayer之後，建立了一個透明的圖層，之後在呼叫restore()方法之前，我們都是在這個圖層上面進行操作，而save方法則是直接在原先的圖層上面操作，那麼對於某些操作，我們不希望原來圖層的狀態影響到它，那麼我們應該使用saveLayer。

六、saveLayer示例

和前面類似，我們建立一個繼承於View的SaveLayerView，並重寫onDraw(Canvas canvas)方法：

6.1 驗證建立新的圖層理論

首先，因為我們前面整個一整節得到的結論是saveLayer會建立一個新的圖層，而驗證是否產生新圖層的方式就是採用Paint#setXfermode()方法，通過它和下面圖層的結合關係，我們就能知道是否生成了一個新的圖層了。當使用saveLayer時：

    @Override
    protected void onDraw(Canvas canvas) {
        useSaveLayer(canvas);
    }

    private void useSaveLayer(Canvas canvas) {
        //1.先畫一個藍色圓形.
        canvas.drawCircle(mRadius, mRadius, mRadius, mBlueP);
        //canvas.save();
        //2.這裡產生一個新的圖層
        canvas.saveLayer(0, 0, mRadius + mRadius, mRadius + mRadius, null);
        //3.現先在該圖層上畫一個綠色矩形
        canvas.drawRect(mRadius, mRadius, mRadius + mRadius, mRadius + mRadius, mGreenP);
        //4.設為取下面的部分
        mRedP.setXfermode(mDstOverXfermode);
        //5.再畫一個紅色圓形,如果和下面的圖層有交集,那麼取下面部分
        canvas.drawCircle(mRadius, mRadius, mRadius/2, mRedP);
    }
複製程式碼

當我們使用saveLayer()方法時，得到的是：

Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復
而當我們使用save()方法，得到的則是：
Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復
只所以產生不同的結果，是因為第4步的時候，我們給紅色畫筆設定了DST_OVER模式，也就是底下部分和即將畫上去的部分有重合的時候，取底下部分。當我們在第2步當中使用saveLayer的時候，按我們的假設，會產生一個新的圖層，那麼第3步的綠色矩形就是畫在這個新的透明圖層上的，因此第5步畫紅色圓形的時候，DST是按綠色矩形部分來算的，重疊部分只佔了紅色圓形的1/4，因此最後畫出來的結果跟第一張圖一樣。 而不使用saveLayer時，由於沒有產生新的圖層，因此在第5步繪製的時候，DST其實是由藍色圓形和綠色矩形組成的，這時候和紅色圓形的重疊部分佔了整個紅色圓形，所以最後畫上去的時候就看不到了。 這就很好地驗證了saveLayer會建立一個新的圖層。

6.2 saveLayerAlpha

下面，我們再來看一下saveLayerAlpha，這個方法可以用來產生一個帶有透明度的圖層：

    private void useSaveLayerAlpha(Canvas canvas) {
        //先劃一個藍色的圓形.
        canvas.drawCircle(mRadius, mRadius, mRadius, mBlueP);
        //canvas.save();
        //這裡產生一個新的圖層
        canvas.saveLayerAlpha(0, 0, mRadius + mRadius, mRadius + mRadius, 128);
        //現先在該圖層上畫一個矩形
        canvas.drawRect(mRadius, mRadius, mRadius + mRadius, mRadius + mRadius, mGreenP);
    }
複製程式碼

最終，我們就得到了下面的帶有透明度的綠色矩形覆蓋在上面：

Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復

6.3 HAS_ALPHA_LAYER_XXX和FULL_COLOR_LAYER_XXX

HAS_ALPHA_LAYER表示圖層結合的時候，沒有繪製的地方會是透明的，而對於FULL_COLOR_LAYER_XXX，則會強制覆蓋掉。 首先，我們先看一下整個佈局為一個黑色背景的Activity，裡面有一個背景為綠色的自定義View

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    tools:context="com.example.lizejun.repocanvaslearn.MainActivity">
    <com.example.lizejun.repocanvaslearn.SaveLayerView
        android:background="@android:color/holo_green_light"
        android:layout_width="200dp"
        android:layout_height="200dp" />
</RelativeLayout>
複製程式碼

下面，我們重寫onDraw(Canvas canvas)方法：

    private void useSaveLayerHasAlphaOrFullColor(Canvas canvas) {
        //先劃一個藍色的圓形.
        canvas.drawRect(0, 0, mRadius * 2, mRadius * 2, mBlueP);
        //這裡產生一個新的圖層
        canvas.saveLayer(0, 0, mRadius, mRadius, null, Canvas.FULL_COLOR_LAYER_SAVE_FLAG);
        //canvas.saveLayer(0, 0, mRadius, mRadius, null, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        //繪製一個紅色矩形.
        canvas.drawRect(0, 0, mRadius / 2, mRadius / 2, mRedP);
    }
複製程式碼

當採用FULL_COLOR_LAYER_SAVE_FLAG時，對應的結果為下圖：

Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復
而採用HAS_ALPHA_LAYER_SAVE_FLAG時，對應的結果為：
Canvas&Paint 知識梳理(2) Canvas 的儲存和恢復
可以看到，當使用FULL_COLOR_LAYER_SAVE_FLAG，不僅下一層原本繪製的藍色沒有用，連View本身的綠色背景也沒有了，最後透上來的是Activity的黑色背景。 關於這個方法，有幾個需要注意的地方：

  • 需要在View中禁用硬體加速。
setLayerType(LAYER_TYPE_SOFTWARE, null);
複製程式碼
  • 當兩個共用時，以FULL_COLOR_LAYER_SAVE_FLAG為準。
  • 當呼叫saveLayer並且只指定MATRIX_SAVE_FLAG或者CLIP_SAVE_FLAG時，預設的合成方式是FULL_COLOR_LAYER_SAVE_FLAG。

6.3 CLIP_TO_LAYER_SAVE_FLAG

它在新建bitmap前，先把canvas給裁剪，一旦畫板被裁剪，那麼其中的各個畫布就會被受到影響，並且它是無法恢復的。當其和CLIP_SAVE_FLAG共用時，是可以被恢復的。

6.4 ALL_SAVE_FLAG

對於save()來說，它相當於MATRIX_SAVE_FLAG | CLIP_SAVE_FLAG。 對於saveLayer()來說，它相當於MATRIX_SAVE_FLAG | CLIP_SAVE_FLAG|HAS_ALPHA_LAYER_SAVE_FLAG。

七、參考文獻

1.http://blog.csdn.net/cquwentao/article/details/51423371

相關文章