Android studio实现画板功能

淩亂°似流年 2023-01-01 15:57 273阅读 0赞

# 简单概述 #

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

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ3MDkwOA_size_16_color_FFFFFF_t_70_pic_center]

# 实现过程 #

项目布局很简单![在这里插入图片描述][2021010123193860.png_pic_center]  
让我们来看代码：首先声明画笔，画板，和坐标

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">
    
    
        <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>

作者：陈彦熹  
原文链接：[link][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ3MDkwOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f1e27d26e2c6402ca4328de21454d841.png
[2021010123193860.png_pic_center]: /images/20221120/52efdd88f90d4abbbe381323989aef35.png
[link]: https://blog.csdn.net/weixin_44470908/article/details/112095504