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 方法*/@Overrideprotected 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 上绘制 cacheBitmapcacheCanvas.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();//绘制cacheBitmapcanvas.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()方法更新视图。

@Overridepublic 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对象，并解析菜单资源文件。

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

<2>重写onOptionsItemSelected方法

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

@Overridepublic 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;//设置画笔的宽度为1case R.id.width_1:drawView.paint.setStrokeWidth(1);break;//设置画笔的宽度为5case R.id.width_2:drawView.paint.setStrokeWidth(5);break;//设置画笔的宽度为10case 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;}

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

真是越来越有意思了呢！