关于android中图片裁剪以及PorterDuffXfermode的使用经验小结

Posted 2022-11-01 carbs_wang

1.关于图片”裁剪”出现锯齿的问题

    使用canvas的clipXxx函数，可以获取只显露出某一区域的图形，但是有锯齿，即使paint使用了setAntiAlias(true)函数依然无法消除锯齿问题。

解决方案：
使用shader方案，即:

paint.setShader(mBitmapShader);
canvas.drawCircle(mCenterX, mCenterY, mRadius, paint);

其中mBitmapShader的声明与实现是：

BitmapShader mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

//如果要实现位置变换等，可以添加如下代码：
mBitmapShader.setLocalMatrix(matrix);

具体的实现，可见AvatarImageView项目中，多字裁剪的实现方式。

2.PorterDuffXfermode实现方式

    PorterDuffXfermode主要用于获取两张图片取“并集/交集”等的效果。这里的取“交集/并集”是根据图片A和图片B的某个像素点的颜色值来确定的。
假设代码的实现为如下方式：
    1. 首先，画出A-des。这里的A-des不一定必须是bitmap，可以是path等。
    2. 其次，设置paint的Xfermode为
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    3. 最后，画出B-src。与第一步中的A-des相似，这里的B-src不一定必须是bitmap，可以是path等。

根据上面的三个步骤，分析绘出的图的某一个像素点的颜色值情况：
    1. 如果在(x,y)像素点处，A的颜色值为透明或者没有设定，而B的不为0，那么此点的颜色值为0x00000000。因为A为0了，而SRC_IN的效果就是最后要显示的图片取交集，并且后画的显示在交集上，而交集为0（底部颜色为0，可以认为最后颜色的透明度为两者相乘），所以就将B图变成透明的了。如果A的透明度为0.5，那么SRC_IN后的图片的相当于B*0.5透明度。
    2. 最后生成的图像，是对两个图像的每一个像素点分别计算交集获取的结果，与图像的“区域”无关。

举例说明：
仿微信聊天中带有三角凸起的图片的代码片段：

public static Bitmap canvasTriangle(Bitmap bitmapimg, int direct) 
        Bitmap output = Bitmap.createBitmap(bitmapimg.getWidth(),
                bitmapimg.getHeight(), Bitmap.Config.ARGB_4444);
        Canvas canvas = new Canvas(output);

        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmapimg.getWidth(),
                bitmapimg.getHeight());

//      paint.setStrokeWidth(30);
//      paint.setStyle(Paint.Style.STROKE);

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(0x66000000);

        //可以使用canvas.drawRect() + canvas.drawPath()等方式多个区域合并后进行绘制
        //path只是用来绘制像素的透明度的。如果paint的透明度为0，那么相当于没有画任何东西，如果paint的透明度为0.3，那么最后的图片的透明度为0.3
        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(bitmapimg.getWidth() - 15, 0);
        path.lineTo(bitmapimg.getWidth() - 15, 10);
        path.lineTo(bitmapimg.getWidth(), 20);
        path.lineTo(bitmapimg.getWidth() - 15, 30);
        path.lineTo(bitmapimg.getWidth() - 15, bitmapimg.getHeight());
        path.lineTo(0, bitmapimg.getHeight());
        path.close();
        canvas.drawPath(path, paint);//（DES）

        //两层绘制交集。显示上层
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmapimg, rect, rect, paint);//（SRC）
        return output;