《Android群英传》图像处理之画笔特效处理--PorterDuffXfermode篇

不管是在我们的世界里，还是在Android的世界里，要想向神笔马良一样画出各种精彩绝伦的画，就必须得有一个前提–要有一支神奇的画笔。下面我们就来看看画笔的一些高级的一些高级属性，帮助我们实现更丰富的绘图效果。

PorterDuffXfermode

在学习这个东西之前，先来看看一张非常经典的图，出自 API Demo.

图中列举了16种PorterDuffXfermode,有点像数学中集合的交集、并集这样的概念，相信配合图例应该很好理解，它控制的是两个图象之间的混合显示模式。

• 这里要注意的是，PorterDuffXfermode设置的是两个图层交集区域的显示方式，dst 是先画的图形，而src 是后画的图形。当然，这些模式也不是经常使用的，用的最多的是，使用一张图片作为另一张图片的遮罩层，通过控制遮罩层的图形，来控制下面被遮罩图形的显示效果。其中最常用的就是通过DST_IN、SRC_IN 模式来实现将一个矩形图片变成圆角图片或者圆形图片的效果。

下面让我们来将一张图片处理成圆角图片，先上图：

我们先用一个普通画笔画一个圆角矩形遮罩层，再用带PorterDuffXfermode的画笔将图像画在遮罩层上，这样就可以通过上面所说的效果来混合两个图像了，完整的代码如下所示：

package com.ajun.canvas.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.View;

import com.ajun.canvas.R;


public class CircleCornerImageView extends View {
    private Paint mPaint;
    private Bitmap newBitmap;
    private Bitmap srcBitmap;

    public CircleCornerImageView(Context context) {
        super(context);
        init();
    }

    public CircleCornerImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleCornerImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        srcBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);
        //创建一个和原图大小相同的图片
        newBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(newBitmap);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);

        canvas.drawRoundRect(0,0, srcBitmap.getWidth(), srcBitmap.getHeight(),
                30,30,mPaint);

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        canvas.drawBitmap(srcBitmap,0,0,mPaint);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(newBitmap,0,0,null);
    }
}

---

下面我们再来看一个稍微复杂点的刮刮卡效果。我们都知道，刮刮卡一般有两个图层，即上面的用来刮掉的图层和下面隐藏的图层。在初始状态下，上面的图层会将下面整个图层覆盖，当你用手刮上面的图层的时候，下面的图层会慢慢显示出来，这也类似很多画图工具中的橡皮擦效果。这个效果可以使用PorterDuffXfermode来实现。

首先开始做一些初始化工作，准备好图片，设置好Paint的一些属性，代码如下所示：

    mPaint = new Paint();
    //设置Paint的颜色为透明
    mPaint.setAlpha(0);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);//圆状
    mPaint.setStrokeWidth(50f);
    mPaint.setStrokeCap(Paint.Cap.ROUND);

    //初始化 Path
    mPath = new Path();

    mSrcBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);

    //创建一张和原图一样大小的图片
    mNewBitmap = Bitmap.createBitmap(mSrcBitmap.getWidth(), mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);

    //设置上层图片颜色为灰色
    mCanvas = new Canvas(mNewBitmap);
    mCanvas.drawColor(Color.GRAY);

在上面的代码中，给 Paint 设置了一些属性，让它的笔触和连接外能更加圆滑一些，即Paint.Join.ROUND 和 Paint.Cap.ROUND属性。

接下来看一下如何获取用户手指滑动所产生的路径，代码如下所示。使用Path保存用户手指划过的路径。

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //清除Path设置的所有属性
            mPath.reset();
            //坐标的起始位置
            mPath.moveTo(event.getX(), event.getY());
            break;
        case MotionEvent.ACTION_MOVE:
            //开始划路径
            mPath.lineTo(event.getX(), event.getY());
            break;
    }

最后，只需要使用 DST_IN 模式将路径绘制到前面覆盖的图层上面即可。不过，还需要做关键的一步，那就是将画笔的透明度设置为0，这样才能显示出擦出后的效果。完整代码如下：

    package com.ajun.canvas.view;

    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.graphics.PorterDuff;
    import android.graphics.PorterDuffXfermode;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    import android.view.View;

    import com.ajun.canvas.R;

    public class ScratchCardView extends View {
        private Bitmap mSrcBitmap, mNewBitmap;
        private Paint mPaint;
        private Path mPath;
        private Canvas mCanvas;

        public ScratchCardView(Context context) {
            super(context);
            init();
        }

        public ScratchCardView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        public ScratchCardView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }

        private void init() {
            mPaint = new Paint();
            //设置Paint的颜色为透明
            mPaint.setAlpha(0);
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeJoin(Paint.Join.ROUND);//圆状
            mPaint.setStrokeWidth(50f);
            mPaint.setStrokeCap(Paint.Cap.ROUND);

            //初始化 Path
            mPath = new Path();

            mSrcBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);

            mNewBitmap = Bitmap.createBitmap(mSrcBitmap.getWidth(), mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);

            mCanvas = new Canvas(mNewBitmap);
            mCanvas.drawColor(Color.GRAY);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawBitmap(mSrcBitmap, 0, 0, null);
            canvas.drawBitmap(mNewBitmap, 0, 0, null);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //清除Path设置的所有属性
                    mPath.reset();
                    //坐标的起始位置
                    mPath.moveTo(event.getX(), event.getY());
                    break;
                case MotionEvent.ACTION_MOVE:
                    //开始划路径，（笔是透明的）
                    mPath.lineTo(event.getX(), event.getY());
                    break;
            }
            mCanvas.drawPath(mPath, mPaint);//将划过的路径设置为透明
            invalidate();//通知系统重绘
            return true;
        }
    }

程序运行效果看下面gif图，当用户用手指滑动时，就会擦出上面的图层，形成刮刮卡的效果。

Tips：在使用PorterDuffXfermode时还有一点需要注意，那就是最好在绘图时，将硬件加速关闭，因为有些模式并不支持硬件加速。