Glide的圖形轉換與開源庫glide-transformations介紹

       項目有一個需求，要求我們將應用的頭像換成ImageView圓形控件，列表的大圖換成圓角方形圖片控件，因此我們想到的是自定義圓形圖片控件，或者圓角方形圖片控件，常見的ImageView自定義庫  circleimageview  就是自定義圓形控件，我們想Glide有沒有類似開源庫，能夠自動繪製各種不同形狀的ImageView，這就是我們要講的這一節glide-transformations圖片轉換框架庫。

glide-transformations項目地址：

https://github.com/wasabeef/glide-transformations

添加build.gradle依賴：

compile     :"jp.wasabeef:glide-transformations:2.0.0"

在講glide-transformations Api之前，我們首先了解下Glide如何自定義渲染圖片原理。

我們剛開始使用Glide API時都會調用centerCrop()和fitCenter()等方法來設置圖片變換操作，點擊查看centerCrop()方法的實現：

@SuppressWarnings("unchecked")
public DrawableRequestBuilder<ModelType> centerCrop() {
    return transform(glide.getDrawableCenterCrop());
}

public GenericRequestBuilder<ModelType, DataType, ResourceType, TranscodeType> transform(
        Transformation<ResourceType>... transformations) {
    isTransformationSet = true;
    if (transformations.length == 1) {
        transformation = transformations[0];
    } else {
        transformation = new MultiTransformation<ResourceType>(transformations);
    }

    return this;
}

通過源碼知道，其實centerCrop()和fitCenter()調用了transform方法，所有我們想自定義圖片樣式，實現更加豐富的圖片效果，如圖片圓角化、圓形化、模糊化，還要藉助transform()方法來實現的。

我們打開centerCrop() 查看源碼

public class CenterCrop extends BitmapTransformation {

    public CenterCrop(Context context) {
        super(context);
    }

    public CenterCrop(BitmapPool bitmapPool) {
        super(bitmapPool);
    }

    // Bitmap doesn't implement equals, so == and .equals are equivalent here.
    @SuppressWarnings("PMD.CompareObjectsWithEquals")
    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        final Bitmap toReuse = pool.get(outWidth, outHeight, toTransform.getConfig() != null
                ? toTransform.getConfig() : Bitmap.Config.ARGB_8888);
        Bitmap transformed = TransformationUtils.centerCrop(toReuse, toTransform, outWidth, outHeight);
        if (toReuse != null && toReuse != transformed && !pool.put(toReuse)) {
            toReuse.recycle();
        }
        return transformed;
    }

    @Override
    public String getId() {
        return "CenterCrop.com.bumptech.glide.load.resource.bitmap";
    }
}

通過源碼得知，我們通過繼承BitmapTransformation類實現自定義圖片轉換，我自定義一個圓形裁剪類：

/****
 * @ClassName CircleBitmapTransformation
 * @Description 自定義圓形圖片裝換類
 * ****/
public class CircleBitmapTransformation extends BitmapTransformation {


    public CircleBitmapTransformation(Context context) {
        super(context);
    }

    public CircleBitmapTransformation(BitmapPool bitmapPool) {
        super(bitmapPool);
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        //取當前位圖的最少值，用於圓形的直徑
        int diameter = Math.min(toTransform.getWidth(), toTransform.getHeight());
        final Bitmap toReuse = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888);
        final Bitmap result;
        //如果調用方法沒有指定控件的寬和高，默認以位圖的長寬最少值繪製。
        if (toReuse != null) {
            result = toReuse;
        } else {
            //產生一個正方形的位圖
            result = Bitmap.createBitmap(diameter, diameter, Bitmap.Config.ARGB_8888);
        }
        int dx = (toTransform.getWidth() - diameter) / 2;
        int dy = (toTransform.getHeight() - diameter) / 2;
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        BitmapShader shader = new BitmapShader(toTransform, BitmapShader.TileMode.CLAMP,
                BitmapShader.TileMode.CLAMP);
        if (dx != 0 || dy != 0) {
            Matrix matrix = new Matrix();
            matrix.setTranslate(-dx, -dy);
            shader.setLocalMatrix(matrix);
        }
        paint.setShader(shader);
        paint.setAntiAlias(true);
        float radius = diameter / 2f;
        //最後生成一個圓形位圖
        canvas.drawCircle(radius, radius, radius, paint);
        if (toReuse != null && !pool.put(toReuse)) {
            toReuse.recycle();
        }
        return result;
    }

    //給每一個裝換的類設置一個ID，通常我們定義類的全路徑名稱
    @Override
    public String getId() {
        return CircleBitmapTransformation.class.getName();
    }
}

我們通過以下代碼測試，在transform()方法中調用new CircleBitmapTransformation 對象：

img1 = (ImageView) this.findViewById(R.id.img1);
String url = "http://img0.imgtn.bdimg.com/it/u=3442953403,1752881265&fm=26&gp=0.jpg";
Glide.with(this).load(url).transform(new CircleBitmapTransformation(this)).into(img1);

通過模擬器可以看到剪裁成了圓形圖片，好了，這就是我們Glide圖形轉換的實現原理，現在glide-transformations已經幫助我們實現了各種複雜圖形效果，高斯模糊，圓角，圓形，三角形等。接下來我們查看具體API的使用。

glide-transformations 框架中實現了模糊，變色，裁剪等轉換類

裁剪轉換類包括：
CropTransformation  裁剪網絡圖片指定區域大小
CropCircleTransformation   生成圓形圖片
CropSquareTransformation 裁剪成正方形
RoundedCornersTransformation  裁剪成圓角形狀

顏色轉換類包括：
GrayscaleTransformation  將彩色圖片轉換成黑白圖片

模糊轉換類包括：
BlurTransformation 調整照片的模糊度

CropTransformation 裁剪網絡圖片指定區域大小

        //剪裁網絡圖片400*400的區域放置到大小爲100*100dip的圖片中
        Glide.with(this).load(url).centerCrop()
                .placeholder(R.mipmap.ic_launcher_round)
                .bitmapTransform(new CropTransformation(this, 400, 400))
                .into(img1);

CropCircleTransformation 生成圓形圖片

        //生成圓形圖片
        Glide.with(this).load(url).centerCrop()
                .placeholder(R.mipmap.ic_launcher_round)
                .bitmapTransform(new CropCircleTransformation(this))
                .into(img2);

 

CropSquareTransformation 裁剪成正方形

        //生成正方形圖片
        Glide.with(this).load(url).centerCrop()
                .placeholder(R.mipmap.ic_launcher_round)
                .bitmapTransform(new CropSquareTransformation(this))
                .into(img2);

RoundedCornersTransformation 裁剪成圓角形狀 ，第二個參數爲設置圓角的弧度

        //生成圓角圖片
        Glide.with(this).load(url).crossFade()
                .placeholder(R.mipmap.ic_launcher_round)
                .bitmapTransform(new RoundedCornersTransformation(this, 10, 10))
                .into(img3);

GrayscaleTransformation 將彩色圖片轉換成黑白圖片

//將彩色照片變成黑白照
        Glide.with(this).load(url).centerCrop()
                .placeholder(R.mipmap.ic_launcher_round)
                .bitmapTransform(new GrayscaleTransformation(this))
                .into(img4);

BlurTransformation 調整照片的模糊度，數值越大越模糊

        //將照片生成模糊照片,第二個參數調整模糊度，數值越大越模糊
        Glide.with(this).load(url).centerCrop()
                .placeholder(R.mipmap.ic_launcher_round)
                .bitmapTransform(new BlurTransformation(this, 10))
                .into(img5);

運行程序顯示如下圖所示：

好了，以上就是Glide圖片轉換原理與glide-transformations的講解了，如有錯誤或者建議請指出。