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

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

各类自定义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

时间: 2024-11-03 22:00:18

基础系列之《画图板实现》的相关文章

java基础-我是新手 用JAVA编写画图板时不知到怎么在菜单前边加上那一部分空白

问题描述 我是新手 用JAVA编写画图板时不知到怎么在菜单前边加上那一部分空白 我是新手 用JAVA编写画图板时不知到怎么在菜单前边加上那一部分空白

java:画图板的制作

学会了使用按钮监听以及鼠标监听器之后,我们就可以制作一个属于自己的画图板了,以下是我之前制作的一个简易的画图板,功能方面尚还不足,不过已经可以完成铅笔,橡皮,画直线,圆等基本工作了,还可以完成颜色的自由选择,大家不放自己也动手做做吧. 首先是界面类: Java代码 import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.FlowLayout; import ja

类似画图板的小程序

最近做了一个类似Windows画图板的小程序,拿来和大家分享一下.功能和界面全部模仿于Windows自带的画图板,界面如截图.功能主要有: 手绘线.简单图形.文字输入.图块拖放.重复撤销.画面缩放.打开保存图片文件,另外为了直接从数据库或者XML中存取图片,另外还提供了从Base64编码存取图片的接口,其他还实现了和画图板同样效果的工具箱及颜料盒. 1.绘图: 绘制功能主要在OnLButtonDown.OnMouseMove.OnLButtonUp中实现,根据当前选择的工具和工具的样式进行绘制.

Win7怎么用自带画图板裁剪图片?

  Win7怎么用自带画图板裁剪图片?很多用户问小编Win7怎么用自带画图板裁剪图片?有时候需要美化图片,但是对于不懂美图秀秀或者不懂PS的人,对照片或图片进行裁剪,是件困难的事情吧,网上介绍很多关于裁剪图片的教程,但是都比较复杂,还要下载软件.其实win7旗舰版系统自带的自带画图板就可以裁剪图片了,下面小编告诉大家具体的使用方法. 具体方法如下: 1.点开始>所有程序>附件>打开画图选项; 2.点击画图板主页选项左侧的小三角,选择打开一幅图片; 3.点击主页>选择形状>矩形

iOS开发之画图板(贝塞尔曲线)

贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝塞尔划线的功能来封装一个画图板. 画图板的截图如下,上面的白板就是我们的画图板,是自己封装好的一个UIView,下面会详细的介绍如何封装这个画图板,下面的控件用来控制我们画图板的属性以及Undo,Redo和保存功能.点击保存时会把绘制的图片保存到手机的相册中.下面是具体的实现方案.   一.封装画图

gdi+-请教大家,用GDI+怎么绘制画图板的色调、饱和度的矩形。

问题描述 请教大家,用GDI+怎么绘制画图板的色调.饱和度的矩形. 就是ColorDialog的色调.饱和度的选择框,用什么绘制方法绘制. 解决方案 Rectangle会用当前画刷填充矩形 解决方案二: 自己解决了,遍历颜色创建位图贴上去!

在java做的画图板中,如何选中一个已经画好的图形,把它放大、缩小、移动???

问题描述 在java做的画图板中,如何选中一个已经画好的图形,把它放大.缩小.移动???类似windows的画图板功能,急呀,大牛们帮帮忙 解决方案 解决方案二:你要做图形处理的话,在画这个图形的时候就要把图形的数据保存起来,例如:直线就要保存两个端点的坐标,圆就要保存圆心坐标和半径.然后根据操作,对保存的数据进行相应的处理,再重画图形.建议看下图形学的一些知识.解决方案三:可是我只是个菜鸟,不会那些呀,怎么能选中图形呢?解决方案四:packageaa;importjavax.swing.*;i

JS基础系列之正则表达式_正则表达式

正则表达式是一个很牛逼的东东,今天在这里只是简单的给刚刚接触JS的人普及一下,里面若有争议的地方欢迎大家留言! 1.1 什么是正则表达式 ​ 正则表达式(regular expression)是一个描述字符模式的对象,ECMAScript的RegExp 类表示正则表达式,而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数. ​ 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. 1.2 正则表达式的作用 ​ 正则表达式主要用来验证

Entity Framework 5.0基础系列

原文:Entity Framework 5.0基础系列 1.Entity Framework简介 http://www.cnblogs.com/aehyok/p/3315991.html 2.Entity Framework DBFirst尝试http://www.cnblogs.com/aehyok/p/3318892.html 3.Entity Framework ModelFirst尝试http://www.cnblogs.com/aehyok/p/3323438.html 4.Entit