Android在onDraw(Canvas canvas)里使用Paint.setXfermode(PorterDuff.Mode)显示图片部分内容

2018-07-05 遇到的一点小问题

裁剪

PorterDuff.Mode

使用Paint.setXfermode(PorterDuff.Mode)可以做出不少图形效果，具体参照上图。记得刚开始学安卓那会，使用Eclipse能生成V4包，里面就有这张图的代码。
刚开始参照网上乱转载的博客，一直没正确把图片切除掉，后面看到Android PorterDuffXfermode使用中的一些坑才解决。

@Override
protected void onDraw(Canvas canvas) {
    int csl = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);

    mPaint.setColor(Color.RED);
    canvas.drawCircle(0, 550, 200, mPaint);

    mPaint.setXfermode(xfermode);

    mPaint.setColor(Color.BLUE);
    canvas.drawCircle(100, 650, 200, mPaint);

    mPaint.setXfermode(null);
    canvas.restoreToCount(csl);
}
public void cha(PorterDuff.Mode mode) {
        xfermode = new PorterDuffXfermode(mode);
        invalidate();
}

在Activity弄了个对话框切换PorterDuff.Mode，在onDraw(Canvas canvas)随便画了两个圆看效果，添加上canvas.restoreToCount(csl);就能成功。懒得截图了，效果如上。

final PorterDuff.Mode[] values = PorterDuff.Mode.values();
String[] a = new String[values.length];
for (int i = 0; i < values.length; i++) {
            String s = values[i].toString();
            a[i] = i + "_" + s;
}
final AlertDialog.Builder dia = new AlertDialog.Builder(BitmapActivity.this);
dia.setItems(a, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                mView.cha(values[which]);
                text.setText(values[which].toString());

            }
});

搜索过程也看了如何在Bitmap截取任意形状，Android 不规则封闭区域填充 手指秒变油漆桶之类的文章，类似的还很多,随手记录一下。

SVG

之前一想到Bitmap随意裁剪显示，第一个想到的是之前看过的MostafaGazar/CustomShapeImageView，能裁处任意效果。示例就是下面的图。

MostafaGazar/CustomShapeImageView

下载源码看了下，发现后面那些奇形怪状的效果都是通过.svg文件实现的。 首先复制SVG解析工具pents90/svg-android的代码进去，然后得到android.graphics.Picture对象，再然后通过canvas.drawPicture(@NonNull Picture picture)绘制出形状就可以了。和你绘制好的底图使用new PorterDuffXfermode(PorterDuff.Mode.DST_IN)绘制就可以了。具体懒得贴图和代码了，自己看源码或者网上随便搜索也有一大堆。
网上搜索时发现一篇不错的文，顺便贴一下。安卓自定义View进阶-Canvas之图片文字里面有讲到一个自定义控件，一个绚丽的loading动效分析与实现！，效果看着确实很不错。

阴影

刚开始网上随便搜，然后使用Paint.setShader(Shader shader)尝试绘制阴影，发现这是使用渐变颜色来填充画布的，理论上也能实现，就是麻烦，算了，换一个。

Shader mShader = new LinearGradient(0, 0, 40, 60, new int[]{Color.GRAY,Color.RED}, null, Shader.TileMode.REPEAT);
mPaint.setShader(mShader);

试一下Paint.setMaskFilter(MaskFilter maskfilter)，首先使用EmbossMaskFilter，很明显，效果不是想要的。然后尝试使用BlurMaskFilter,还可以，不过好像没法设置阴影角度啥的，而且阴影颜色是跟随画布颜色的，要另外设置成黑色会比较麻烦，不过这个还是有不少玩法的，具体推荐查看自定义控件其实很简单1/4。

BlurMaskFilter filter = new BlurMaskFilter(20, BlurMaskFilter.Blur.SOLID);
mPaint.setMaskFilter(filter );

再试一下Paint.setShadowLayer(float radius, float dx, float dy, int shadowColor)，这个看着还不错，能设置颜色等参数，不过点进去看源码，没看到具体参数说明，设置的一些值肉眼也没看到差别。随便看看也是可以的，就是我绘制圆角矩形，但阴影是直角矩形，虽然角那边颜色会淡点，但还是丑。
使用android:elevation="5dp"设置View的阴影，对方形View很友好，不过缺个几块的就不行了。
这一堆看下来，感觉还是绘制半透明渐变或者多绘制几个不同颜色的矩形来叠加省事。

.

说那么多，其实是因为我们公司设计稿经常出现这种两个半圆的分割线。尺寸固定的，不考虑安装包大小，直接美工切背景图，不然考虑，纯色背景还好，白色背景加中间分割线的布局，弄两个填色圆形左右边距使用负数android:layout_margin="-9dp"也能应付。就担心背景是其他可更换图片，然后项目不少，分割线好几条，再加上有阴影，就会比较麻烦。试了上面那些，最后发现还是让美工切一下图片然后拼接比较省事。

银联收款

.

刚才同事有说到一个方法，和早上在安卓自定义View进阶-Canvas之图片文字里看到的类似。
左右画两个圈，背景还是使用整个图片的大背景，只要圈的背景和大图背景位置能对上就行。