探一探，非常實用的GIF圖圓角控制元件（3行程式碼）

文淑發表於2019-04-08

前言

現代人的崩潰是一種默不吭聲的崩潰，看起來很正常，會說笑，會打鬧，會社交，表面平靜，實際上心裡的糟心事已經積累到一定程度了。不會摔門砸東西，不會流眼淚或歇斯心底，但可能某一秒突然就積累到極致，也不說話，也不真的崩潰，也不太想活著。也不敢去死。

這裡引用了「張帥B」的一段話，說的很貼切，我們這一代年輕人到底怎麼了？

正文

先來看看效果圖：

初步分析

眾所周知，Android 中主流的圖片載入框架有 Picasso，Glide，Fresco。Picasso 載入 gif 圖沒有動畫效果，Glide 與 Fresco 支援 gif 動效圖。Fresco 自帶的控制元件 SimpleDraweeView 支援圓角屬性，Glide 需要手動給 ImageView 設定 shape，那麼 Glide，Fresco 是否支援 gif 圖圓角？

先來看一個例子，Glide 載入 gif 圓角，先看看 xml 佈局：

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:background="@drawable/corners_bg"
        android:src="@mipmap/gif_01"
        />
複製程式碼

圓角檔案 corners_bg ：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp"></corners>
</shape>
複製程式碼

Glide 載入動圖：

    Glide.with(this).load(R.mipmap.gif_01)
            .asGif()
            .override(720, 512)
            .into(mImageView);
複製程式碼

效果圖：

發現 gif 圖並沒有顯示圓角，經過測試 Fresco 的圓角屬性，在 gif 圖上也會失效。那麼我們怎麼才能讓 gif 圖顯示圓角呢？

大家都知道 gif 是由多張靜態圖組合而成，如果處理單張圖片效率將會極其低下，既然不能對源圖片進行處理，那麼就只能在顯示控制元件上想辦法了。

經過初步分析有以下三種可行方案：

裁剪圖片控制元件
在 gif 圖片控制元件上覆蓋一層圓角圖片（4角圓角中間透明）
Path 的填充樣式 FillType

方案一裁剪控制元件，改變圖片顯示區域，但裁剪的效率並不高，顧排除方案一；方案二，ui 切圓角圖片，如果在換膚的情況下，ui 需要切多套圓角圖片，可擴充套件性太差，同時覆蓋的圓角圖片載入會消耗效能，排除方案二；那就只有第三方案了，在效能與可擴充套件性方面優於前兩種方案。

Path填充樣式FillType

    /**
     * Set the path's fill type. This defines how "inside" is computed.
     *
     * @param ft The new fill type for this path
     */
    public void setFillType(FillType ft) {
        // 呼叫 c 層的 jni 方法
    }
複製程式碼

設定路徑的填充樣式，定義了 "內部" 是如何計算的。引數 ft 是個列舉值，有 4 種型別：

    /**
     * Enum for the ways a path may be filled.
     */
    public enum FillType {
        // these must match the values in SkPath.h
        /**
         * Specifies that "inside" is computed by a non-zero sum of signed
         * edge crossings.
         */
        WINDING         (0),
        /**
         * Specifies that "inside" is computed by an odd number of edge
         * crossings.
         */
        EVEN_ODD        (1),
        /**
         * Same as {@link #WINDING}, but draws outside of the path, rather than inside.
         */
        INVERSE_WINDING (2),
        /**
         * Same as {@link #EVEN_ODD}, but draws outside of the path, rather than inside.
         */
        INVERSE_EVEN_ODD(3);
    }
複製程式碼

WINDING (0)

預設值是 WINDING (0) ，我們一起來探究下這幾個值產生的效果，先來看看下面這段程式碼：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        mPath.addCircle(600, 400, 200, Path.Direction.CW);
        mPath.addCircle(900, 400, 200, Path.Direction.CW);

        canvas.drawPath(mPath, mPaint);
        canvas.restore();
    }
複製程式碼

繪製兩相交圓，並兩圓的方向都是順時針繪製。效果圖是這樣的：

上圖是兩圓都是順時針的方向，改變一圓的繪製方向為逆時針：

    mPath.addCircle(600, 400, 200, Path.Direction.CW);
    mPath.addCircle(900, 400, 200, Path.Direction.CCW);
複製程式碼

效果圖如下：

WINDING 的原理：

其實WINDING表示非零環繞原則，從任意一點發射一條線，預設值是 0，遇到順時針交點則 +1，遇到逆時針交點則 -1，最終如果不等於 0，則認為這個點是圖形內部的點，則需要繪製顏色；反之，如果這個值是 0，則認為這個點不在圖形內部，則不需要繪製顏色。

正好解釋上圖相交的部分沒有繪製顏色，相交的部分首先是繪製順時針方向的圓 +1 ，然後繪製逆時針方向的圓 -1 ，正好等於 0，不需要繪製顏色。

EVEN_ODD (1)

這個值和 WINDING 不同，WINDING 要求每個圖形都是有方向的。EVEN_ODD 並不要求圓的方向，看看下面一段程式碼：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        mPath.setFillType(Path.FillType.EVEN_ODD);
        // 改成 Path.Direction.CCW 的效果一樣
        mPath.addCircle(600, 400, 200, Path.Direction.CW);
        mPath.addCircle(900, 400, 200, Path.Direction.CW);

        canvas.drawPath(mPath, mPaint);
        canvas.restore();
    }
複製程式碼

效果圖如下：

EVEN_ODD 原理：

英文單詞中 EVEN 是偶數，ODD 是奇數的意思。這個原則也被稱為奇偶原則。從任意一點射出一條線，與圖形的交線是奇數，則認為這個點在圖形內部，需要繪製顏色；反之如果是偶數，則認為這個點在圖形外部，不需要繪製顏色。

INVERSE_WINDING (2)

inverse 表示反轉的意思，相同的一段程式碼，繪製出來的結果是相反的。如下程式碼：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        mPath.setFillType(Path.FillType.INVERSE_WINDING);
        mPath.addCircle(600, 400, 200, Path.Direction.CW);
        mPath.addCircle(900, 400, 200, Path.Direction.CW);

        canvas.drawPath(mPath, mPaint);
        canvas.restore();
    }
複製程式碼

圓的區域都不需要繪製顏色，非圓區域繪製顏色。效果圖如下：

設定一圓的繪製方向為逆時針：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        mPath.setFillType(Path.FillType.INVERSE_WINDING);
        mPath.addCircle(600, 400, 200, Path.Direction.CW);
        mPath.addCircle(900, 400, 200, Path.Direction.CCW);

        canvas.drawPath(mPath, mPaint);
        canvas.restore();
    }
複製程式碼

兩圓相交的部分需要繪製顏色，非圓區域繪製顏色。效果圖一覽：

INVERSE_EVEN_ODD(3)

INVERSE_EVEN_ODD 模式與 INVERSE_WINDING 模式的不同的繪製方向效果一樣，程式碼如下：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);
        mPath.addCircle(600, 400, 200, Path.Direction.CW);
        mPath.addCircle(900, 400, 200, Path.Direction.CCW);

        canvas.drawPath(mPath, mPaint);
        canvas.restore();
    }
複製程式碼

效果圖：

相信各位小夥伴們看到這裡，心裡很清楚了 gif 圓角控制元件的填充樣式為以下兩種情況：

INVERSE_WINDING 樣式，逆時針繪製圓角矩形
INVERSE_EVEN_ODD 樣式

編寫程式碼

通過上文原理的介紹，gif 圖圓角控制元件的程式碼就非常簡單。

起名字

接地氣的名字，能夠讓人眼前一亮，就叫 CornersGifView吧。

CornersGifView圓角控制元件

核心程式碼如下（3 行程式碼）：

        mPath.reset();
        // add round rect
        mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);
        mPath.addRoundRect(new RectF(0, 0, w, h), mCorners, Path.Direction.CCW);
複製程式碼

相關引數：

w 表示控制元件的寬度
h 表示控制元件的高度
mCorners 圓角陣列（大小為 8，一組圓角包含長寬兩個引數，4 組圓角顧 8 個引數）
繪製方向 Path.Direction.CCW 與 Path.Direction.CW 效果一致

大家可能已經注意到了，非圓角矩形區域的顏色，為 mPaint 畫筆的顏色，那麼就需要保證畫筆的顏色與父控制元件的背景顏色一致，如果父控制元件顏色為透明，那麼就需要取父控制元件的父控制元件顏色，以此類推，遞迴獲取父控制元件的顏色，請參考以下兩個方法：

    /**
     * 獲取父控制元件顏色
     * @param parent
     * @return
     */
    private int getParentBackGroundColor(ViewParent parent) {
        if (parent == null) {
            return Color.WHITE;
        }
        if (parent instanceof View) {
            View parentView = (View) parent;
            int parentColor = getViewBackGroundColor(parentView);
            if (parentColor != Color.TRANSPARENT) {
                return parentColor;
            } else {
                getParentBackGroundColor(parentView.getParent());
            }
        }
        return Color.WHITE;
    }
複製程式碼

通過反射獲取 View 的背景顏色值：

    /**
     * 獲取 View 的背景色
     * @param view
     * @return
     */
    private int getViewBackGroundColor(View view) {
        Drawable drawable = view.getBackground();
        if (drawable != null) {
            Class<Drawable> mDrawable_class = (Class<Drawable>) drawable.getClass();
            try {
                Field mField = mDrawable_class.getDeclaredField("mColorState");
                mField.setAccessible(true);
                Object mColorState = mField.get(drawable);
                Class mColorState_class = mColorState.getClass();
                Field mColorState_field = mColorState_class.getDeclaredField("mUseColor");
                mColorState_field.setAccessible(true);
                int color = (int) mColorState_field.get(mColorState);
                if (color != Color.TRANSPARENT) {
                    return color;
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return Color.TRANSPARENT;
    }
複製程式碼

不僅支援 gif 圖圓角，還支援靜態圖圓角，最終效果圖如下：

結束語

「張帥B」的那段話，概述的非常經典。都說 80 後的在忙著掙錢；00 後在忙著談戀愛；只有我們 90 的在忙著賺錢又談戀愛，最後錢沒掙到，戀愛也沒談到。

最後再囉嗦一點，生活都不容易，一直堅持做一件事情更不容易，還希望各位朋友，能夠多多支援，小編新開的公眾號「控制元件人生」，有你們的相伴，才有寫下去的動力。

掃一掃關注我的公眾號與小夥伴們一同成長~

探一探快應用的虛實
2018-10-10
分享用CSS實現無圖片圓角效果
2007-07-20
CSS
Glide實現圓角圖片，以及圓形圖片
2020-09-27
IDE
利用DOTNETBAR製作圓角窗體和圓角控制元件
2012-11-27
控制元件
Android Xfermode 實戰實現圓形、圓角圖片
2015-05-21
Android
一探 koa-session 原始碼
2019-10-10
Session原始碼
css3實現的圓角效果程式碼例項
2017-02-19
CSSS3
PHP合成圖圓角
2020-10-28
PHP
自定義drawable實現圓角圖片
2015-12-09
自定義view實現圓角圖片
2015-12-09
View
php短視訊原始碼，按鈕的圓角圖示實現
2022-06-08
PHP原始碼
CSS3實現的div圓角效果程式碼例項
2017-02-17
CSSS3
自定義頭像圓角控制元件
2016-11-01
控制元件
在相親原始碼開發中，如何實現圓角及特殊圓角的使用？
2021-10-21
原始碼
非常實用的PHP程式碼片段推薦
2012-07-09
PHP
12 個非常實用的 jQuery 程式碼片段
2015-11-01
jQuery
box-shadow圓角效果程式碼
2018-07-22
ios實現圖片圓角方式小計
2017-07-25
iOS
CSS不用背景圖片實現優惠券樣式反圓角,凹圓角,反向半圓角,並且背景漸變
2021-01-25
CSS
【小貼士】探一探javascript中的replace
2014-08-28
JavaScript
用GIF圖片來告訴大家程式猿的真實生活
2013-02-25
canvas繪製圓角矩形程式碼例項
2017-02-10
Canvas
input文字框圓角效果程式碼例項
2017-02-19
iOS幾行程式碼讓介面變圓角
2016-02-22
iOS行程
iOS圖片設定圓角
2018-02-26
iOS
PS製作圓角圖片
2024-03-14
用CSS製作的圓角層
2009-03-15
CSS
Android 圓角、圓形 ImageView 實現
2018-06-25
AndroidView
今天，我們來探一探WebSocket原理
2020-02-10
Web
UIImageView 實現圓角效果
2016-10-11
UIView
用程式碼探討KVC/KVO的實現原理
2019-02-27
用程式碼探討 KVC/KVO 的實現原理
2018-04-05
android 圓角圖片處理
2013-11-06
Android
iOS 檢視控制元件設定圓角、陰影
2017-08-22
iOS控制元件
即學即用的 30 段 Python 非常實用的程式碼
2020-04-06
Python
別用圖片了，CSS遮罩合成實現帶圓角的環形loading動畫
2023-04-04
CSS遮罩動畫
Android自定義View之圖片外形特效——輕鬆實現圓角和圓形圖片
2018-08-07
AndroidView特效
css如何為圖片設定圓角
2021-09-11
CSS