【Android】畫板Demo

本文僅是個人學習筆記，不喜勿噴！更多更好的開源框架可以移步Github！

通過自定義View結合Touch事件，實現一個簡單的畫板功能！

效果圖

實現思路

1. 搭建基本UI界面
2. 實現根據手指觸摸劃線
3. 使用集合存儲每次觸摸產生的path對象，Dwon時加入，Move時使用
4. 處理底部工具條的點擊事件
5. 通過自定義path類的子類，新增屬性linewith+color
6. 關聯底部工具條點擊事件，並設置初始值
7. 實現頂部工具條，清屏和回退功能操作集合並衝繪即可，橡皮功能其實就是修改畫筆顏色，保存就是存儲成文件或保存到相冊。
8. 查缺補漏，優化代碼。

關鍵代碼-自定義view畫板

private void init() {
        //初始化畫筆
        paint = new Paint();
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //循環繪製所有路徑
        for (DrawPath path : paths) {
            //修改畫筆的顏色和線寬
            paint.setColor(path.getColor());
            paint.setStrokeWidth(path.getLineWidth());
            canvas.drawPath(path, paint);
        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //每次按下產生一個新的路徑
                DrawPath path = new DrawPath();
                path.setColor(color);
                path.setLineWidth(lineWidth);
                path.moveTo(event.getX(), event.getY());
                paths.add(path);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                //手指移動時，使用集合中最後一個路徑添加線
                if (paths.size() > 0) {
                    paths.get(paths.size() - 1).lineTo(event.getX(), event.getY());
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }

關鍵代碼-自定義path

import android.graphics.Path;

/**
 * 其實就加了兩個屬性而已
 * Created by Yhyu on 2017/2/21.
 */

public class DrawPath extends Path {
    private float lineWidth;
    private int color;

    public float getLineWidth() {
        return lineWidth;
    }

    public void setLineWidth(float lineWidth) {
        this.lineWidth = lineWidth;
    }

    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }
}

結束語：實現方式千千萬萬，不要拘泥於某一種，既能實現功能，又能學到東西纔是真的。