前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android画板的实现

Android画板的实现

作者头像
夜雨飘零
发布2020-05-06 10:46:13
1.3K0
发布2020-05-06 10:46:13
举报
文章被收录于专栏:CSDN博客CSDN博客

原文博客:Doi技术团队 链接地址:https://blog.doiduoyi.com/authors/1584446358138 初心:记录优秀的Doi技术团队学习经历

这是一个常见的画板功能,常用于画画和手写输入等等,今天就教大家实现这个小功能,这个功能还是比较简单的,只有一个Java文件

先看效果图

布局代码,只有三个按钮和一张图片

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.dell.myapplication.Main2Activity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="bold"
            android:text="变粗" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="changeColor"
            android:text="改变颜色" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="save"
            android:text="保存图片" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

Java代码,每个方法都很明了,其中最重要的是ImageView的触摸事件,这是画画的关键,还要留意图片的初始化操作

代码语言:javascript
复制
public class Main2Activity extends AppCompatActivity {
    private ImageView imageView;
    private Bitmap copyBitmap;
    private Paint paint;
    private Canvas canvas;
    private float startX;
    private float startY;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        imageView = (ImageView) findViewById(R.id.iv_image);
        //使用Bitmap工厂把图片加载进来
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.huaban);
        //创建一个空的图片,宽度和高度 还有信息跟原图片一样
        copyBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
        //创建画笔
        paint = new Paint();
        //创建一个画布
        canvas = new Canvas(copyBitmap);
        //开始画画
        canvas.drawBitmap(bitmap, new Matrix(), paint);
        imageView.setImageBitmap(copyBitmap);

        //图片的触摸事件
        imageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //获取动作的事件
                int action = event.getAction();
                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        //按下事件
                        startX = event.getX();
                        startY = event.getY();
                        Log.e("按下", startX + "," + startY);
                        break;
                    case MotionEvent.ACTION_MOVE:
                        //滑动事件
                        float x = event.getX();
                        float y = event.getY();
                        //在画布上画直线,不能画点,滑动事件获得的坐标不是连续的
                        canvas.drawLine(startX, startY, x, y, paint);
                        //更新图片
                        imageView.setImageBitmap(copyBitmap);
                        startX = x;
                        startY = y;
                        Log.e("滑动", x + "," + y);
                        break;
                    case MotionEvent.ACTION_UP:
                        //抬起事件
                        float upX = event.getX();
                        float upY = event.getY();
                        Log.e("抬起", upX + "," + upY);
                        break;
                }
                //必须设置为true,否则只执行按下事件
                return true;
            }
        });

    }

    //修改画笔的颜色
    public void changeColor(View view) {
        paint.setColor(Color.RED);
    }

    //设置画笔的粗细
    public void bold(View view) {
        paint.setStrokeWidth(5);
    }

    //保存图片
    public void save(View view) {
        //创建一个图片的文件
        File file = new File(Environment.getExternalStorageDirectory(), System.currentTimeMillis() + ".png");
        FileOutputStream straeam;
        try {
            straeam = new FileOutputStream(file);
            //生成图片,参数①为图片的类型,参数②为图片质量,参数③为文件输出流
            copyBitmap.compress(Bitmap.CompressFormat.PNG, 100, straeam);
            Toast.makeText(this, "保存成功", Toast.LENGTH_SHORT).show();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-08-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档