安卓实现涂抹马赛克效果

近期需要实现一个照片编辑功能--涂抹马赛克，其中遇到一点问题，做个demo总结一下。实现功能过程中遇到的问题主要有：1、涂抹后的路径颜色是黑色，即使paint设置了透明色；2、涂抹时坐标偏移。原理很简单，一看代码就明白了，所以只做简单解释，借鉴了《安卓群英传》的思想。
1、效果实现：背景画处理过的（马赛克）图片，前景画原图，用前景图重新创建一个canvas，涂抹时，在该canvas上drawPath即可。
2、遇到的问题及解决思路：
（1）涂抹后背景黑色的问题
起初用的方法是：

        Bitmap fgBitmap = ImageResizer.decodeSampledBitmapFromFile(bitmapPath, w, h);
        mGPUImage.setImage(fgBitmap); 
        mGPUImage.setFilter(mGPUImagePixelationFilter);
        bgBitmap = mGPUImage.getBitmapWithFilterApplied();
        ……
 //     fgBitmap1 = Bitmap.createBitmap(fgBitmap.getWidth(), fgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(fgBitmap);
//        mCanvas.drawColor(Color.GRAY);
        mCanvas.drawBitmap(fgBitmap,0,0, null);

这样处理后，涂抹时路径完全是黑色的，达不到效果，处理后代码：

Bitmap fgBitmap = ImageResizer.decodeSampledBitmapFromFile(bitmapPath, w, h);
        mGPUImage.setImage(fgBitmap); 
        mGPUImage.setFilter(mGPUImagePixelationFilter);
        bgBitmap = mGPUImage.getBitmapWithFilterApplied();
        ……
        fgBitmap1 = Bitmap.createBitmap(fgBitmap.getWidth(), fgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(fgBitmap1);
//        mCanvas.drawColor(Color.GRAY);
        mCanvas.drawBitmap(fgBitmap,0,0, null);

其中fgBitmap1 是通过fgBitmap重新创建的一个空的bitmap，再将原图画上去，这样以来涂抹的时候就不会出现黑色背景了，猜测可能与图片透明通道有关。
（2）涂抹坐标偏移问题
引出这个问题是由于添加view的时候无法设置居中，后来检查发现是由于在onDraw中绘制起点坐标一直是（0,0）导致的，修改起始坐标后可以正常居中，但是引入一个问题，即涂抹的时候坐标偏移了，偏移量正好是起始坐标的偏移量，这个问题很容易解决，绘制path的时候减去偏移量就可以了，但是主要还是需要对新创建的canvas有一定理解。通过new Canvas(Bitmap bitmap)创建canvas后，该bitmap便和canvas关联，对该bitmap所做的更改也会反映到canvas上面，canvas的大小也与其中的bitmap一致，所以canvas的(0,0)和承载它的view的(0,0)不一定会重合，反映到代码中：

 switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.reset();
                mPath.moveTo(event.getX() - left, event.getY() - top);
                Log.e(TAG, "onTouchEvent: " + event.getX() + "----" + event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX() - left, event.getY() - top);
                break;
        }
        mCanvas.drawPath(mPath, mPaint);
        invalidate();

就是event.getX()和event.getY()是相对于view的坐标，而
mCanvas.drawPath(mPath, mPaint)是相对于canvas的坐标，所以会偏移。以下是主要逻辑：

public class MosaicView extends View {
    private Bitmap bgBitmap;
    private Paint mPaint;
    private Canvas mCanvas;
    private Path mPath;
    private int strokeWidth = 100;
    private String bitmapPath;
    private GPUImage mGPUImage;
    private GPUImagePixelationFilter mGPUImagePixelationFilter;

    public int getStrokeWidth() {
        return strokeWidth;
    }

    public void setStrokeWidth(int strokeWidth) {
        this.strokeWidth = strokeWidth;
    }

    public String getBitmapPath() {
        return bitmapPath;
    }

    public void setBitmapPath(String bitmapPath) {
        this.bitmapPath = bitmapPath;
    }

    public MosaicView(Context context, String imagePath) {
        this(context);
        this.bitmapPath = imagePath;
    }

    public MosaicView(Context context) {
        super(context);
        init(context);

    }

    public MosaicView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MosaicView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init(context);
    }

    private void init(Context context) {
        mGPUImage = new GPUImage(context);
        mGPUImagePixelationFilter = new GPUImagePixelationFilter();
        mGPUImagePixelationFilter.setPixel(10);//马赛克滤镜.
        mPaint = new Paint();
        mPaint.setAlpha(0);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(strokeWidth);
        mPath = new Path();

    }

    Bitmap fgBitmap1;

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Bitmap fgBitmap = ImageResizer.decodeSampledBitmapFromFile(bitmapPath, w, h);
        mGPUImage.setImage(fgBitmap); // this loads image on the current thread, should be run in a thread
        mGPUImage.setFilter(mGPUImagePixelationFilter);
        bgBitmap = mGPUImage.getBitmapWithFilterApplied();
        int w1 = w;
        int h1 = h;
        int photoWidth = fgBitmap.getWidth();
        int photoHeight = fgBitmap.getHeight();
        left = (float)(w1 - photoWidth)/2;
        top = (float) (h1 - photoHeight)/2;

        fgBitmap1 = Bitmap.createBitmap(fgBitmap.getWidth(), fgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(fgBitmap1);
//        mCanvas.drawColor(Color.GRAY);
        mCanvas.drawBitmap(fgBitmap,0,0, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.reset();
                mPath.moveTo(event.getX() - left, event.getY() - top);
                Log.e(TAG, "onTouchEvent: " + event.getX() + "----" + event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX() - left, event.getY() - top);
                break;
        }
        mCanvas.drawPath(mPath, mPaint);//此处是在mCanvas上画，所以在down和move中必须对坐标修正
        invalidate();
        return true;
    }

    private float left;
    private float top;
    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        mPaint.setStrokeWidth(strokeWidth);

        canvas.drawBitmap(bgBitmap, left, top, null);
        canvas.drawBitmap(fgBitmap1, left, top, null);
    }
}