Android 利用Canvas实现双指拖动和双指缩放图片

背景

  关于Android中使用Canvas绘制图片对于大家来说已经很熟悉了.关于图片的缩放和拖动,一般使用到的技能是:单指拖动图片和双指缩放图片.最近由于工作的要求,需要实现:
  1.双指拖动和在拖动过程中控制图片缩放.
  2.绘制的线条与背景图片实现正片叠底的混合效果.

先上效果图:

原理:

使用的原理:
  1.我采用的是自定义View的方式来控制图片的缩放,坐标系起始点(0,0)在整个自定义View的左上角;
  2.使用Canvas.scale(float sx, float sy)来实现画布的缩放进而实画布上现图片的缩放;
  3.以两个手指触点的中心点作为整张图片缩放的中心点;通过函数canvas.drawBitmap(mSrcBitmap,x,y,mPdxPaint)中的参数x,y的指来实现图片位置的放置;
  4.通过自定义View中onTouchEvent 函数来实现画笔线条的绘制;
  5.把画笔绘制的线条单独绘制在一张空白的Bitmap图片上,底色必须为白色(正片叠底时使用),采用Paint中的混合模式 PorterDuff.Mode.MULTIPLY 来实现当前画笔绘制的Bitmap和背景Bitmap的混合;
  6.由于在绘制过程中采用的两张图片的混合模式,所以在整个图片的移动过程中,整个画面会很卡,用户体验不好.为了提高拖动的效率,提高用户体验,我采用的方式:当双指同时触屏时,把当前背景图和绘制图直接混合成一张图片,在拖动过程中实际拖动的是混合后的一张图片.当拖动结束后,释放这张图片.
  7.为了实现绘制过程中,可以让客户实时的看到绘制的效果,又重新定义了一张图片,这张图片就是指显示正在绘制的这条线,当绘制完成后,触电抬起ACTION_UP时,把这条线绘制到画笔的Bitmap上,在和背景图片实现正片叠底的混合.

主要代码:

MainActivity.java

package com.test.wb.doublemoveview3;

import android.content.Context;
import android.graphics.Bitmap;
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.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.Arrays;
import java.util.concurrent.CopyOnWriteArrayList;

/**
 * Author: aaa
 * Date: 2016/12/5 17:31.
 */
public class DoubleMoveView3 extends View {
    private Context mContext;
    private Bitmap mSrcBitmap;
    private Bitmap mMultiplyBitmap = null;//混合之后的图片,双指缩放移动的时候,单独移动这张混合后图片,提高用户体验
    public boolean mIsMove;//是否双指拖动图片中ing
    private int mBitmapWidth, mBitmapHeight;//图片的长度和高度

    private float mCenterLeft, mCenterTop;//图片居中时左上角的坐标
    private int mCenterHeight, mCenterWidth; // 图片适应屏幕时的大小
    private float mCenterScale;//画布居中时的比例
    private int mViewWidth, mViewHeight;//当前View的长度和宽度

    private float mTransX = 0, mTransY = 0; // 偏移量，图片真实偏移量为　mCentreTranX + mTransX
    private float mScale = 1.0f; // 缩放倍数, 图片真实的缩放倍数为 mPrivateScale * mScale

    private boolean mIsSaveArg = false;//保存参数使用

    private Paint mPaint;
    private Bitmap mGraffitiBitmap; // 用绘制涂鸦的图片
    private Canvas mBitmapCanvas; // 用于绘制涂鸦的画布

    private Bitmap mCurrentBitmap; // 绘制当前线时用到的图片
    private Canvas mCurrentCanvas; // 当前绘制线的画布

    private int[] mWhiteBuffer;//保存白色图片内存，刷新时重新刷新图片
    // 保存涂鸦操作，便于撤销
    private CopyOnWriteArrayList<MyDrawSinglePath> mPathStack = new CopyOnWriteArrayList<MyDrawSinglePath>();
    private CopyOnWriteArrayList<MyDrawSinglePath> pathStackBackup = new CopyOnWriteArrayList<MyDrawSinglePath>();
    private int mTouchMode; // 触摸模式，触点数量
    private float mTouchDownX, mTouchDownY, mLastTouchX, mLastTouchY, mTouchX, mTouchY;
    private MyDrawSinglePath mCurrPath; // 当前手写的路径

    private PorterDuffXfermode mPdXfermode; // 定义PorterDuffXfermode变量
    private Paint mPdXfPaint;// 绘图的混合模式
    private Paint mCurrentPaint;
    private Path mCanvasPath; //仅用于当前Path的绘制

    public DoubleMoveView3(Context context, Bitmap bitmap) {
        super(context);
        mContext = context;
        init(bitmap);
    }

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

    private void init(Bitmap bitmap) {
        mSrcBitmap = bitmap;
        mBitmapWidth = mSrcBitmap.getWidth();
        mBitmapHeight = mSrcBitmap.getHeight();
        mMultiplyBitmap = Bitmap.createBitmap(mBitmapWidth, mBitmapHeight, Bitmap.Config.ARGB_8888);

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(20);
        mGraffitiBitmap = getTransparentBitmap(mSrcBitmap);

        mCurrentPaint = new Paint();
        mCurrentPaint.setStyle(Paint.Style.STROKE);
        mCurrentPaint.setStrokeWidth(50);
        mCurrentPaint.setColor(Color.RED);
        mCurrentPaint.setAlpha(100);
        mCurrentPaint.setAntiAlias(true);
        mCurrentPaint.setStrokeJoin(Paint.Join.ROUND);
        mCurrentPaint.setStrokeCap(Paint.Cap.ROUND);
        mCurrentPaint.setXfermode(null);

        mCanvasPath = new Path();
        mCurrentBitmap = getTransparentBitmap(mSrcBitmap);

        //设置混合模式   （正片叠底）
        mPdXfermode = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);

        mPdXfPaint = new Paint();
        mPdXfPaint.setAntiAlias(true);
        mPdXfPaint.setFilterBitmap(true);

        mIsMove = false;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mViewWidth = w;
        mViewHeight = h;

        float nw = mBitmapWidth * 1f / mViewWidth;
        float nh = mBitmapHeight * 1f / mViewHeight;
        if (nw > nh) {
            mCenterScale = 1 / nw;
            mCenterWidth = mViewWidth;
            mCenterHeight = (int) (mBitmapHeight * mCenterScale);
        } else {
            mCenterScale = 1 / nh;
            mCenterWidth = (int) (mBitmapWidth * mCenterScale);
            mCenterHeight = mViewHeight;
        }

        // 使图片居中
        mCenterLeft = (mViewWidth - mCenterWidth) / 2f;
        mCenterTop = (mViewHeight - mCenterHeight) / 2f;

        initCanvas();
        initCurrentCanvas();

        mIsMove = false;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float scale = mCenterScale * mScale;
        float x = (mCenterLeft + mTransX) / scale;
        float y = (mCenterTop + mTransY) / scale;

        canvas.scale(scale, scale);

        if (!mIsMove) {
            //正片叠底混合模式
            initCurrentCanvas();
            mCurrentCanvas.drawPath(mCanvasPath, mCurrentPaint);

            canvas.drawBitmap(mSrcBitmap, x, y, mPdXfPaint);
            mPdXfPaint.setXfermode(mPdXfermode);
            canvas.drawBitmap(mCurrentBitmap, x, y, mPdXfPaint);
            // 绘制涂鸦图片
            canvas.drawBitmap(mGraffitiBitmap, x, y, mPdXfPaint);
            mPdXfPaint.setXfermode(null);
        } else {
            //只显示原始图片
            canvas.drawBitmap(mMultiplyBitmap, x, y, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {

            case MotionEvent.ACTION_DOWN:
                Log.i("aaa", "ACTION_DOWN");
                mTouchMode = 1;
                penTouchDown(event.getX(), event.getY());
                return true;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                Log.i("aaa", "ACTION_UP");
                mTouchMode = 0;
                mCanvasPath.reset();
                initCanvas();//添上这句防止重复绘制
                draw(mBitmapCanvas, mPathStack); // 保存到图片中
                invalidate();
                return true;
            case MotionEvent.ACTION_MOVE:
                Log.i("aaa", "ACTION_MOVE");
                if (mTouchMode == 1 && !mIsMove) {
                    mLastTouchX = mTouchX;
                    mLastTouchY = mTouchY;
                    mTouchX = event.getX();
                    mTouchY = event.getY();

                    mCurrPath.getPath().quadTo(screenToBitmapX(mLastTouchX), screenToBitmapY(mLastTouchY),
                            screenToBitmapX((mTouchX + mLastTouchX) / 2), screenToBitmapY((mTouchY + mLastTouchY) / 2));

                    mCanvasPath.quadTo(screenToBitmapX(mLastTouchX), screenToBitmapY(mLastTouchY),
                            screenToBitmapX((mTouchX + mLastTouchX) / 2), screenToBitmapY((mTouchY + mLastTouchY) / 2));
                    invalidate();
                }
                return true;
        }
        return true;
    }

    public void setTransScale(float scale, float dx, float dy) {
        mScale = scale;
        mTransX = dx;
        mTransY = dy;
        if (!mIsSaveArg) {
            invalidate();
        }
        mIsSaveArg = false;
    }

    public void saveCurrentScale() {
        mCenterScale = mCenterScale * mScale;

        mCenterLeft = (mCenterLeft + mTransX) / mCenterScale;
        mCenterTop = (mCenterTop + mTransY) / mCenterScale;

        mIsSaveArg = true;

        saveMultiplyBitmap();
    }

    //双指移动的时候,生成混合之后的图片
    private void saveMultiplyBitmap() {
        mIsMove = true;

        Canvas canvas = new Canvas(mMultiplyBitmap);
        canvas.drawBitmap(mSrcBitmap, 0, 0, mPdXfPaint);
        mPdXfPaint.setXfermode(mPdXfermode);
        // 绘制涂鸦图片
        canvas.drawBitmap(mGraffitiBitmap, 0, 0, mPdXfPaint);
        mPdXfPaint.setXfermode(null);
    }

    /**
     * 在画笔的状态下第一个触点按下的情况
     */
    private void penTouchDown(float x, float y) {
        mIsMove = false;
        mTouchDownX = mTouchX = mLastTouchX = x;
        mTouchDownY = mTouchY = mLastTouchY = y;

        // 为了仅点击时也能出现绘图，模拟滑动一个像素点
        mTouchX++;
        mTouchY++;

        mCurrPath = new MyDrawSinglePath(Color.RED, 50, 100, true);
        mCurrPath.getPath().moveTo(screenToBitmapX(mTouchDownX), screenToBitmapY(mTouchDownY));
        mPathStack.add(mCurrPath);

        mCanvasPath.reset();
        mCanvasPath.moveTo(screenToBitmapX(mTouchDownX), screenToBitmapY(mTouchDownY));
        // 为了仅点击时也能出现绘图，必须移动path
        mCanvasPath.quadTo(screenToBitmapX(mLastTouchX), screenToBitmapY(mLastTouchY),
                screenToBitmapX((mTouchX + mLastTouchX) / 2), screenToBitmapY((mTouchY + mLastTouchY) / 2));
    }

    /**
     * 初始化当前画线的绘图
     */
    private void initCurrentCanvas() {
        mCurrentBitmap.setPixels(mWhiteBuffer, 0, mSrcBitmap.getWidth(), 0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight());
        mCurrentCanvas = new Canvas(mCurrentBitmap);
    }

    /**
     * 初始化涂鸦的绘图
     */
    private void initCanvas() {
        mGraffitiBitmap.setPixels(mWhiteBuffer, 0, mSrcBitmap.getWidth(), 0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight());
        mBitmapCanvas = new Canvas(mGraffitiBitmap);
    }

    /**
     * 创建一个图片,透明度为255(不透明), 底色为白色 ,目的是为了使用正片叠底
     *
     * @param sourceImg
     * @return
     */
    public Bitmap getTransparentBitmap(Bitmap sourceImg) {
        mWhiteBuffer = new int[sourceImg.getWidth() * sourceImg.getHeight()];
        Arrays.fill(mWhiteBuffer, 0xFFFFFFFF);
        sourceImg = Bitmap.createBitmap(mWhiteBuffer, sourceImg.getWidth(), sourceImg.getHeight(), Bitmap.Config.ARGB_8888).copy(Bitmap.Config.ARGB_8888, true);
        return sourceImg;
    }

    private void draw(Canvas canvas, CopyOnWriteArrayList<MyDrawSinglePath> pathStack) {
        // 还原堆栈中的记录的操作
        for (MyDrawSinglePath path : pathStack) {
            canvas.drawPath(path.getPath(), path.getMyPen().getPenPaint());
        }
    }

    //双指抬起时
    public void PointertUp() {

        if (!mCanvasPath.isEmpty()) {//单指画线过程中，出现双触点则停止画线
            mCanvasPath.reset();
            if (!mPathStack.isEmpty()) {
                mPathStack.remove(mPathStack.size() - 1);
            }
        }
    }

    /**
     * 将触摸的屏幕坐标转换成实际图片中的坐标
     */
    public float screenToBitmapX(float touchX) {
        return (touchX - mCenterLeft - mTransX) / (mCenterScale * mScale);
    }

    public float screenToBitmapY(float touchY) {
        return (touchY - mCenterTop - mTransY) / (mCenterScale * mScale);
    }
    //通过触点的坐标和实际图片中的坐标,得到当前图片的起始点坐标
    public final float toTransX(float touchX, float graffitiX) {
        return -graffitiX * (mCenterScale * mScale) + touchX - mCenterLeft;
    }

    public final float toTransY(float touchY, float graffitiY) {
        return -graffitiY * (mCenterScale * mScale) + touchY - mCenterTop;
    }
}

自定义View DoubleMoveView3.java

package com.test.wb.doublemoveview3;

import android.content.Context;
import android.graphics.Bitmap;
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.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.Arrays;
import java.util.concurrent.CopyOnWriteArrayList;

/**
 * Author: aaa
 * Date: 2016/12/5 17:31.
 */
public class DoubleMoveView3 extends View {
    private Context mContext;
    private Bitmap mSrcBitmap;
    private Bitmap mMultiplyBitmap = null;//混合之后的图片,双指缩放移动的时候,单独移动这张混合后图片,提高用户体验
    public boolean mIsMove;//是否双指拖动图片中ing
    private int mBitmapWidth, mBitmapHeight;//图片的长度和高度

    private float mCenterLeft, mCenterTop;//图片居中时左上角的坐标
    private int mCenterHeight, mCenterWidth; // 图片适应屏幕时的大小
    private float mCenterScale;//画布居中时的比例
    private int mViewWidth, mViewHeight;//当前View的长度和宽度

    private float mTransX = 0, mTransY = 0; // 偏移量，图片真实偏移量为　mCentreTranX + mTransX
    private float mScale = 1.0f; // 缩放倍数, 图片真实的缩放倍数为 mPrivateScale * mScale

    private boolean mIsSaveArg = false;//保存参数使用

    private Paint mPaint;
    private Bitmap mGraffitiBitmap; // 用绘制涂鸦的图片
    private Canvas mBitmapCanvas; // 用于绘制涂鸦的画布

    private Bitmap mCurrentBitmap; // 绘制当前线时用到的图片
    private Canvas mCurrentCanvas; // 当前绘制线的画布

    private int[] mWhiteBuffer;//保存白色图片内存，刷新时重新刷新图片
    // 保存涂鸦操作，便于撤销
    private CopyOnWriteArrayList<MyDrawSinglePath> mPathStack = new CopyOnWriteArrayList<MyDrawSinglePath>();
    private CopyOnWriteArrayList<MyDrawSinglePath> pathStackBackup = new CopyOnWriteArrayList<MyDrawSinglePath>();
    private int mTouchMode; // 触摸模式，触点数量
    private float mTouchDownX, mTouchDownY, mLastTouchX, mLastTouchY, mTouchX, mTouchY;
    private MyDrawSinglePath mCurrPath; // 当前手写的路径

    private PorterDuffXfermode mPdXfermode; // 定义PorterDuffXfermode变量
    private Paint mPdXfPaint;// 绘图的混合模式
    private Paint mCurrentPaint;
    private Path mCanvasPath; //仅用于当前Path的绘制

    public DoubleMoveView3(Context context, Bitmap bitmap) {
        super(context);
        mContext = context;
        init(bitmap);
    }

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

    private void init(Bitmap bitmap) {
        mSrcBitmap = bitmap;
        mBitmapWidth = mSrcBitmap.getWidth();
        mBitmapHeight = mSrcBitmap.getHeight();
        mMultiplyBitmap = Bitmap.createBitmap(mBitmapWidth, mBitmapHeight, Bitmap.Config.ARGB_8888);

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(20);
        mGraffitiBitmap = getTransparentBitmap(mSrcBitmap);

        mCurrentPaint = new Paint();
        mCurrentPaint.setStyle(Paint.Style.STROKE);
        mCurrentPaint.setStrokeWidth(50);
        mCurrentPaint.setColor(Color.RED);
        mCurrentPaint.setAlpha(100);
        mCurrentPaint.setAntiAlias(true);
        mCurrentPaint.setStrokeJoin(Paint.Join.ROUND);
        mCurrentPaint.setStrokeCap(Paint.Cap.ROUND);
        mCurrentPaint.setXfermode(null);

        mCanvasPath = new Path();
        mCurrentBitmap = getTransparentBitmap(mSrcBitmap);

        //设置混合模式   （正片叠底）
        mPdXfermode = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);

        mPdXfPaint = new Paint();
        mPdXfPaint.setAntiAlias(true);
        mPdXfPaint.setFilterBitmap(true);

        mIsMove = false;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mViewWidth = w;
        mViewHeight = h;

        float nw = mBitmapWidth * 1f / mViewWidth;
        float nh = mBitmapHeight * 1f / mViewHeight;
        if (nw > nh) {
            mCenterScale = 1 / nw;
            mCenterWidth = mViewWidth;
            mCenterHeight = (int) (mBitmapHeight * mCenterScale);
        } else {
            mCenterScale = 1 / nh;
            mCenterWidth = (int) (mBitmapWidth * mCenterScale);
            mCenterHeight = mViewHeight;
        }

        // 使图片居中
        mCenterLeft = (mViewWidth - mCenterWidth) / 2f;
        mCenterTop = (mViewHeight - mCenterHeight) / 2f;

        initCanvas();
        initCurrentCanvas();

        mIsMove = false;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float scale = mCenterScale * mScale;
        float x = (mCenterLeft + mTransX) / scale;
        float y = (mCenterTop + mTransY) / scale;

        canvas.scale(scale, scale);

        if (!mIsMove) {
            //正片叠底混合模式
            initCurrentCanvas();
            mCurrentCanvas.drawPath(mCanvasPath, mCurrentPaint);

            canvas.drawBitmap(mSrcBitmap, x, y, mPdXfPaint);
            mPdXfPaint.setXfermode(mPdXfermode);
            canvas.drawBitmap(mCurrentBitmap, x, y, mPdXfPaint);
            // 绘制涂鸦图片
            canvas.drawBitmap(mGraffitiBitmap, x, y, mPdXfPaint);
            mPdXfPaint.setXfermode(null);
        } else {
            //只显示原始图片
            canvas.drawBitmap(mMultiplyBitmap, x, y, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {

            case MotionEvent.ACTION_DOWN:
                mTouchMode = 1;
                penTouchDown(event.getX(), event.getY());
                return true;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mTouchMode = 0;
                mCanvasPath.reset();
                initCanvas();//添上这句防止重复绘制
                draw(mBitmapCanvas, mPathStack); // 保存到图片中
                invalidate();
                return true;
            case MotionEvent.ACTION_MOVE:
                if (mTouchMode == 1 && !mIsMove) {
                    mLastTouchX = mTouchX;
                    mLastTouchY = mTouchY;
                    mTouchX = event.getX();
                    mTouchY = event.getY();

                    mCurrPath.getPath().quadTo(screenToBitmapX(mLastTouchX), screenToBitmapY(mLastTouchY),
                            screenToBitmapX((mTouchX + mLastTouchX) / 2), screenToBitmapY((mTouchY + mLastTouchY) / 2));

                    mCanvasPath.quadTo(screenToBitmapX(mLastTouchX), screenToBitmapY(mLastTouchY),
                            screenToBitmapX((mTouchX + mLastTouchX) / 2), screenToBitmapY((mTouchY + mLastTouchY) / 2));
                    invalidate();
                }
                return true;
        }
        return true;
    }

    public void setTransScale(float scale, float dx, float dy) {
        mScale = scale;
        mTransX = dx;
        mTransY = dy;
        if (!mIsSaveArg) {
            invalidate();
        }
        mIsSaveArg = false;
    }

    public void saveCurrentScale() {
        mCenterScale = mCenterScale * mScale;

        mCenterLeft = (mCenterLeft + mTransX) / mCenterScale;
        mCenterTop = (mCenterTop + mTransY) / mCenterScale;

        mIsSaveArg = true;

        saveMultiplyBitmap();
    }

    //双指移动的时候,生成混合之后的图片
    private void saveMultiplyBitmap() {
        mIsMove = true;

        Canvas canvas = new Canvas(mMultiplyBitmap);
        canvas.drawBitmap(mSrcBitmap, 0, 0, mPdXfPaint);
        mPdXfPaint.setXfermode(mPdXfermode);
        // 绘制涂鸦图片
        canvas.drawBitmap(mGraffitiBitmap, 0, 0, mPdXfPaint);
        mPdXfPaint.setXfermode(null);
    }

    /**
     * 在画笔的状态下第一个触点按下的情况
     */
    private void penTouchDown(float x, float y) {
        mIsMove = false;
        mTouchDownX = mTouchX = mLastTouchX = x;
        mTouchDownY = mTouchY = mLastTouchY = y;

        // 为了仅点击时也能出现绘图，模拟滑动一个像素点
        mTouchX++;
        mTouchY++;

        mCurrPath = new MyDrawSinglePath(Color.RED, 50, 100, true);
        mCurrPath.getPath().moveTo(screenToBitmapX(mTouchDownX), screenToBitmapY(mTouchDownY));
        mPathStack.add(mCurrPath);

        mCanvasPath.reset();
        mCanvasPath.moveTo(screenToBitmapX(mTouchDownX), screenToBitmapY(mTouchDownY));
        // 为了仅点击时也能出现绘图，必须移动path
        mCanvasPath.quadTo(screenToBitmapX(mLastTouchX), screenToBitmapY(mLastTouchY),
                screenToBitmapX((mTouchX + mLastTouchX) / 2), screenToBitmapY((mTouchY + mLastTouchY) / 2));
    }

    /**
     * 初始化当前画线的绘图
     */
    private void initCurrentCanvas() {
        mCurrentBitmap.setPixels(mWhiteBuffer, 0, mSrcBitmap.getWidth(), 0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight());
        mCurrentCanvas = new Canvas(mCurrentBitmap);
    }

    /**
     * 初始化涂鸦的绘图
     */
    private void initCanvas() {
        mGraffitiBitmap.setPixels(mWhiteBuffer, 0, mSrcBitmap.getWidth(), 0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight());
        mBitmapCanvas = new Canvas(mGraffitiBitmap);
    }

    /**
     * 创建一个图片,透明度为255(不透明), 底色为白色 ,目的是为了使用正片叠底
     *
     * @param sourceImg
     * @return
     */
    public Bitmap getTransparentBitmap(Bitmap sourceImg) {
        mWhiteBuffer = new int[sourceImg.getWidth() * sourceImg.getHeight()];
        Arrays.fill(mWhiteBuffer, 0xFFFFFFFF);
        sourceImg = Bitmap.createBitmap(mWhiteBuffer, sourceImg.getWidth(), sourceImg.getHeight(), Bitmap.Config.ARGB_8888).copy(Bitmap.Config.ARGB_8888, true);
        return sourceImg;
    }

    private void draw(Canvas canvas, CopyOnWriteArrayList<MyDrawSinglePath> pathStack) {
        // 还原堆栈中的记录的操作
        for (MyDrawSinglePath path : pathStack) {
            canvas.drawPath(path.getPath(), path.getMyPen().getPenPaint());
        }
    }

    //双指抬起时
    public void PointertUp() {

        if (!mCanvasPath.isEmpty()) {//单指画线过程中，出现双触点则停止画线
            mCanvasPath.reset();
            if (!mPathStack.isEmpty()) {
                mPathStack.remove(mPathStack.size() - 1);
            }
        }
    }

    /**
     * 将触摸的屏幕坐标转换成实际图片中的坐标
     */
    public float screenToBitmapX(float touchX) {
        return (touchX - mCenterLeft - mTransX) / (mCenterScale * mScale);
    }

    public float screenToBitmapY(float touchY) {
        return (touchY - mCenterTop - mTransY) / (mCenterScale * mScale);
    }

    //通过触点的坐标和实际图片中的坐标,得到当前图片的起始点坐标
    public final float toTransX(float touchX, float graffitiX) {
        return -graffitiX * (mCenterScale * mScale) + touchX - mCenterLeft;
    }

    public final float toTransY(float touchY, float graffitiY) {
        return -graffitiY * (mCenterScale * mScale) + touchY - mCenterTop;
    }
}

使用到的另外的两个类:
MyPen.java

package com.test.wb.doublemoveview3;

import android.graphics.Color;
import android.graphics.Paint;

/**
 * Author: aaa
 * Date: 2016/10/13 09:54.
 * 涂鸦时所用的画笔
 */
public class MyPen {
    boolean mBooleanPen;//是否是画笔 true - 画笔  false - 橡皮差
    private int mPenColor;
    private int mPenSize;
    private int mPenAlpha;//0 - 100
    private Paint mPaint, mEraserPaint;

    public MyPen(int penColor, int penSize, int penAlpha, boolean bPen) {
        mPenAlpha = penAlpha;
        mPenColor = penColor;
        mPenSize = penSize;
        mBooleanPen = bPen;

        if (mBooleanPen){//画笔
            mPaint = new Paint(Paint.FILTER_BITMAP_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(mPenSize);
            mPaint.setColor(mPenColor);
            mPaint.setAlpha(mPenAlpha);

            mPaint.setAntiAlias(true);
            mPaint.setStrokeJoin(Paint.Join.ROUND);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
        }else {//橡皮擦
            mEraserPaint = new Paint();
            mEraserPaint.setStyle(Paint.Style.STROKE);
            mEraserPaint.setAlpha(255);
            mEraserPaint.setColor(Color.WHITE);
            mEraserPaint.setStrokeWidth(mPenSize);
            mEraserPaint.setAntiAlias(true);
            mEraserPaint.setStrokeJoin(Paint.Join.ROUND);
            mEraserPaint.setStrokeCap(Paint.Cap.ROUND);

        }
    }

    public int getPenAlpha() {
        return mPenAlpha;
    }

    public void setPenAlpha(int penAlpha) {
        mPenAlpha = penAlpha;
    }

    public int getPenColor() {
        return mPenColor;
    }

    public void setPenColor(int penColor) {
        mPenColor = penColor;
    }

    public int getPenSize() {
        return mPenSize;
    }

    public void setPenSize(int penSize) {
        mPenSize = penSize;
    }

    public boolean isBooleanPen() {
        return mBooleanPen;
    }

    public void setBooleanPen(boolean booleanBen) {
        mBooleanPen = booleanBen;
    }

    public Paint getPenPaint(){
        if (mBooleanPen) {
            return mPaint;
        }else{
            return mEraserPaint;
        }
    }
}

MyDrawSinglePath.java

package com.test.wb.doublemoveview3;

import android.graphics.Path;

/**
 * Author: aaa
 * Date: 2016/10/15 11:24.
 * 当前涂鸦的路径
 */
public class MyDrawSinglePath {
    private MyPen mMyPen;
    private Path mPath;

    public MyDrawSinglePath(int color, int size, int alpha, boolean b){
        mMyPen = new MyPen(color, size, alpha, b);
        mPath = new Path();
    }

    public MyPen getMyPen() {
        return mMyPen;
    }

    public Path getPath() {
        return mPath;
    }
}

下载链接：Demo下载