Android 繪製手勢路線製作圖畫板並把View保存爲圖片

先看看效果圖

一個簡單的圖畫板 當然核心就是自定義的畫板控件

package com.example.test.myapplication;

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.os.Environment;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;

/**
 * Created by Administrator on 2017/3/10 0010.
 */

public class DrawView extends View {

    Paint paint;

    float startX = 0;
    float startY = 0;

    /**
     * 用來保存繪製的路徑
     */
    ArrayList<PathModel> paths;

    private int color;
    private int width = 4;

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化畫筆
        color = getResources().getColor(R.color.Black);
        paint = new Paint();
        paint.setStrokeWidth(width);
        paint.setAntiAlias(true);
        paint.setColor(color);
        paint.setStyle(Paint.Style.STROKE);
        paths = new ArrayList<>();
    }

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

        /**
         * 循環繪製集合裏面的路徑
         */
        for (int i = 0; i < paths.size(); i++) {
            PathModel p = paths.get(i);
            //每次繪製路徑都需要設置畫筆的寬度，顏色
            paint.setStrokeWidth(p.getWidth());
            paint.setColor(p.getColor());
            canvas.drawPath(p.getPath(), paint);
        }

    }

    Path path;

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //當手指按下的時候開始記錄繪製路徑
                path = new Path();
                PathModel p = new PathModel();
                p.setPath(path);//保存當前路徑
                p.setColor(paint.getColor());//保存路徑的顏色
                p.setWidth((int) paint.getStrokeWidth()); //保存路徑的大小
                paths.add(p);

                startX = event.getX();
                startY = event.getY();
                path.moveTo(startX, startY);
                break;
            case MotionEvent.ACTION_MOVE:
                path.lineTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_UP:

                break;
        }
        //刷新繪製畫布
        invalidate();

        return true;
    }


    /**
     * 撤回
     */
    public void goBack() {
        //移除集合中最後一條路徑 也就是剛纔畫的一條
        if (paths.size() > 0) {
            paths.remove(paths.size() - 1);
            invalidate();
        }
    }

    /**
     * 清空畫布
     */
    public void clear() {
        //清空集合中所有路徑
        paths.clear();
        invalidate();
    }

    /**
     * 設置畫筆顏色
     *
     * @param color
     */
    public void setPaintColor(int color) {
        paint.setColor(color);
//        this.color = color;
    }

    /**
     * 設置畫筆寬度
     *
     * @param width
     */
    public void setPaintWidth(int width) {
        paint.setStrokeWidth(width);
//        this.width = width;
    }


    public void viewSaveToImage() {
        this.setDrawingCacheEnabled(true);
        this.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
        this.setDrawingCacheBackgroundColor(Color.WHITE);
        // 把一個View轉換成圖片
        Bitmap bitmap = loadBitmapFromView(this);

        FileOutputStream fos;
        try {
            // 手機根目錄
            File sdRoot = Environment.getExternalStorageDirectory();
            File file = new File(sdRoot, "/test.PNG");
            if(!file.exists()) {
                file.createNewFile();
            }
            fos = new FileOutputStream(file);

            bitmap.compress(Bitmap.CompressFormat.PNG, 90, fos);

            fos.flush();
            fos.close();

        } catch (Exception e) {
            e.printStackTrace();
        }

        this.destroyDrawingCache();
    }

    private Bitmap loadBitmapFromView(View v) {
        int w = v.getWidth();
        int h = v.getHeight();

        Bitmap bmp = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bmp);

        c.drawColor(Color.WHITE);
        /** 如果不設置canvas畫布爲白色，則生成透明 */

        v.layout(0, 0, w, h);
        v.draw(c);

        return bmp;
    }

}

解釋一下，定義一個集合用來保存圖畫筆數，然後通過重寫onTouchEvent 監聽手勢滑動，每滑動一次刷新畫布重新繪製保存在集合中的線條。

撤回也只是移除集合中最後一條圖畫。

基本上所有的說明都在代碼裏面了，代碼也不復雜。

最後附上demo