自己定义控件-画板，橡皮擦，刮刮乐

画板效果图

页面代码

public class ActionerView extends View {
    private Paint mPaint = new Paint();
    private Path mPath = new Path();//手指滑动路径
    private Canvas mCanvas;//缓存画布
    private Bitmap mBitmap;//缓存图片
    private float pointX, pointY;//触点坐标


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


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        initPaint();//初始化画笔

        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        mCanvas.drawPath(mPath, mPaint);
        canvas.drawBitmap(mBitmap, 0, 0, null);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        pointX = event.getX();
        pointY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(pointX, pointY);//将路径移动到点(pointX, pointY)，不绘制
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(pointX, pointY);//绘制一条从上个触点到点(pointX, pointY)的线条
                break;
        }
        invalidate();//又一次画图
        return true;
    }

    private void initPaint() {//初始化画笔
        mPaint.setDither(true);//图片抖动处理
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(20);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);//设置笔头为圆角
        mPaint.setStrokeJoin(Paint.Join.ROUND);
    }
}

橡皮擦效果图

页面代码

public class ActionView extends View {
    private Paint mPaint = new Paint();
    private Path mPath = new Path();//手指滑动路径
    private Canvas mCanvas;//缓存画布
    private Bitmap mBitmap;//缓存图片
    private float pointX, pointY;//触点坐标

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        initPaint();//初始化画笔

        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); //初始化Bitmap
        mCanvas = new Canvas(mBitmap);
        mCanvas.drawColor(Color.parseColor("#c0c0c0"));//设置画板背景

    }

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

        Bitmap mBackBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
        canvas.drawBitmap(mBackBitmap, 0, 0, null);

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        mCanvas.drawPath(mPath, mPaint);

        canvas.drawBitmap(mBitmap, 0, 0, null);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        pointX = event.getX();
        pointY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(pointX, pointY);//将路径移动到点(pointX, pointY)。不绘制
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(pointX, pointY);//绘制一条从上个触点到点(pointX, pointY)的线条
                break;
        }
        invalidate();//又一次画图
        return true;
    }

    private void initPaint() {//初始化画笔
        mPaint.setDither(true);//设定是否使用图像抖动处理。会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
        mPaint.setAntiAlias(true);//设置抗锯齿
        mPaint.setStrokeWidth(30);
        mPaint.setColor(Color.RED);//设置画笔颜色
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);//圆角
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST));
    }

}

刮刮乐效果图

页面代码

public class ActionersView extends View {
    private Paint mPaint = new Paint();
    private Paint txtPaint = new Paint();//文字画笔
    private Path mPath = new Path();//手指滑动路径
    private Canvas mCanvas;//缓存画布
    private Bitmap mBitmap;//缓存图片
    private float pointX, pointY;//触点坐标
    private String txtStr = "￥5,000,000";

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


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); // 初始化bitmap
        mCanvas = new Canvas(mBitmap);

        initPaint();//初始化画笔
//        mCanvas.drawRoundRect(new RectF(100, 500, width - 100, height - 500), 30, 30, mPaint);//效果一：背景为灰色的矩形
        mCanvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.bg1), null, new RectF(100, 500, width - 100, height - 500), null);//效果二：背景为图片

    }

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

        txtPaint.setTextSize(60);
        canvas.drawText(txtStr, getWidth() / 2 - 150, getHeight() / 2, txtPaint);

        mCanvas.drawPath(mPath, mPaint);
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        pointX = event.getX();
        pointY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(pointX, pointY);//将路径移动到点(pointX, pointY)，不绘制
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(pointX, pointY);//绘制一条从上个触点到点(pointX, pointY)的线条
                break;
        }
        invalidate();//又一次画图
        return true;
    }


    private void initPaint() {//初始化画笔
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(30);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setColor(Color.parseColor("#c0c0c0"));
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    }

}

附：Xfermode的效果

參考链接：Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么