• 效果如下：

效果圖.jpg

實現思路：

用canvas.drawPath(path,paint)先繪制一個六邊形的形狀。 然后在結合BitmapShader方法將

我們的圖片bitmap設置給畫筆就ok了。

例子：

val bitmapShader = BitmapShader(Bitamp, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR)
//計算縮放比例
var mScale = sourceWidth.toFloat() / Bitamp.width.toFloat()
val matrix = Matrix()
matrix.setScale(mScale, mScale)
bitmapShader.setLocalMatrix(matrix)
var mPaint = Paint()
mPaint.shader = bitmapShader
Canvas.drawPath(Path, mPaint)

第一步測量view的寬高

我們的六邊形是一個正六邊形 所以寬高要一樣。

這里還有個知識點：由于畫筆具有寬度，所以我們在設定view的寬高的時候要考慮到畫筆寬度的那部分值，不然就會出現我們畫出來的view有一部分會顯示不出來的情況。

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        setMeasuredDimension(handleMeasure(widthMeasureSpec), handleMeasure(heightMeasureSpec))
    }
/**
  * 處理寬高
  */
private fun handleMeasure(measureSpec: Int): Int {
        var specMode: Int = MeasureSpec.getMode(measureSpec)
        var specSize: Int = MeasureSpec.getSize(measureSpec)
        var result = 100
        result = when (specMode) {
            MeasureSpec.EXACTLY -> {
                specSize
            }
            else -> {
                min(result, specSize)
            }
        }
        parentWidth = result + sixStroke.toInt() * 2 //這里又加了個 sixStroke * 2 就是考慮到了畫筆的寬度
        return parentWidth
    }

到這里我們的view的大小就確定好了。

第二步繪制一個六邊形的形狀

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
            var circlePointX = parentWidth / 2
            var radian60 = 60 * Math.PI / 180
            var xLength = circlePointX * sin(radian60)
            var yLength = circlePointX * cos(radian60)
            path.reset()
            path.moveTo(circlePointX.toFloat(), sixStroke / 2)
            path.lineTo(circlePointX.toFloat() + xLength.toFloat(), yLength.toFloat())
            path.lineTo(
                    circlePointX.toFloat() + xLength.toFloat(),
                    circlePointX + yLength.toFloat()
            )
            path.lineTo(circlePointX.toFloat(), parentWidth.toFloat() - sixStroke / 2)
            path.lineTo(
                    circlePointX.toFloat() - xLength.toFloat(),
                    circlePointX + yLength.toFloat()
            )
            path.lineTo(circlePointX.toFloat() - xLength.toFloat(), yLength.toFloat())
            path.close()
            canvas.drawPath(path, mPaint)
        }
    }

至此一個六邊形就繪制完畢。

第三步優化我們的六邊形 讓他兼顧展示網絡圖片的功能。

先引入我們的Glide圖片加載框架：

   /**
     * glide圖片加載
     */
    api "com.github.bumptech.glide:glide:4.11.0"
    annotationProcessor "com.github.bumptech.glide:compiler:2.0"

自定義Glide加載圖片的transform方法：

class PentagonaltTransform(val width: Float) : BitmapTransformation() {
    val path = Path()
    lateinit var mCanvas: Canvas
    val mPaint by lazy {
        Paint().apply {
            isAntiAlias = true
            color = Color.RED
            strokeWidth = 10f
            strokeCap = Paint.Cap.ROUND
            pathEffect = CornerPathEffect(10f)
        }
    }

    override fun updateDiskCacheKey(p0: MessageDigest) {

    }

    override fun transform(
            pool: BitmapPool,
            source: Bitmap,
            outWidth: Int,
            outHeight: Int
    ): Bitmap {
        var result: Bitmap? = pool[width.toInt(), width.toInt(), Bitmap.Config.ARGB_8888]
        if (result == null) {
            result = Bitmap.createBitmap(width.toInt(), width.toInt(), Bitmap.Config.ARGB_8888)
        }
        mCanvas = Canvas(result!!)
        var circlePointX = width / 2
        var radian60 = 60 * Math.PI / 180
        var xLength = circlePointX * kotlin.math.sin(radian60)
        var yLength = circlePointX * kotlin.math.cos(radian60)
        path.reset()
        path.moveTo(circlePointX.toFloat(), 0f)
        path.lineTo(circlePointX.toFloat() + xLength.toFloat(), yLength.toFloat())
        path.lineTo(circlePointX.toFloat() + xLength.toFloat(), circlePointX + yLength.toFloat())
        path.lineTo(circlePointX.toFloat(), circlePointX.toFloat() * 2)
        path.lineTo(circlePointX.toFloat() - xLength.toFloat(), circlePointX + yLength.toFloat())
        path.lineTo(circlePointX.toFloat() - xLength.toFloat(), yLength.toFloat())
        path.close()

        mPaint.shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        mPaint.isAntiAlias = true
        mCanvas!!.drawPath(path, mPaint)
        return result!! //切記這里不能返回那個source的bitmap 要返回我們創建的只有寬高信息的bitmap
    }
}

使用自定義的transform的方法：

Glide.with(this).load(url)
   //  .apply(RequestOptions.bitmapTransform(PentagonaltTransform()))
       .transform(PentagonaltTransform(這里寫ImageView的寬高))
       .listener(object : RequestListener<Drawable> {
             override fun onLoadFailed(p0: GlideException?, p1: Any?, p2: Target<Drawable>?, p3: Boolean): Boolean {
                       //當遇到網絡圖片加載錯的時候 去加載默認的圖片
                       setDefaultDrawable()
                       return false
             }

             override fun onResourceReady(p0: Drawable?, p1: Any?, p2: Target<Drawable>?, p3: DataSource?, p4: Boolean): Boolean {
                        return false
              }
         }).into(this)

至此自定義加載網絡圖片的六邊形TransForm完成。

全部代碼已經上傳至Github:https://github.com/1169927533/BaseMavenProject/blob/master/module_customview/src/main/java/com/pince/module_customview/sixshape/PentagonalView.kt

使用方法：

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
dependencies {
            implementation 'com.github.1169927533.BaseMavenProject:module_customview:1.4.1'
    }