【CustomView】Glide+BitmapTransformation 图片上下边框波浪处理（WaveTransformation）

### 用到Glide来显示图片，就会需要添加Transformation来处理图片的圆形、圆角 以及其他样式，Transformation有各种各样的样式，这里我们需要实现下图效果：

*该篇封装的Transformation继承于BitmapTransformation来支持Glide。

如何实现：
 

/**
 * 使图片的上下边框呈波浪状
 *
 * @property waveCorners 波浪直径
 */
class WaveTransformation(private val waveCorners: Int) : BitmapTransformation() {

    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
        messageDigest.update(ID_BYTES)
    }

    override fun transform(
        pool: BitmapPool,
        toTransform: Bitmap,
        outWidth: Int,
        outHeight: Int
    ): Bitmap {
        val canvasBitmap = Bitmap.createBitmap(
            toTransform.width,
            toTransform.height,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(canvasBitmap)  // 创建画板
        val paint = Paint().apply {
            isAntiAlias = true
            shader = BitmapShader(toTransform, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        } // 创建画笔，画笔内容为该 Bitmap
        
        // 计算可以分成多少个小波浪
        val index = canvas.width / waveCorners
        var rectLeft = 0f
        try {
            TransformationUtils.getBitmapDrawableLock().lock()
            // 循环绘制
            for (i in 0 .. index) {
                val rect = RectF(
                    rectLeft,
                    0f,
                    (rectLeft + waveCorners).toInt().toFloat(),
                    canvas.height.toFloat()
                )
                canvas.drawRoundRect(rect, waveCorners / 2f, waveCorners / 2f, paint)
                rectLeft = (rectLeft + waveCorners).toInt().toFloat()
            }
            // 判断是否需要执行最后一次绘制
            if (rectLeft < canvas.width.toFloat()){
                val rect = RectF(
                    rectLeft,
                    0f,
                    canvas.width.toFloat(),
                    canvas.height.toFloat()
                )
                canvas.drawRoundRect(rect, waveCorners / 2f, waveCorners / 2f, paint)
            }
            canvas.setBitmap(null)
        } finally {
            TransformationUtils.getBitmapDrawableLock().unlock()
        }
        return canvasBitmap
    }

    companion object {
        private const val ID = "WaveTransformation"
        private val ID_BYTES = ID.toByteArray(CHARSET)
    }
}

在Glide中使用：

val requestOptions =
    RequestOptions().transform(CenterCrop(), WaveTransformation(25))
Glide.with(context)
.load(url)
.thumbnail(0.2f)
.apply(requestOptions)
.into(view)

继续封装：

fun <T>ImageView.loadWaveCorner(url: T, waveCorners: Int) {
    if (context != null) {
        val requestOptions =
            RequestOptions().transform(CenterCrop(), WaveTransformation(waveCorners))
        loadImage(context, this, url, requestOptions)
    }
}

private fun <T> loadImage(
    context: Context,
    view: ImageView,
    url: T,
    requestOptions: RequestOptions,
) {
    Glide.with(context)
        .load(url)
        .thumbnail(0.2f)
        .apply(requestOptions)
        .into(view)
}

一行代码调用： 

iv.loadWaveCorner(url, 25)

参考：

Glide： https://github.com/bumptech/glide

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

 

最后，欢迎讨论。