Android之使用SurfaceView制作简易写字板
有人说SurfaceView是View的孪生兄弟，其实SurfaceView也是继承自View的，不过View的绘制只能在主线程，而SurfaceView却可以在子线程中进行绘制。本文我们不介绍SurfaceView的基础用法，只介绍如何使用SurfaceView来制作一个简易写字板。
PreView(gif加载较慢，请耐心等待)
思路
- 创建一个类继承我们的SurfaceView
- 通过onTouchEvent来记录手指的滑动轨迹
- 开启一个子线程来绘制我们手指轨迹
扩展
- 可以改变画笔的颜色
- 改变颜色之后之前绘制的图像颜色不变
- 增加擦除功能
创建PaintSurfaceView
public class PaintSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
public static final String TAG = PaintSurfaceView.class.getSimpleName();
private SurfaceHolder mHolder;
private Paint mPaint;
// 是否绘制
private boolean isDrawing;
private Canvas mCanvas;
private Path mPath;
public PaintSurfaceView(Context context) {
this(context, null);
}
public PaintSurfaceView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PaintSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mHolder = getHolder();
mHolder.addCallback(this);
mPaint = new Paint();
//设置抗锯齿
mPaint.setAntiAlias(true);
//设置画笔的风格
mPaint.setStyle(Paint.Style.STROKE);
//设置边线的宽度
mPaint.setStrokeWidth(10);
//设置画笔的颜色
mPaint.setColor(Color.BLACK);
mPath = new Path();
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
isDrawing = true;
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
Log.d(TAG, "surfaceChanged: ");
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
isDrawing = false;
Log.d(TAG, "surfaceDestroyed: ");
}
}可以看到这里我们只是做了简单的初始化工作。
通过onTouchEvent记录手指滑动轨迹
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.moveTo(x, y);
return true;
case MotionEvent.ACTION_MOVE:
//记录所有划过的点
mPath.lineTo(x, y);
return true;
}
invalidate();
return super.onTouchEvent(event);
}
在手指落下时，记录手指滑动的起点，move的时候记录滑动路劲。所以这里我们只需要处理ACTION_DOWN和ACTION_MOVE事件即可。
实现Runable接口
@Override
public void run() {
while (isDrawing) {
try {
// 锁定画布
mCanvas = mHolder.lockCanvas();
myDraw();
} catch (Exception e) {
Log.d(TAG, "run: " + e.getMessage());
} finally {
if (mCanvas != null) {
// 释放画布
mHolder.unlockCanvasAndPost(mCanvas);
}
}
}
}
public void myDraw() {
mCanvas.drawColor(Color.WHITE);
mCanvas.drawPath(mPath, mPaint);
}开启绘制线程
@Override
public void surfaceCreated(SurfaceHolder holder) {
isDrawing = true;
new Thread(this).start();
}
在surface创建的时候我们开始绘制，熟悉Java线程的朋友应该知道创建新线程的时候构造需要传一个Runnable对象，所以我们传this即可。
这时候在xml文件引用我们的PaintSurfaceView，运行就可以开始写字了。这时要改变颜色和擦除路径只需要调用mPaint.setColor和mPath.reset()即可。
但是，问题来了。这种情况下突然改变颜色值，之前绘制的路径颜色也会发生改变，那么我们如何才能不改变之前的颜色呢？答案是我们可以将要绘制的path和color放在一个模型类里面（MVC的思想有木有。。。），然后定义一个集合来管理所有绘制的路径。
定义模型类
/**
* 我们需要用到的是Path和color值
*/
public class DrawPath {
private Path mPath;
private int mColor;
public DrawPath() {
}
public DrawPath(Path path, int color) {
mPath = path;
mColor = color;
}
public Path getPath() {
return mPath;
}
public void setPath(Path path) {
mPath = path;
}
public int getColor() {
return mColor;
}
public void setColor(int color) {
mColor = color;
}
}
此时在PaintSurfaceView中初始化一个List集合，通过它来管理我们的绘制路径
创建一个改变颜色的方法
/**
* 改变颜色
*
* @param color
*/
public void changeColor(int color) {
mPaint.setColor(color);
mPath = new Path();
DrawPath path = new DrawPath(mPath, color);
mPathList.add(path);
}
/**
* 清除所有
*/
public void clear() {
int size = mPathList.size();
DrawPath drawPath = mPathList.get(size - 1);
mPathList.clear();
mPath = drawPath.getPath();
mPath.reset();
mPathList.add(drawPath);
}每次改变颜色时，我们创建一个新的DrawPath对象来保存之前的绘制路劲和颜色，并将其放入list集合。再创建了一个擦除方法，用于擦除所有绘制的路径，并保留擦除之前最后选中的颜色。
开始绘制
public void myDraw() {
mCanvas.drawColor(Color.WHITE);
for (DrawPath drawPath : mPathList) {
mPaint.setColor(drawPath.getColor());
mCanvas.drawPath(drawPath.getPath(), mPaint);
}
}
因为所有的路径信息都保存在mPathList种，所以只需要迭代mPathList，即可实现我们想要的效果。