Android studio实现画板功能

简单概述

在日常生活中,我们经常会突发一些奇思妙想,或是一个画面,或是几个符号。这时候无法使用拍照或者打字功能实现,想拿笔记下又身边找不到笔。于是我琢磨能不能做一个手机端的画板。

效果图

Android studio实现画板功能

实现过程

项目布局很简单Android studio实现画板功能
让我们来看代码:首先声明画笔,画板,和坐标

public class MainActivity extends AppCompatActivity{

    Paint paint;
    Canvas canvas;
    ImageView imageview;
    Bitmap bitmap,newbitmap;
    TextView tv_stroke;
    int startX, startY, endX, endY;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_paint_tools);
        LinearLayout ll_layout = findViewById(R.id.ll_layout);
        RadioGroup rg_color = findViewById(R.id.rg_color);

遍历单选按钮,当单选按钮选中时,获取单选按钮颜色并将画笔颜色设置当前按钮的文本颜色,最后注意要设置画笔宽度,以免在后面点橡皮擦的时候画笔宽度调不回来

        for (int i = 0;i<rg_color.getChildCount();i++){
            RadioButton rb = (RadioButton) rg_color.getChildAt(i);
            rb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if (buttonView.isChecked()){
                        paint.setColor(buttonView.getTextColors().getDefaultColor());  
                        paint.setStrokeWidth(5);
                    }
                }
            });
        }

首先创建一张空白图片和一张灰色画布,将图片放在画布上面

       imageview = findViewById(R.id.imageview);
        Log.i("MyPaintToolsActivity",imageview.getWidth()+" "+imageview.getHeight());
        Point point = new Point();
        getWindowManager().getDefaultDisplay().getSize(point);
        Log.i("MyPaintToolsActivity",point.x+" "+point.y);

        bitmap = Bitmap.createBitmap(888,1200,Bitmap.Config.ARGB_8888);  
        canvas = new Canvas(bitmap);  
        canvas.drawColor(Color.argb(100,0,0,0));   
        paint = new Paint();
        paint.setStrokeWidth(5);
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        canvas.drawBitmap(bitmap,new Matrix(),paint);  
        imageview.setImageBitmap(bitmap);         

注册触摸监听事件,获取鼠标按下时的坐标和鼠标移动后的坐标。在开始和结束之间画一条直线并更新画布图片

        imageview.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch(event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        Log.i("MyPaintToolsActivity","ACTION_DOWN");

                        
                        startX = (int) (event.getX()/1.4);
                        startY = (int) (event.getY()/1.4);
                        break;
                    case MotionEvent.ACTION_MOVE:
                        Log.i("MyPaintToolsActivity","ACTION_MOVE");

                        
                        endX = (int) (event.getX()/1.4);
                        endY = (int) (event.getY()/1.4);

                        canvas.drawLine(startX,startY,endX,endY,paint);
                        startX = (int) (event.getX()/1.4);
                        startY = (int) (event.getY()/1.4);
                        imageview.setImageBitmap(bitmap);
                        break;
                    case MotionEvent.ACTION_UP:
                        Log.i("MyPaintToolsActivity","ACTION_UP");
                        break;
                }
                imageview.invalidate();
                return true;
            }
        });

清屏的话就一行代码 ,剩下的是重新生成一块画布


        Button btn_clear = findViewById(R.id.btn_clear);
        btn_clear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                canvas.drawColor(0,PorterDuff.Mode.CLEAR);
                bitmap = Bitmap.createBitmap(888,1200,Bitmap.Config.ARGB_8888); 
                canvas = new Canvas(bitmap);    
                canvas.drawColor(Color.argb(100,0,0,0));   
                paint = new Paint();
                paint.setStrokeWidth(5);
                paint.setAntiAlias(true);
                paint.setColor(Color.RED);
                canvas.drawBitmap(bitmap,new Matrix(),paint); 
                imageview.setImageBitmap(bitmap);         

            }
        });

呃,这里会把画布擦掉…也就是擦成白色…

        // 擦除
        Button btn_eraser = findViewById(R.id.btn_eraser);
        btn_eraser.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                paint.setColor(Color.rgb(250,250,250));
                paint.setStrokeWidth(30);
            }
        });

    }

}

最后看看页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/ll_layout">
<!--    tools:context=".MyPaintToolsActivity">-->

    <ImageView

        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <RadioGroup
        android:background="#747373"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:id="@+id/rg_color"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/rb_red"
            android:layout_width="wrap_content"
            android:layout_height="43dp"
            android:layout_weight="1"
            android:text="红色"
            android:textColor="#FF0000"
            android:textSize="18sp" />

        <RadioButton
            android:id="@+id/rb_green"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:text="黑色"
            android:textColor="#000000"
            android:textSize="18sp" />

        <RadioButton
            android:id="@+id/rb_blue"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:text="白色"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />

    </RadioGroup>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">
        <Button
            android:id="@+id/btn_clear"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:textColor="#FFFFFF"
            android:textSize="18sp"
            android:text="清除"/>
        <Button
            android:id="@+id/btn_eraser"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:textSize="18sp"
            android:background="#000000"
            android:text="擦除"/>

    </LinearLayout>


</LinearLayout>

上一篇:【从零开始撸一个App】RecyclerView的使用


下一篇:一对一视频聊天app源码,ImageView展示图片Kotlin.Android