Android制作一个简易的画板

2022-06-20 08:06:19

前言

本文介绍使用Canvas、Paint、Path等原生API，实现一个简易的画板。

绘图原理

Paint

Paint可以理解为我们现实中的画笔，在使用前我们需要对Paint进行初始化，比如颜色、画笔粗细、透明度等。为了让曲线更加的圆滑，我们也可以让Paint划出的内容做一些圆角处理等。下面是一个可以参考的Paint的初始化代码：

// 使用抗锯齿模式初始化画笔
Paint paint=newPaint(Paint.ANTI_ALIAS_FLAG);// 设定当前画笔的绘制模式，STROKE为画线条
paint.setStyle(Paint.Style.STROKE);// 为画笔设置颜色
paint.setColor(Color.BLACK);// 设置画笔的透明度，范围：0~255
paint.setAlpha(0xFF);// 设置画笔的线条宽度，也就是笔迹的粗细
paint.setStrokeWidth(10);// 设置线条的头尾为圆角模式，这个是为了让线条看上去更圆滑
paint.setStrokeCap(Paint.Cap.ROUND);

Path

Path是android.graphics下的类，通俗来讲就是一个路径，通过点点之间的连线，就可以绘制出来的一条完整的线条。我们在触摸屏幕的时候，屏幕按照一定的频率采样，采样到的都是我们在采样时刻触摸在屏幕上的点，我们可以利用path，通过所有触摸的点，构成path，然后通过canvas绘制出来。

本次绘制使用到Path的方法如下：
moveTo(float x, float y) - 设定path的起始点
quadTo(float controlX, float controlY, float x, float y) - 将两点之间进行连线，从上一次的点添二阶贝塞尔曲线，接近控制点（controlX, controlY），结束于（x, y）。

Canvas

Canvas这个可以理解为一个画布，我们可以在上面画点、线、图形等。利用我们的笔（Paint），按照一定的方法（Path），来进行绘制。
绘制的方法如为：canvas.drawPath(path, paint)，通过此方法，就可以将我们上面的Path利用我们自定义的Paint绘制出来。

简单的实现

我们自定义一个View，暂且称之为DrawView，继承自View，添加构造方法，重写onDraw和onTouchEvent方法：

publicclassDrawViewextendsView{private Path mPath;private Paint mPaint;privatefloat mX;privatefloat mY;publicDrawView(Context context){super(context);init();}publicDrawView(Context context,@Nullable AttributeSet attrs){super(context, attrs);init();}publicDrawView(Context context,@Nullable AttributeSet attrs,int defStyleAttr){super(context, attrs, defStyleAttr);init();}privatevoidinit(){
		mPath=newPath();
		mPaint=newPaint(Paint.ANTI_ALIAS_FLAG);
		mPaint.setAlpha(0xFF);
		mPaint.setStyle(Paint.Style.STROKE);
		mPaint.setColor(Color.BLACK);
		mPaint.setStrokeWidth(10);
		mPaint.setStrokeCap(Paint.Cap.ROUND);}@OverrideprotectedvoidonDraw(Canvas canvas){super.onDraw(canvas);// 白色背景
		canvas.drawColor(Color.WHITE);
		canvas.drawPath(mPath, mPaint);}@OverridepublicbooleanonTouchEvent(MotionEvent event){switch(event.getActionMasked()){case MotionEvent.ACTION_DOWN:
				mX= event.getX();
				mY= event.getY();
				mPath.moveTo(mX, mY);break;case MotionEvent.ACTION_MOVE:float x1= event.getX();float y1= event.getY();float controlX=(x1+ mX)/2;float controlY=(y1+ mY)/2;
				mPath.quadTo(mX, mY, controlX, controlY);
				mX= x1;
				mY= y1;break;}invalidate();returntrue;}}

以上，我们就实现了一个简易的画板，在layout文件中直接使用该View即可，配置其宽高为match_parent，就可以实现一个简易的全屏批注的功能。

扩展

添加画笔粗细、颜色等工具栏，在粗细和颜色变化时，更改paint的属性即可。
像素擦除功能可以通过设置alpha为0，Xfermode为PorterDuffXfermode(PorterDuff.Mode.CLEAR)，这个表示笔迹重叠的部分会清除所有的像素。最简单的像素擦除的代码大致如下：

Paint eraserPaint=newPaint(Paint.ANTI_ALIAS_FLAG);
eraserPaint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.CLEAR));
eraserPaint.setAlpha(0);
eraserPaint.setStyle(Paint.Style.STROKE);
eraserPaint.setStrokeWidth(10);
eraserPaint.setStrokeCap(Paint.Cap.ROUND);...

总结

这只是一个非常简单的画板的实现，仅供各位参考，我们手机上或者平板上看到的手写笔、画板等，虽然界面简单，单功能实现会有更多的细节。本篇仅为各位做一个启发，如有错误或者问题，也请各位评论区指正或提出问题。