手写签名板 android,Android 简易签名板

一个简单的练习，手写签名后，可以清空，保存，然后再相册进行查看

简易签名板

有5个知识点，需要注意：

在SignatureView的onTouchEvent()方法中，利用mPath.quadTo()方法，使绘制路径变得圆滑

在SignatureView的save()方法中，将View中的内容保存到一个Bitmap中

在SignatureView的closeStream()方法中，所有的读写流都实现了Closeable接口，可以用来关闭流

在SignatureView的clear()方法中，利用PorterDuff.Mode.CLEAR将Canvas中绘制的内容清空

在MainActivity中，图片保存到本地后，需要向系统发送一个广播，通知相册更新

1. SignatureView 控件

先通过mCanvas利用mPaint将绘制的路径保存进了mBitmap中，再将mBitmap在canvas绘制出来

public class SignatureView extends View {

private Paint mPaint;

private Path mPath;

private Canvas mCanvas;

private Bitmap mBitmap;

private float mLastX, mLastY;//上次的坐标

public SignatureView(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

/***

* 初始化

*/

private void init() {

//关闭硬件加速

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

//画笔

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

mPaint.setStrokeWidth(5f);

mPaint.setColor(Color.parseColor("#FF4081"));

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeJoin(Paint.Join.ROUND);//使画笔更加圆润

mPaint.setStrokeCap(Paint.Cap.ROUND);//同上

//路径

mPath = new Path();

//保存签名的画布

post(new Runnable() {//拿到控件的宽和高

@Override

public void run() {

mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);

mCanvas = new Canvas(mBitmap);

}

});

}

/**

* 绘制

*/

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (mBitmap != null) {

canvas.drawColor(Color.WHITE);//绘制背景白色

drawSignaturePath(); //将路径绘制在mBitmap上

canvas.drawBitmap(mBitmap, 0, 0, null);//将mBitmap绘制在canvas上

}

}

/**

* 清空绘制内容

*/

public void clear() {

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

mCanvas.drawPaint(mPaint);

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));

mPath.reset();

invalidate();

}

/**

* 保存到指定的文件夹中

*/

public boolean save(String filePath) {

if (mBitmap != null && mLastY != 0f) {//没有绘制，就不保存

//从View中得到Bitmap

setDrawingCacheEnabled(true);

buildDrawingCache(true);

Bitmap bitmap = getDrawingCache(true);

//保存图片

File file = new File(filePath);

FileOutputStream fileOutputStream = null;

try {

fileOutputStream = new FileOutputStream(file);

if (bitmap.compress(Bitmap.CompressFormat.PNG, 100, fileOutputStream)) {

fileOutputStream.flush();

return true;

}

} catch (java.io.IOException e) {

e.printStackTrace();

} finally {

closeStream(fileOutputStream);

}

}

return false;

}

/**

* 关闭流

*/

private void closeStream(Closeable closeable) {

if (closeable != null) {

try {

closeable.close();

} catch (IOException e) {

e.printStackTrace();

}

}

}

/**

* 绘制签名

*/

private void drawSignaturePath() {

mCanvas.drawPath(mPath, mPaint);

}

/**

* 触摸事件 触摸绘制

*/

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

float x = event.getX();

float y = event.getY();

switch (action) {

case MotionEvent.ACTION_DOWN:

mLastX = x;

mLastY = y;

mPath.moveTo(mLastX, mLastY);

break;

case MotionEvent.ACTION_MOVE:

float dx = Math.abs(x - mLastX);

float dy = Math.abs(y - mLastY);

if (dx >= 3 || dy >= 3) {//绘制的最小距离 3px

//利用二阶贝塞尔曲线，使绘制路径更加圆滑

mPath.quadTo(mLastX, mLastY, (mLastX + x) / 2, (mLastY + y) / 2);

}

mLastX = x;

mLastY = y;

break;

case MotionEvent.ACTION_UP:

mPath.reset();

break;

}

invalidate();

return true;

}

/**

* 测量

*/

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);

int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);

int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);

int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

if (wSpecMode == MeasureSpec.EXACTLY && hSpecMode == MeasureSpec.EXACTLY) {

setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);

} else if (wSpecMode == MeasureSpec.AT_MOST) {

setMeasuredDimension(200, hSpecSize);

} else if (hSpecMode == MeasureSpec.AT_MOST) {

setMeasuredDimension(wSpecSize, 200);

}

}

}

关键的地方都有注释

2.Activity 代码

在图片保存成功后，将图片的路径信息利用用广播发送给系统，通知相册更新

public class MainActivity extends AppCompatActivity {

private Button bt_clear,bt_save;

private SignatureView sv;

private final String APP_DIR = "com.signature.view";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

init();

}

/**

* 初始化

*/

private void init() {

final String dir = Environment.getExternalStorageDirectory().getAbsolutePath()+ File.separator+APP_DIR+File.separator;

final File fileDir = new File(dir);

if (!fileDir.exists()){

fileDir.mkdirs();

}

bt_clear = (Button) findViewById(R.id.bt_clear_main_activity);

sv = (SignatureView) findViewById(R.id.sv_main_activity);

bt_clear.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

sv.clear();

}

});

bt_save = (Button) findViewById(R.id.bt_save_main_activity);

bt_save.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

save(fileDir);

}

});

}

/**

* 保存图片

*/

private void save(File fileDir) {

final String filePath = getFilePath(fileDir);

if (sv.save(filePath)){//保存成功

//发送广播 通知系统相册更新

Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);

Uri uri = Uri.fromFile(new File(filePath));

intent.setData(uri);

sendBroadcast(intent);

Toast.makeText(MainActivity.this, "保存成功！！！", Toast.LENGTH_SHORT).show();

}

}

/**

* 得到图片的路径 以及图片的名字

*/

private String getFilePath(File fileDir) {

SimpleDateFormat simpleDateFormat = (SimpleDateFormat) DateFormat.getDateTimeInstance();

final String fileName = simpleDateFormat.format(new Date())+".png";

Log.e("filename","---"+fileName);

File file = new File(fileDir,fileName);

return file.getAbsolutePath();

}

}

DateFormat.getDateTimeInstance()这个方法很方便的拿到手机设置的时间显示格式

布局文件:

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/sv_main_activity"

android:layout_width="match_parent"

android:layout_height="400dp" />

android:id="@+id/bt_clear_main_activity"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/sv_main_activity"

android:layout_marginStart="50dp"

android:text="清空"/>

android:id="@+id/bt_save_main_activity"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/sv_main_activity"

android:layout_alignParentEnd="true"

android:layout_marginEnd="50dp"

android:text="保存" />

布局很简陋

3. 最后

主要是练习一下，复习最近一段学习到的一些知识

共勉 : )