基础系列之《画图板实现》

简介:

转载请注明出处:王亟亟的大牛之路

各类自定义View大多都是画+动画实现的,所以这一次讲点基础的,!!

先列举下画2D画相关的2个大哥大:Paint Canvas.

贴一下常用的方法(人家那里扣来的)

这里写图片描述

这里写图片描述

具体的一大堆方法的使用就不列举了,反正 网上例子多,什么画圆画方块,之类的。

贴一下实现的效果:
这里写图片描述

画完之后是这样的
这里写图片描述

还有2个按钮一个保存,保存到SD卡根目录,一个是清除画布。

怎么做呢?

那首先要一个填充画的地方,那就放一个ImageView来呈现,像这样。

<LinearLayout 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"
    android:orientation="vertical" tools:context=".MainActivity">


    <RelativeLayout
        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:text="@string/save"
            android:id="@+id/btn1"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="40dp"
            android:layout_marginStart="40dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/clean"
            android:id="@+id/btn2"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="40dp"
            android:layout_marginEnd="40dp" />
    </RelativeLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView" />
</LinearLayout>

那么如何画呢?因为用户点击在ImageView上的动作都是触摸的So 我们让整个View在OnTouchListener的状态下

  imageView.setOnTouchListener(this);

然后在MotionEvent.ACTION_MOVE:中进行作画OK,流程就是这样,直接上代码

public class MainActivity extends AppCompatActivity implements View.OnClickListener,View.OnTouchListener{
    Button btn1,btn2;
    ImageView imageView;
    Paint paint;
    Bitmap bitmap;
    Canvas canvas;
    float startX,startY;

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

        init();

        setListener();

    }


    private void init() {

        btn1=(Button)findViewById(R.id.btn1);
        btn2=(Button)findViewById(R.id.btn2);
        imageView=(ImageView)findViewById(R.id.imageView);
        initPaint();

    }

    private void initPaint() {

        paint=new Paint();
        paint.setColor(Color.BLUE);
        paint.setStrokeWidth(5);
        paint.setPathEffect(new CornerPathEffect(5));
    }

    private void setListener() {

        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        imageView.setOnTouchListener(this);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.btn1:
                Save();
                break;

            case R.id.btn2:
                Clean();
                break;

        }

    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                // 第一次绘图初始化内存图片,指定背景为白色
                if (bitmap == null) {

                    bitmap = Bitmap.createBitmap(imageView.getWidth(),
                            imageView.getHeight(), Bitmap.Config.ARGB_8888);
                    canvas = new Canvas(bitmap);
                    canvas.drawColor(Color.WHITE);

                }

                // 记录开始触摸的点的坐标
                startX = event.getX();
                startY = event.getY();

                break;

            case MotionEvent.ACTION_MOVE:

                // 记录移动位置的点的坐标
                float stopX = event.getX();
                float stopY = event.getY();

                //根据两点坐标,绘制连线
                canvas.drawLine(startX, startY, stopX, stopY, paint);

                // 更新开始点的位置
                startX = event.getX();
                startY = event.getY();

                // 把图片展示到ImageView中
                imageView.setImageBitmap(bitmap);

                break;

            case  MotionEvent.ACTION_UP:

                break;

            default:

                break;

        }

        return true;

    }

    private void Clean() {

        if (bitmap != null) {
            bitmap = Bitmap.createBitmap(imageView.getWidth(),
                    imageView.getHeight(), Bitmap.Config.ARGB_8888);
            canvas = new Canvas(bitmap);
            canvas.drawColor(Color.WHITE);
            imageView.setImageBitmap(bitmap);
            Toast.makeText(MainActivity.this, "清除画板成功,可以重新开始绘图", Toast.LENGTH_SHORT).show();

        }
    }

    private void Save() {

        // 保存图片到SD卡上
        File file = new File(Environment.getExternalStorageDirectory(),
                 "aa.png");
        FileOutputStream stream = null;
        try {
            stream = new FileOutputStream(file);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
        Toast.makeText(MainActivity.this, "保存图片成功", Toast.LENGTH_SHORT).show();

    }

}

就是这么简单,重要部分已标注,附属功能会在第二篇呈现,这一篇先给大家树立一个概念。

源码:http://yunpan.cn/cH6CF8eJvmGnR 访问密码 b7af

目录
相关文章
|
12月前
|
人工智能 弹性计算 自然语言处理
体验Comfyui后迷上了GenAI
《触手可及,函数计算玩转 AI 大模型》解决方案通过阿里云函数计算的无服务器架构,详细介绍了从选择模型模板到部署和调用的全过程。描述清晰,涵盖技术架构、部署步骤和示例代码,适合初学者。建议增加更多场景介绍(有时候用户不知道怎么变现)、常见问题解答和视频教程,以进一步提升用户体验。部署过程中未遇异常,函数计算的按需付费和弹性伸缩优势明显,适用于多种业务场景。建议提供更多性能优化、实际案例和安全合规建议。
222 0
|
存储 数据采集 分布式计算
阿里云大数据ACA及ACP复习题(171~180)
本人备考阿里云大数据考试时自行收集准备的题库,纯手工整理的,能够覆盖到今年7月份,应该是目前最新的,发成文章希望大家能一起学习,不要花冤枉钱去买题库背了,也希望大家能够顺利通关ACA和ACP考试。
|
存储 算法
【贪心法】最优分解问题
【贪心法】最优分解问题
564 0
【贪心法】最优分解问题
|
存储 域名解析 网络安全
阿里云对象存储OSS及CDN加速配置
目录 十大云存储服务商 登陆阿里云官网,开通对象存储服务 OSS 创建存储空间 绑定自定义域名 配置阿里云CDN加速 购买阿里云免费SSL证书 阿里云CDN配置HTTPS证书 测试是否配置成功 创建阿里云子账户,获取访问密钥 到此为止,项目中对接阿里云对象存储OSS所需参数都有了
|
前端开发 JavaScript
Threejs实现波动热点效果,波动标记,波动标签显示
Threejs实现波动热点效果,波动标记,波动标签显示
705 0
Threejs实现波动热点效果,波动标记,波动标签显示
|
传感器 供应链 安全
聊聊实际使用的电源转化电路,分享一些不同场合下的转3.3V电路
本文算是记录,根据自己经验把使用过的一些电路记录下来,常见的使用起来稳定的电路就当做分享,不常见的使用过的就当做给自己做个笔记
714 0
聊聊实际使用的电源转化电路,分享一些不同场合下的转3.3V电路
|
机器学习/深度学习 程序员
程序员的数学【微积分基础】(一)
本文其实值属于:程序员的数学【AIoT阶段二】 的一部分内容,本篇把这部分内容单独截取出来,方便大家的观看,本文介绍 微积分基础,微积分是公式推导的基础,如果你也关注我的专栏:西瓜书读书笔记,里面对公式进行详细推导的过程中,运用到了大量的 导数,积分,身为一名程序员,我们务必掌握一些必备的数学知识。
438 0
程序员的数学【微积分基础】(一)