今天给大家带来一个特别有意思的自定义view---涂鸦，先看看效果

效果看了，挺好玩吧，其实就是利用万能的Path来画路径，颜色，画笔大小，就是一些设置，废话不多说，直接上真家伙

触摸事件处理

这里的触摸事件主要有按下(MotionEvent.ACTION_DOWN)、移动(MotionEvent.ACTION_MOVE)、抬起(MotionEvent.ACTION_UP),需要对其分别做相应的处理

触摸事件处理方法

@Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:// 每次down下去重新new一个PathmPath = new Path();//每一次记录的路径对象是不一样的dp = new DrawPath();dp.path = mPath;dp.paint = mPaint;touch_start(x, y);invalidate();break;case MotionEvent.ACTION_MOVE:touch_move(x, y);invalidate();break;case MotionEvent.ACTION_UP:touch_up();invalidate();break;}return true;}复制代码

按下(MotionEvent.ACTION_DOWN)后执行的touch_start(x, y);

    private void touch_start(float x, float y) {mPath.moveTo(x, y);mX = x;mY = y;}复制代码

移动(MotionEvent.ACTION_MOVE)后执行的touch_move(x, y);

     private void touch_move(float x, float y) {float dx = Math.abs(x - mX);float dy = Math.abs(mY - y);if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {// 从x1,y1到x2,y2画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也可以)mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);//mPath.lineTo(mX,mY);mX = x;mY = y;}}复制代码

抬起(MotionEvent.ACTION_UP)后执行的touch_up();

    private void touch_up() {mPath.lineTo(mX, mY);mCanvas.drawPath(mPath, mPaint);//将一条完整的路径保存下来(相当于入栈操作)savePath.add(dp);mPath = null;// 重新置空}复制代码

然后看一下onDraw

     @Overridepublic void onDraw(Canvas canvas) {//canvas.drawColor(0xFFAAAAAA);// 将前面已经画过得显示出来canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);if (mPath != null) {// 实时的显示canvas.drawPath(mPath, mPaint);}}复制代码

整个过程走完了，接下来就来考虑一下其他过程

撤销、恢复、重做三个操作

撤销操作

    /*** 撤销* 撤销的核心思想就是将画布清空，* 将保存下来的Path路径最后一个移除掉，* 重新将路径画在画布上面。*/public void undo() {if (savePath != null && savePath.size() > 0) {DrawPath drawPath = savePath.get(savePath.size() - 1);deletePath.add(drawPath);savePath.remove(savePath.size() - 1);redrawOnBitmap();}}复制代码

恢复操作

    /*** 恢复，恢复的核心就是将删除的那条路径重新添加到savapath中重新绘画即可*/public void recover() {if (deletePath.size() > 0) {//将删除的路径列表中的最后一个，也就是最顶端路径取出（栈）,并加入路径保存列表中DrawPath dp = deletePath.get(deletePath.size() - 1);savePath.add(dp);//将取出的路径重绘在画布上mCanvas.drawPath(dp.path, dp.paint);//将该路径从删除的路径列表中去除deletePath.remove(deletePath.size() - 1);invalidate();}}复制代码

重做操作

    /*** 重做*/public void redo() {if (savePath != null && savePath.size() > 0) {savePath.clear();redrawOnBitmap();}}复制代码

    private void redrawOnBitmap() {/*mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,Bitmap.Config.RGB_565);mCanvas.setBitmap(mBitmap);// 重新设置画布，相当于清空画布*/initCanvas();Iterator<DrawPath> iter = savePath.iterator();while (iter.hasNext()) {DrawPath drawPath = iter.next();mCanvas.drawPath(drawPath.path, drawPath.paint);}invalidate();// 刷新}复制代码

初始化相关

    public void initCanvas() {setPaintStyle();if (screenWidth > 0 && screenHeight > 0) {mBitmapPaint = new Paint(Paint.DITHER_FLAG);//画布大小mBitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888);mBitmap.eraseColor(Color.argb(0, 0, 0, 0));mCanvas = new Canvas(mBitmap);  //所有mCanvas画的东西都被保存在了mBitmap中mCanvas.drawColor(Color.TRANSPARENT);}}//初始化画笔样式private void setPaintStyle() {mPaint = new Paint();mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘mPaint.setStrokeCap(Paint.Cap.ROUND);// 形状mPaint.setAntiAlias(true);mPaint.setDither(true);if (currentStyle == 1) {mPaint.setStrokeWidth(currentSize);mPaint.setColor(currentColor);} else {//橡皮擦mPaint.setAlpha(0);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));mPaint.setColor(Color.TRANSPARENT);mPaint.setStrokeWidth(50);}}复制代码

样式相关修改

    //以下为样式修改内容//设置画笔样式public void selectPaintStyle(int which) {if (which == 0) {currentStyle = 1;setPaintStyle();}//当选择的是橡皮擦时，设置颜色为白色if (which == 1) {currentStyle = 2;setPaintStyle();}}//选择画笔大小public void selectPaintSize(int which) {currentSize = which;setPaintStyle();}//设置画笔颜色public void selectPaintColor(int which) {currentColor = paintColor[which];setPaintStyle();}复制代码

到此为止，涂鸦的效果有了，实际项目中都是对一个照片进行涂鸦操作，因此添加照片进行再次封装，达到实际项目中的那种效果

添加照片进行涂鸦

利用组合自定义view，结合上面的TabletView和ImageView来到实际项目效果

xml布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/layout"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/img"android:layout_width="match_parent"android:layout_height="match_parent" /><com.tabletview.TabletViewandroid:id="@+id/tabletview"android:layout_width="match_parent"android:layout_height="match_parent" /></FrameLayout>复制代码

继承FrameLayout，在onFinishInflate()中添加view

    @Overrideprotected void onFinishInflate() {super.onFinishInflate();View view = LayoutInflater.from(mContext).inflate(R.layout.tuya, null);layout = (FrameLayout) view.findViewById(R.id.layout);img = (ImageView) view.findViewById(R.id.img);tabletview = (TabletView) view.findViewById(R.id.tabletview);addView(view);}复制代码

获得TabletView去执行相关操作

    /*** 去拿到TabletView去执行相关的操作* @return*/public TabletView getTabletview() {return tabletview;}复制代码

设置照片的方法，实际项目中可利用照片、相册选择照片返回设置

    /*** 设置照片，根据实际项目可支持照片选择、相册、拍照* @param bitmap*/public void setImgBitmap(Bitmap bitmap) {img.setImageBitmap(bitmap);}复制代码

保存照片，这里的权限问题根据6.0、7.0、8.0得设置，可以参考其他的权限讲解

    /*** 保存照片*/public void saveToSDCard() {new Thread() {@Overridepublic void run() {SystemClock.sleep(1000);//view层的截图layout.setDrawingCacheEnabled(true);Bitmap newBitmap = Bitmap.createBitmap(layout.getDrawingCache());layout.setDrawingCacheEnabled(false);//获得系统当前时间，并以该时间作为文件名SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");Date curDate = new Date(System.currentTimeMillis());//获取当前时间String str = formatter.format(curDate) + "paint.png";File file = new File("sdcard/" + str);if (!file.exists()) {try {file.createNewFile();} catch (IOException e) {e.printStackTrace();}}FileOutputStream fos = null;try {fos = new FileOutputStream(file);} catch (Exception e) {e.printStackTrace();}newBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);}}.start();}复制代码

代码中应用

xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.tabletview.MainActivity"><com.tabletview.TuyaViewandroid:id="@+id/tuyaview"android:layout_width="match_parent"android:layout_height="match_parent"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><Buttonandroid:id="@+id/btn_undo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="撤销" /><Buttonandroid:id="@+id/btn_redo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="重做" /><Buttonandroid:id="@+id/btn_save"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="保存" /><Buttonandroid:id="@+id/btn_recover"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="恢复" /><Buttonandroid:id="@+id/btn_paintcolor"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="颜色" /><Buttonandroid:id="@+id/btn_paintsize"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="画笔大小" /><Buttonandroid:id="@+id/btn_paintstyle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="画笔类型" /><SeekBarandroid:id="@+id/sb_size"android:layout_width="match_parent"android:layout_height="wrap_content" /></LinearLayout></RelativeLayout>复制代码

java代码

    private void initView() {btn_undo = (Button) findViewById(R.id.btn_undo);btn_undo.setOnClickListener(this);btn_redo = (Button) findViewById(R.id.btn_redo);btn_redo.setOnClickListener(this);btn_save = (Button) findViewById(R.id.btn_save);btn_save.setOnClickListener(this);btn_recover = (Button) findViewById(R.id.btn_recover);btn_recover.setOnClickListener(this);sb_size = (SeekBar) findViewById(R.id.sb_size);sb_size.setOnClickListener(this);btn_paintcolor = (Button) findViewById(R.id.btn_paintcolor);btn_paintcolor.setOnClickListener(this);btn_paintsize = (Button) findViewById(R.id.btn_paintsize);btn_paintsize.setOnClickListener(this);btn_paintstyle = (Button) findViewById(R.id.btn_paintstyle);btn_paintstyle.setOnClickListener(this);tuyaview = (TuyaView) findViewById(R.id.tuyaview);//设置照片Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);tuyaview.setImgBitmap(bitmap);
//tabletView = tuyaview.getTabletview();tabletView.requestFocus();tabletView.selectPaintSize(sb_size.getProgress());sb_size.setOnSeekBarChangeListener(new MySeekChangeListener());}class MySeekChangeListener implements SeekBar.OnSeekBarChangeListener {@Overridepublic void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {tabletView.selectPaintSize(seekBar.getProgress());//Toast.makeText(MainActivity.this,"当前画笔尺寸为"+seekBar.getProgress(),Toast.LENGTH_SHORT ).show();}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {tabletView.selectPaintSize(seekBar.getProgress());//Toast.makeText(MainActivity.this,"当前画笔尺寸为"+seekBar.getProgress(),Toast.LENGTH_SHORT ).show();}@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {}}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btn_undo:tabletView.undo();break;case R.id.btn_redo:tabletView.redo();break;case R.id.btn_save:
//                tabletView.saveToSDCard();tuyaview.saveToSDCard();break;case R.id.btn_recover:tabletView.recover();break;case R.id.btn_paintcolor:sb_size.setVisibility(View.GONE);showPaintColorDialog(v);break;case R.id.btn_paintsize:sb_size.setVisibility(View.VISIBLE);break;case R.id.btn_paintstyle:sb_size.setVisibility(View.GONE);showMoreDialog(v);break;}}private int select_paint_color_index = 0;private int select_paint_style_index = 0;public void showPaintColorDialog(View parent) {AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this);alertDialogBuilder.setTitle("选择画笔颜色：");alertDialogBuilder.setSingleChoiceItems(R.array.paintcolor, select_paint_color_index, new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialogInterface, int which) {select_paint_color_index = which;tabletView.selectPaintColor(which);dialogInterface.dismiss();}});alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialogInterface, int i) {dialogInterface.dismiss();}});alertDialogBuilder.create().show();}public void showMoreDialog(View parent) {AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);alertDialogBuilder.setTitle("选择画笔或橡皮擦：");alertDialogBuilder.setSingleChoiceItems(R.array.paintstyle, select_paint_style_index, new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {select_paint_style_index = which;tabletView.selectPaintStyle(which);dialog.dismiss();}});alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();}});alertDialogBuilder.create().show();}复制代码

TabletView github demo地址

个人博客