上周接到个小需求,就是让一张图片的右下角为圆角,然后百度了一下,发现 Glide
直接支持对图片进行操作,只要继承 BitmapTransformation
,或者实现 Transformation
的接口,就可以获得原图的 Bitmap
对象,通过 Canvas
对图片重新绘制,最后 Glide.with(this).load(R.drawable.test).asBitmap().transform(transformation).into(mImageView);
传入新建的transformation
对象即可。
这里推荐GitHub
上的一个开源库,完全满足日常需求:glide-transformations,里面有各种各样的对图片的处理,很是强大。
不过实际使用的过程中,我倒是发现一个小问题…假如只有右下角是圆角的情况下,当服务器返回的是一张半透明的图片时,结果就成了这样:
原图其实是一张半透明矩形图,这就很尴尬,其实从图中不难发现作者的绘制思路,首先看一下作者的源码部分:
canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,mRadius, paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint);
并附上本人的草图:
- 1. 第一步,绘制一个圆1
- 2. 第二步绘制剩下的两个矩形2和3.
这样给人的感觉,右下角就有了圆角效果,举一反三,其他的四个角也是这样绘制。不过这样有个缺点,作者这样虽然可以实现,但是会有重叠的部分,假如跟我一样是半透明的图片,那么出来的效果就很差强人意。
于是,我换个方法,有点大同小异,只是稍微做了点优化,如下图:
一目了然,其实我就是将作者的圆换成了弧,这样,半透明的图片就可以完美的拥有了圆角。既然这样,那么就重新写一个实现圆角的lib吧,其实很简单,这是运行过后的效果:
很可爱吧!
附上 GitHub
的项目地址:使用Glide实现圆角效果
使用起来就很简单了:
- 在你的项目根
build.gradle
文件下添加maven
地址
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
- 在
module
对应的build.gradle
下添加依赖
dependencies {
compile 'com.github.xiaweizi:RoundCornersView:v1.0'
}
- 在代码中使用(需要结合
Glide
搭配使用)
RoundCornersTransformation transformation =
new RoundCornersTransformation(MainActivity.this,
dip2px(25),
mList.get(position).type);
Glide.with(MainActivity.this)
.load(mList.get(position).resId)
.bitmapTransform(transformation)
.into(holder.mImageView);
创建transformation
对象需传入圆角半径和指定圆角的位置,有以下几种可供选择,当然如果你有别的需要,相信您同样可以举一反三实现的。
public enum CornerType {
/** 所有角 */
ALL,
/** 左上 */
LEFT_TOP,
/** 左下 */
LEFT_BOTTOM,
/** 右上 */
RIGHT_TOP,
/** 右下 */
RIGHT_BOTTOM,
/** 左侧 */
LEFT,
/** 右侧 */
RIGHT,
/** 下侧 */
BOTTOM,
/** 上侧 */
TOP,
}