【Android】画板Demo_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;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

关键代码-自定义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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

结束语：实现方式千千万万，不要拘泥于某一种，既能实现功能，又能学到东西才是真的。