Android 之简易涂鸦板

没有废话，简单粗暴。

1.创建一个自定义 view

创建一个 DrawView，继承自 android.view.View 类。在这个类中，先定义所需的属性，再创建一个构造方法。

public class DrawView extends View {    private int view_width = 0;//画板宽度    private int view_height = 0;//画板高度    private float preX;//起始点的 x 坐标    private float preY;//起始点的 y 坐标    private Path path;//路径    public Paint paint = null;//画笔    Bitmap cacheBitmap = null;//定义一个内存中的图片，该图片作为缓冲区    Canvas cacheCanvas = null;//定义 cacheBitmap 上的 Canvas 对象    /*构造方法*/    public DrawView(Context context, AttributeSet set){        super(context,set);    }    /*重写 onDraw 方法*/    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);    }}

2.修改 xml 文件

修改 activity_main.xml 文件，并将自定义的 DrawView 添加到布局管理器中。

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <com.example.test.DrawView        android:id="@+id/drawView1"        android:layout_width="match_parent"        android:layout_height="match_parent" /></FrameLayout>

3.DrawView 的构造方法

在 DrawView 的构造方法中，首先获取屏幕的宽度和高度，并创建一个与该 view 相同大小的缓存区，然后创建一个新的画面，并实例化一个路径，再讲内存中的位图绘制到 cacheCanvas 中，最后实例化一个画笔，并设置画笔的相关属性。

//获取屏幕宽度        view_width = context.getResources().getDisplayMetrics().widthPixels;        //获取屏幕高度        view_height = context.getResources().getDisplayMetrics().heightPixels;        cacheBitmap = Bitmap.createBitmap(view_width,view_height, Bitmap.Config.ARGB_8888);        //创建一个新的画布        cacheCanvas = new Canvas();        path = new Path();        //在 cacheCanvas 上绘制 cacheBitmap        cacheCanvas.setBitmap(cacheBitmap);        paint = new Paint(Paint.DITHER_FLAG);        //设置默认的画笔颜色        paint.setColor(Color.RED);        //设置填充方式为描边        paint.setStyle(Paint.Style.STROKE);        //设置笔刷的图形样式        paint.setStrokeJoin(Paint.Join.ROUND);        //设置画笔转弯处的连接风格        paint.setStrokeCap(Paint.Cap.ROUND);        //设置默认的画笔的宽度        paint.setStrokeWidth(1);        //使用抗锯齿功能        paint.setAntiAlias(true);        //使用抖动效果        paint.setDither(true);

4.重写 onDraw 方法

在 DrawView 的 onDraw 方法中，设置背景颜色，绘制 cacheBitmap，绘制路径以及保存当前的状态到栈中，并调用 restore()方法恢复所保存的状态。

//设置背景颜色        canvas.drawColor(0xFFFFFFFF);        //采用默认设置创建一个画笔        Paint bmpPaint = new Paint();        //绘制cacheBitmap        canvas.drawBitmap(cacheBitmap,0,0,bmpPaint);        //绘制路径        canvas.drawPath(path,paint);        //保存 canvas 状态        canvas.save(Canvas.ALL_SAVE_FLAG);        //恢复 canvas 之前的保存状态，防止保存后对 canvas 执行的操作最后续的绘制有影响        canvas.restore();

5.重写 onTouchEvent 方法

在 DrawView 类中，重写onTouchEvent() 方法，为该视图添加触摸时间监听器，在该方法中，首先获取触摸时间发生的位置，然后应用 switch 对时间的不同状态添加响应代码，最后调用invalidate()方法更新视图。

@Override    public boolean onTouchEvent(MotionEvent event) {        //获取触摸时间发生的位置        float x = event.getX();        float y = event.getY();        switch (event.getAction()){            case MotionEvent.ACTION_DOWN:                //将绘图的起始点移到（x，y）的坐标位置                path.moveTo(x,y);                preX = x;                preY = y;                break;            case MotionEvent.ACTION_MOVE:                float dx = Math.abs(x-preX);                float dy = Math.abs(y-preY);                //判断是否在允许的范围内                if (dx>=5 || dy >= 5){                    path.quadTo(preX,preY,(x+preX)/2,(y+preY)/2);                    preX = x;                    preY = y;                }                break;            case MotionEvent.ACTION_UP:                //绘制路径                cacheCanvas.drawPath(path,paint);                path.reset();                break;        }        invalidate();        //返回 true，表示处理方法已经处理该事件        return true;    }

6.编写 clear() 方法

写一个 clear() 方法，用来实现橡皮擦功能。

 public void clear() {        //设置图形重叠时的处理方式        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));        //设置橡皮擦的宽度        paint.setStrokeWidth(50);    }

7.编写 save() 方法

写一个方法，用来保存当前的绘图。

public void save() {        try {            saveBitmap("myPicture");        }catch (IOException e){            e.printStackTrace();        }    }private void saveBitmap(String filename) throws IOException {        //创建文件对象        File file = new File("/sdcard/pictures/"+filename+".png");        //创建一个新文件        file.createNewFile();        //创建一个文件输出流对象        FileOutputStream out = new FileOutputStream(file);        //将绘图内容压缩成 PNG 格式输出到输出流对象中        cacheBitmap.compress(Bitmap.CompressFormat.PNG,100,out);        //将缓冲区的数据全部写出到输出流中        out.flush();        //关闭文件输出流对象        out.close();    }

8.设置权限

 <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

9.创建 menu 资源文件

在 res 目录下，创建menu 文件夹，在 menu 文件夹下，创建 toolsmenu.xml 资源文件。

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:title="@string/color">        <menu >            <!-- 定义一组单选菜单项 -->            <group android:checkableBehavior="single" >                <!-- 定义子菜单 -->                <item android:id="@+id/red" android:title="@string/color_red"/>                <item android:id="@+id/green" android:title="@string/color_green"/>                <item android:id="@+id/blue" android:title="@string/color_blue"/>            </group>        </menu>    </item>    <item android:title="@string/width">        <menu >            <!-- 定义子菜单 -->            <group>                <item android:id="@+id/width_1" android:title="@string/width_1"/>                <item android:id="@+id/width_2" android:title="@string/width_2"/>                <item android:id="@+id/width_3" android:title="@string/width_3"/>            </group>        </menu>    </item>    <item android:id="@+id/clear" android:title="@string/clear"/>    <item android:id="@+id/save" android:title="@string/save"/></menu>

10.添加选项菜单

<1>重写onCreateOptionsMenu方法

在 activity 文件中，重写onCreateOptionsMenu()方法，在该方法中，实例化一个MenuInflater对象，并解析菜单资源文件。

@Override    public boolean onCreateOptionsMenu(Menu menu) {        MenuInflater menuInflater = new MenuInflater(this);        menuInflater.inflate(R.menu.toolsmenu,menu);        return super.onCreateOptionsMenu(menu);    }

<2>重写onOptionsItemSelected方法

重写onOptionsItemSelected() 方法，分别对各个菜单项被选择时做出相应的处理。

@Override    public boolean onOptionsItemSelected(MenuItem item) {        //获取自定义视图        DrawView drawView = (DrawView)findViewById(R.id.drawView1);        //取消擦除效果        drawView.paint.setXfermode(null);        //初始化画笔的宽度        drawView.paint.setStrokeWidth(1);        switch (item.getItemId()){            //设置画笔的颜色为红色            case R.id.red:                drawView.paint.setColor(Color.RED);                item.setChecked(true);                break;            //设置画笔的颜色为绿色            case R.id.green:                drawView.paint.setColor(Color.GREEN);                item.setChecked(true);                break;            //设置画笔的颜色为蓝色            case R.id.blue:                drawView.paint.setColor(Color.BLUE);                item.setChecked(true);                break;            //设置画笔的宽度为1            case R.id.width_1:                drawView.paint.setStrokeWidth(1);                break;            //设置画笔的宽度为5            case R.id.width_2:                drawView.paint.setStrokeWidth(5);                break;            //设置画笔的宽度为10            case R.id.width_3:                drawView.paint.setStrokeWidth(10);                break;            //擦除绘画            case R.id.clear:                drawView.clear();                break;            //保存绘画            case R.id.save:                drawView.save();                break;        }        return true;    }

运行，就会得到一个简易的涂鸦板，可以改变画笔颜色，画笔宽度，擦除，保存等。

真是越来越有意思了呢！