“故欲胜人者,必先自胜;欲论人者,必先自论;欲知人者,必先自知。”——《吕氏春秋·先己》。人生在世,经常去和别人比较,但是“人比人,气死人”,我觉得还是要把更多的精力放在自己身上,每天能战胜昨天的自己就是一个不错的进步!
言归正传,最近研究了研究(其实就是花了一点时间看了看)自定义View,心想能不能做一个有意思的东西,于是Android涂鸦板就产生了!
其实还是比较简单的,主要就是手指按下、手指移动以及手指抬起这三个事件。
首先,在构造方法中定义一个幕布——Bitmap,用于存储图画,以便于保存。
WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE); screenWidth = wm.getDefaultDisplay().getWidth(); screenHeight = wm.getDefaultDisplay().getHeight(); mBitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888);
并且设置好画笔:
mCanvas = new Canvas(mBitmap); mCanvas.drawColor(Color.YELLOW); mBitmapPaint = new Paint(Paint.DITHER_FLAG); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘 mPaint.setStrokeCap(Paint.Cap.ROUND);// 形状 mPaint.setStrokeWidth(10);// 画笔宽度 mPaint.setColor(Color.RED);
编写事件的代码,主要是按下时初始化path,移动时实时画出,抬起时将path保存,这也是为实现撤销和重做两个功能 奠定基础。
@Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 每次down下去重新new一个Path mPath = 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; } private void touch_start(float x, float y) { mPath.moveTo(x, y); mX = x; mY = 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); mX = x; mY = y; } } private void touch_up() { mPath.lineTo(mX, mY); mCanvas.drawPath(mPath, mPaint); //将一条完整的路径保存下来(相当于入栈操作) savePath.add(dp); mPath = null;// 重新置空 } @Override public 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) { savePath.remove(savePath.size() - 1); redrawOnBitmap(); } } /** * 重做 */ public void redo() { if (savePath != null && savePath.size() > 0) { savePath.clear(); redrawOnBitmap(); } } private void redrawOnBitmap() { mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,Bitmap.Config.ARGB_8888); mCanvas.setBitmap(mBitmap);// 重新设置画布,相当于清空画布 Iterator<DrawPath> iter = savePath.iterator(); while (iter.hasNext()) { DrawPath drawPath = iter.next(); mCanvas.drawPath(drawPath.path, drawPath.paint); } invalidate();// 刷新 }
保存图片的逻辑和JNI实战(一)实现山寨版美图软件中的是一样的:
public void saveToSDCard() { final String fileUrl = Environment.getExternalStorageDirectory().toString() + "/android/data/test.png"; new Thread(new Runnable() { @Override public void run() { try { FileOutputStream fos = new FileOutputStream(new File(fileUrl)); mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos); fos.flush(); fos.close(); } catch (IOException e) { e.printStackTrace(); } } }).start(); }
最后,试一试成果——手画佩奇,由于是用手机画,不太好控制,所以很一般,献丑了!
参考:
1、http://www.noobyard.com/article/p-dtplnwed-er.html
2、 https://www.jianshu.com/p/d5b62c4115de
最后附上自定义控件的全部代码:
package com.example.data.page; import android.Manifest; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.os.Environment; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.WindowManager; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** * Created by Data on 2019/3/7. */ public class CustomView extends View { private Bitmap mBitmap; private Canvas mCanvas; private Path mPath; private Paint mBitmapPaint;// 画布的画笔 private Paint mPaint;// 真实的画笔 private float mX, mY;// 临时点坐标 private static final float TOUCH_TOLERANCE = 4; // 保存Path路径的集合,用List集合来模拟栈 private static List<DrawPath> savePath; // 记录Path路径的对象 private DrawPath dp; private int screenWidth, screenHeight; private class DrawPath { public Path path;// 路径 public Paint paint;// 画笔 } public CustomView(Context context) { super(context); } public CustomView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE); screenWidth = wm.getDefaultDisplay().getWidth(); screenHeight = wm.getDefaultDisplay().getHeight(); mBitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888); // 保存一次一次绘制出来的图形 mCanvas = new Canvas(mBitmap); mCanvas.drawColor(Color.YELLOW); mBitmapPaint = new Paint(Paint.DITHER_FLAG); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘 mPaint.setStrokeCap(Paint.Cap.ROUND);// 形状 mPaint.setStrokeWidth(10);// 画笔宽度 mPaint.setColor(Color.RED); savePath = new ArrayList<DrawPath>(); } @Override public void onDraw(Canvas canvas) { canvas.drawColor(0xFFAAAAAA); // 将前面已经画过得显示出来 canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint); if (mPath != null) { // 实时的显示 canvas.drawPath(mPath, mPaint); } } private void touch_start(float x, float y) { mPath.moveTo(x, y); mX = x; mY = 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); mX = x; mY = y; } } private void touch_up() { mPath.lineTo(mX, mY); mCanvas.drawPath(mPath, mPaint); //将一条完整的路径保存下来(相当于入栈操作) savePath.add(dp); mPath = null;// 重新置空 } /** * 撤销的核心思想就是将画布清空, * 将保存下来的Path路径最后一个移除掉, * 重新将路径画在画布上面。 */ public void undo() { if (savePath != null && savePath.size() > 0) { savePath.remove(savePath.size() - 1); redrawOnBitmap(); } } /** * 重做 */ public void redo() { if (savePath != null && savePath.size() > 0) { savePath.clear(); redrawOnBitmap(); } } private void redrawOnBitmap() { mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,Bitmap.Config.ARGB_8888); mCanvas.setBitmap(mBitmap);// 重新设置画布,相当于清空画布 Iterator<DrawPath> iter = savePath.iterator(); while (iter.hasNext()) { DrawPath drawPath = iter.next(); mCanvas.drawPath(drawPath.path, drawPath.paint); } invalidate();// 刷新 } @Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 每次down下去重新new一个Path mPath = 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; } public void saveToSDCard() { final String fileUrl = Environment.getExternalStorageDirectory().toString() + "/android/data/test.png"; new Thread(new Runnable() { @Override public void run() { try { FileOutputStream fos = new FileOutputStream(new File(fileUrl)); mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos); fos.flush(); fos.close(); } catch (IOException e) { e.printStackTrace(); } } }).start(); } }