Android实现的写字板（绘画板）

超、凢脫俗 2022-06-08 04:38 167阅读 0赞

## Android实现的写字板（绘画板） ##

**前言：** 通过Android实现绘画板的功能，能够在应用中进行绘画（写字）操作，完成绘画（写字）后，可以将我们自己绘制的图画（字体）进行保存，同时也能清空画板上的内容，重新开始新的绘制。

效果图如下：

![这里写图片描述][SouthEast]

**1. 第一步**

编写布局文件activity\_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <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);
    
            }
        }
     }

1.  第三步

因为需要把我们绘制的图画保存到本地，所以需要声明一些权限。AndroidManifest.xml文件：

<?xml version="1.0" encoding="utf-8"?>
    <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>

**总结：**这样我们实现了写字板（绘画板）的功能，在我们自己写的程序中，我们可以尽情的绘制图形，练习写字，完成绘制后，可以点击保存，将我们的杰作保存下来。

[SouthEast]: /images/20220608/06d9d30a013549aba8c3344a96468b66.png