2019-07-28 PorterDuffXferMode的一些使用问题

PorterDuffXferMode的一些使用问题

一 PorterDuff.Mode使用问题

1.1 PorterDuff.Mode.CLEAR

• 正常效果

  android_26_PorterDuff_Mode_CLEAR

• targetSdkVersion 28

  android_28_PorterDuff_Mode_CLEAR

1.2 PorterDuff.Mode

PorterDuff.Mode 官方效果
https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html

1.2 PorterDuffXfermode 在Android 27 和 28 的实际效果

• PorterDuffXfermode_27

  PorterDuffXfermode_27

• PorterDuffXfermode_28

  PorterDuffXfermode_28

图片来源

二 绘制时 canvas 画布不同导致的问题

after change another canvas ,PorterDuffXfermode(PorterDuff.Mode.CLEAR) is not work

创建 另一个 画布

//保存没有背景的截图
screenShotBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
mScreenShotCanvas = Canvas(screenShotBitmap)

dispatchDraw

    override fun dispatchDraw(canvas: Canvas?) {

            ...

        //7.绘制蒙版
        drawMask(canvas)
       ....

        //截图
        mScreenShotCanvas?.let { canvas ->
           ...
            //7.绘制蒙版
            drawMask(canvas, true)
           ...
        }


...


    }

问题 传入的canvas 不同

    /**
     * 绘制蒙版
     *
     */
    private fun drawMask(canvas: Canvas, shotScreen: Boolean = false) {
        try {//qtip rl_frame_content -> 相框外层容器

            rl_frame_content?.let {
                //先获取相框外层容器的位置
                val rlLeft = it.left
                val rlTop = it.top
                mGpuIV?.let { gpuIv ->

                    mMaskBitmap?.let { mask ->

                        //获取相片和相框外侧之间的位置关系

                        val gpuIvLeft = rl_gpu_iv_content_trim.left
                        val gpuIvTop = rl_gpu_iv_content_trim.top

                        val gpuIvWidth = rl_gpu_iv_content_trim.width
                        val gpuIvHeight = rl_gpu_iv_content_trim.height

                        val newWidth = gpuIvWidth - 2 * mMaskMargin
                        val newHeight = gpuIvHeight - 2 * mMaskMargin

                        //缩放后的蒙版(根据图片的大小调整蒙版大小)
                        if (mScaledMaskBitmap == null) {
                            mScaledMaskBitmap = BitmapUtils.scaleBitmapInMaxWidthOrHeight(mask, newWidth, newHeight)
                        }

                          mScaledMaskBitmap?.let { scaleMask ->
                                //绘制mask
                                val left = rlLeft.toFloat() + gpuIvLeft
                                val top = rlTop.toFloat() + gpuIvTop

                                //1.离屏画布
                                val save = canvas.saveLayer(left, top, left + gpuIvWidth, top + gpuIvHeight, null, Canvas.ALL_SAVE_FLAG)
                                //2.绘制带颜色蒙版 创建大小和 rl_frame_content 一样的蒙版
                                val dstBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
                                //创建蒙版画布
                                val dstCav = Canvas(dstBitmap)
                                //蒙版颜色
                                dstCav.drawColor(mMaskColor)
                                canvas.drawBitmap(dstBitmap, left, top, null)

                                //3.蒙版掏空出透明形状区域
                                val paintMask = Paint()
                                paintMask.isAntiAlias = true
                                paintMask.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
                                //蒙版位置居中
                                canvas.drawBitmap(scaleMask, left + (gpuIvWidth - scaleMask.width) / 2, top + (gpuIvHeight - scaleMask.height) / 2, paintMask)

                                //4.画布恢复
                                canvas.restoreToCount(save)
                            }                     }
                }
            }
        } catch (e: Exception) {
            QLogger.e(e)
        }


    }

需要的效果

蒙版

蒙版形状.png

截图时实际效果

蒙版形状失败.png

并不是 paintMask.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
无效 而是 clear的区域不是 图片的非透明区而是 整个图片

• 解决问题

// QTIP: 2019-07-23 修改

 PorterDuff.Mode.CLEAR 

为 PorterDuff.Mode.DST_OUT 或者 PorterDuff.Mode.XOR

待解决疑问 : Android api 28 以下 传入有bitmap的canvas 绘制时 PorterDuff.Mode.CLEAR 无效

参考

https://stackoverflow.com/questions/51538443/xfermode-in-android-p-beta?noredirect=1#comment90044905_51538443

https://stackoverflow.com/questions/10494442/android-paint-porterduff-mode-clear?rq=1

https://issuetracker.google.com/issues/111819103

https://stackoverflow.com/questions/56189189/android-in-android-pie-api-28-radialgradient-draws-a-rectangle-instead-of-a?rq=1

https://android.googlesource.com/platform/development/+/master/samples/ApiDemos/src/com/example/android/apis/graphics/Xfermodes.java

关联下 ViewOutlineProvider

/**
 * Interface by which a View builds its {@link Outline}, used for shadow casting and clipping.
 */
public abstract class ViewOutlineProvider {
...