Android实现的写字板（绘画板）
Android实现的写字板（绘画板）
前言： 通过Android实现绘画板的功能，能够在应用中进行绘画（写字）操作，完成绘画（写字）后，可以将我们自己绘制的图画（字体）进行保存，同时也能清空画板上的内容，重新开始新的绘制。
效果图如下：
1. 第一步
编写布局文件activity_main.xml
<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=".MainActivity">
<ImageView
android:id="@+id/iv"
android:layout_width="1200px"
android:layout_height="1500px"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center_horizontal"
android:orientation="horizontal"
android:id="@+id/linearLayout4">
LinearLayout>
<Button
android:id="@+id/btn_resume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_resume"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="79dp"/>
<Button
android:id="@+id/btn_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_save"
android:layout_alignBottom="@+id/linearLayout4"
android:layout_toEndOf="@+id/linearLayout4"
android:layout_marginStart="91dp"/>
RelativeLayout>
2. 第二步
编写MainActivity.java文件
public class MainActivity extends AppCompatActivity {
private ImageView iv;
private Bitmap baseBitmap;
private Button btn_resume;
private Button btn_save;
private Canvas canvas;
private Paint paint;
float radio;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// setContentView(new CustomView1(this));
// setContentView(new CustomView2(this));
radio = 5;
iv = (ImageView) findViewById(R.id.iv);
// 初始化一个画笔，笔触宽度为5，颜色为红色
paint = new Paint();
paint.setStrokeWidth(radio);
paint.setColor(Color.RED);
iv = (ImageView) findViewById(R.id.iv);
btn_resume = (Button) findViewById(R.id.btn_resume);
btn_save = (Button) findViewById(R.id.btn_save);
btn_resume.setOnClickListener(click);
btn_save.setOnClickListener(click);
iv.setOnTouchListener(touch);
}
private View.OnTouchListener touch = new View.OnTouchListener() {
// 定义手指开始触摸的坐标
float startX;
float startY;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
// 用户按下动作
case MotionEvent.ACTION_DOWN:
// 第一次绘图初始化内存图片，指定背景为白色
if (baseBitmap == null) {
baseBitmap = Bitmap.createBitmap(iv.getWidth(),
iv.getHeight(), Bitmap.Config.ARGB_8888);
canvas = new Canvas(baseBitmap);
canvas.drawColor(Color.WHITE);
}
// 记录开始触摸的点的坐标
startX = event.getX();
startY = event.getY();
break;
// 用户手指在屏幕上移动的动作
case MotionEvent.ACTION_MOVE:
// 记录移动位置的点的坐标
float stopX = event.getX();
float stopY = event.getY();
Thread t =new Thread(new Runnable() {
@Override
public void run() {
radio+=0.1;
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
});
t.start();
paint.setStrokeWidth(radio);
//根据两点坐标，绘制连线
canvas.drawLine(startX, startY, stopX, stopY, paint);
// 更新开始点的位置
startX = event.getX();
startY = event.getY();
// 把图片展示到ImageView中
iv.setImageBitmap(baseBitmap);
break;
case MotionEvent.ACTION_UP:
radio = 5;
break;
default:
break;
}
return true;
}
};
private View.OnClickListener click = new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_save:
saveBitmap();
break;
case R.id.btn_resume:
resumeCanvas();
break;
default:
break;
}
}
};
/**
* 保存图片到SD卡上
*/
protected void saveBitmap() {
try {
// 保存图片到SD卡上
String fileName = "/sdcard/"+System.currentTimeMillis() + ".png";
File file = new File(fileName);
FileOutputStream stream = new FileOutputStream(file);
baseBitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
Toast.makeText(MainActivity.this, "保存图片成功", 1000).show();
// // Android设备Gallery应用只会在启动的时候扫描系统文件夹
// // 这里模拟一个媒体装载的广播，用于使保存的图片可以在Gallery中查看
Intent intent = new Intent();
intent.setAction(Intent.ACTION_MEDIA_MOUNTED);
intent.setData(Uri.fromFile(Environment
.getExternalStorageDirectory()));
sendBroadcast(intent);
} catch (Exception e) {
Toast.makeText(MainActivity.this, "保存图片失败", 1000).show();
e.printStackTrace();
}
}
// 手动清除画板的绘图，重新创建一个画板
protected void resumeCanvas() {
if (baseBitmap != null) {
baseBitmap = Bitmap.createBitmap(iv.getWidth(),
iv.getHeight(), Bitmap.Config.ARGB_8888);
canvas = new Canvas(baseBitmap);
canvas.drawColor(Color.WHITE);
iv.setImageBitmap(baseBitmap);
Toast.makeText(MainActivity.this, "清除画板成功，可以重新开始绘图", 1000).show();
}
}
}
/**
* 使用内部类 自定义一个简单的View
* @author Administrator
*
*/
class CustomView1 extends View {
Paint paint;
public CustomView1(Context context) {
super(context);
paint = new Paint(); //设置一个笔刷大小是3的黄色的画笔
paint.setColor(Color.YELLOW);//颜色
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(3);//画笔大小
}
@Override
protected void onDraw(Canvas canvas) {
//直接将View显示区域用某个颜色填充满
//canvas.drawColor(Color.BLUE);
//绘圆
canvas.drawCircle(100, 100, 90, paint);
//绘线
paint.setColor(Color.GREEN);
paint.setStrokeWidth(10);
canvas.drawLine(300,300,400,500,paint);
RectF rect = new RectF(100, 100, 300, 300);
//绘制弧线区域
paint.setColor(Color.RED);
canvas.drawArc(rect, //弧线所使用的矩形区域大小
0, //开始角度
120, //扫过的角度
true, //是否使用中心
paint);
//矩形区域内切椭圆
rect = new RectF(500,500,600,700);
canvas.drawOval(rect, paint);
//绘矩形
paint.setColor(Color.BLUE);
rect = new RectF(800,800,1000,1000);
canvas.drawRect(rect,paint);
//绘圆角矩形
paint.setColor(Color.YELLOW);
canvas.drawRoundRect(rect,
50, //x轴的半径
50, //y轴的半径
paint);
Path path = new Path(); //定义一条路径
path.moveTo(100, 500); //移动到 坐标10,10
path.lineTo(300, 600);
path.lineTo(200,500);
path.lineTo(100, 500);
canvas.drawPath(path, paint);
}
}
}- 第三步
因为需要把我们绘制的图画保存到本地，所以需要声明一些权限。AndroidManifest.xml文件：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.newdegree.draw">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity" android:screenOrientation="sensor">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
intent-filter>
activity>
application>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
manifest>总结：这样我们实现了写字板（绘画板）的功能，在我们自己写的程序中，我们可以尽情的绘制图形，练习写字，完成绘制后，可以点击保存，将我们的杰作保存下来。