Android(java)学习笔记238:多媒体之图片画画板案例

1.首先我们编写布局文件activity_main.xml如下:

  1.  1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     xmlns:tools="http://schemas.android.com/tools"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     tools:context="com.himi.painter.MainActivity" >
     6     <ImageView
     7         android:layout_width="match_parent"
     8         android:layout_height="match_parent"
     9         android:id="@+id/iv" />
    10 </RelativeLayout>

2.初步编写MainActivity.java,如下:

  1.  1 package com.himi.painter;
     2 import android.app.Activity;
     3 import android.graphics.Bitmap;
     4 import android.graphics.Canvas;
     5 import android.graphics.Color;
     6 import android.graphics.Paint;
     7 import android.os.Bundle;
     8 import android.view.MotionEvent;
     9 import android.view.View;
    10 import android.view.View.OnTouchListener;
    11 import android.widget.ImageView;
    12 public class MainActivity extends Activity {
    13     private ImageView iv;
    14     private Canvas canvas;
    15     private Paint paint;
    16     private Bitmap bitmap;
    17     @Override
    18     protected void onCreate(Bundle savedInstanceState) {
    19         super.onCreate(savedInstanceState);
    20         setContentView(R.layout.activity_main);
    21         iv = (ImageView) findViewById(R.id.iv);
    22         //创建一个空白的图片,以图片为模板创建一个画板
    23         bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
    24         //创建画板
    25         canvas  = new Canvas(bitmap);
    26         //创建画笔
    27         paint = new Paint();
    28         paint.setColor(Color.BLACK);
    29
    30         canvas.drawColor(0x22888888);
    31         iv.setImageBitmap(bitmap);
    32         iv.setOnTouchListener(new OnTouchListener() {
    33              //手在屏幕上的初始化坐标
    34             int startX;
    35             int startY;
    36             public boolean onTouch(View v, MotionEvent event) {
    37                 switch (event.getAction()) {
    38                 case MotionEvent.ACTION_DOWN://手指按下
    39                     startX = (int) event.getX();
    40                     startY = (int) event.getY();
    41                     break;
    42                 case MotionEvent.ACTION_MOVE://手指滑动
    43                     int newX = (int) event.getX();
    44                     int newY = (int) event.getY();
    45                     canvas.drawLine(startX, startY, newX, newY, paint);
    46                     //重新更新UI
    47                     iv.setImageBitmap(bitmap);
    48                     break;
    49                 case MotionEvent.ACTION_UP://手指离开屏幕
    50                     break;
    51                 }
    52
    53                 return true ;//true ---表示监听事件处理完了,   false---表示没有出来完监听事件
    54             }
    55         });
    56     }
    57 }

    运行效果如下:

这个画板程序是有问题的,就是他开始固定了划线的起始点(就是我们刚刚接触屏幕的点),然后就像如图那样好像散射一样。这是不行的。我们要不断地更新我们的划线的起始点;

MainActivity修改如下:

  1.  1 package com.himi.painter;
     2 import android.app.Activity;
     3 import android.graphics.Bitmap;
     4 import android.graphics.Canvas;
     5 import android.graphics.Color;
     6 import android.graphics.Paint;
     7 import android.os.Bundle;
     8 import android.view.MotionEvent;
     9 import android.view.View;
    10 import android.view.View.OnTouchListener;
    11 import android.widget.ImageView;
    12 public class MainActivity extends Activity {
    13     private ImageView iv;
    14     private Canvas canvas;
    15     private Paint paint;
    16     private Bitmap bitmap;
    17     @Override
    18     protected void onCreate(Bundle savedInstanceState) {
    19         super.onCreate(savedInstanceState);
    20         setContentView(R.layout.activity_main);
    21         iv = (ImageView) findViewById(R.id.iv);
    22         //创建一个空白的图片,以图片为模板创建一个画板
    23         bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
    24         //创建画板
    25         canvas  = new Canvas(bitmap);
    26         //创建画笔
    27         paint = new Paint();
    28         paint.setColor(Color.BLACK);
    29
    30         canvas.drawColor(0x22888888);
    31         iv.setImageBitmap(bitmap);
    32         iv.setOnTouchListener(new OnTouchListener() {
    33              //手在屏幕上的初始化坐标
    34             int startX;
    35             int startY;
    36             public boolean onTouch(View v, MotionEvent event) {
    37                 switch (event.getAction()) {
    38                 case MotionEvent.ACTION_DOWN://手指按下
    39                     startX = (int) event.getX();
    40                     startY = (int) event.getY();
    41                     break;
    42                 case MotionEvent.ACTION_MOVE://手指滑动
    43                     int newX = (int) event.getX();
    44                     int newY = (int) event.getY();
    45                     canvas.drawLine(startX, startY, newX, newY, paint);
    46                     //重新更新UI
    47                     iv.setImageBitmap(bitmap);
    48                     //很重要,重新给开始坐标赋值
    49                     startX = (int) event.getX();
    50                     startY = (int) event.getY();
    51                     break;
    52                 case MotionEvent.ACTION_UP://手指离开屏幕
    53                     break;
    54                 }
    55
    56                 return true ;//true ---表示监听事件处理完了,   false---表示没有出来完监听事件
    57             }
    58         });
    59     }
    60 }

    这时候画图板就正常了,如下:

3.画图板只能一种颜色,太单调,我们完善一下:

其中 activity_main.xml:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context="com.himi.painter.MainActivity" >
 7     <ImageView
 8         android:id="@+id/iv"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content" />
11     <LinearLayout
12         android:layout_width="match_parent"
13         android:layout_height="wrap_content"
14         android:orientation="horizontal" >
15         <View
16             android:id="@+id/red"
17             android:layout_width="20dip"
18             android:layout_height="20dip"
19             android:background="#ff0000"/>
20          <View
21              android:id="@+id/green"
22             android:layout_width="20dip"
23             android:layout_height="20dip"
24             android:background="#00ff00"/>
25           <View
26               android:id="@+id/blue"
27               android:layout_width="20dip"
28               android:layout_height="20dip"
29               android:background="#0000ff" />
30
31     </LinearLayout>
32 <!-- android:max="20" 进度条范围对应于  这里是针对画笔粗细范围设置为0~20 -->
33     <SeekBar
34         android:id="@+id/seekBar1"
35         android:max="100"
36         android:layout_width="match_parent"
37         android:layout_height="wrap_content" />
38     <Button
39         android:onClick="save"
40         android:layout_width="match_parent"
41         android:layout_height="wrap_content"
42         android:text="保存图片"/>
43
44
45 </LinearLayout>

其次是MainActivity.java:

  1 package com.himi.painter;
  2 import java.io.File;
  3 import java.io.FileOutputStream;
  4 import android.app.Activity;
  5 import android.content.Intent;
  6 import android.graphics.Bitmap;
  7 import android.graphics.Bitmap.CompressFormat;
  8 import android.graphics.Canvas;
  9 import android.graphics.Color;
 10 import android.graphics.Paint;
 11 import android.net.Uri;
 12 import android.os.Bundle;
 13 import android.os.Environment;
 14 import android.os.SystemClock;
 15 import android.view.MotionEvent;
 16 import android.view.View;
 17 import android.view.View.OnClickListener;
 18 import android.view.View.OnTouchListener;
 19 import android.widget.ImageView;
 20 import android.widget.SeekBar;
 21 import android.widget.SeekBar.OnSeekBarChangeListener;
 22 import android.widget.Toast;
 23 public class MainActivity extends Activity implements OnClickListener {
 24     private ImageView iv;
 25     private Canvas canvas;
 26     private Paint paint;
 27     private Bitmap bitmap;
 28     private View red,green,blue;
 29     private SeekBar seekBar1;
 30     @Override
 31     protected void onCreate(Bundle savedInstanceState) {
 32         super.onCreate(savedInstanceState);
 33         setContentView(R.layout.activity_main);
 34         iv = (ImageView) findViewById(R.id.iv);
 35         seekBar1 = (SeekBar) findViewById(R.id.seekBar1);
 36         red = (View) findViewById(R.id.red);
 37         green = (View) findViewById(R.id.green);
 38         blue = (View) findViewById(R.id.blue);
 39
 40         red.setOnClickListener(this);
 41         green.setOnClickListener(this);
 42         blue.setOnClickListener(this);
 43
 44         seekBar1.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
 45
 46             public void onStopTrackingTouch(SeekBar seekBar) {//停止拖动进度条,调用的方法
 47                 int size = seekBar.getProgress();
 48                 //设置画笔的粗细
 49                 paint.setStrokeWidth(size);
 50             }
 51
 52             public void onStartTrackingTouch(SeekBar seekBar) {//刚刚接触进度条,调用的方法
 53                 // TODO 自动生成的方法存根
 54
 55             }
 56
 57             public void onProgressChanged(SeekBar seekBar, int progress,
 58                     boolean fromUser) {//拖动进度条过程中,调用的方法
 59                 // TODO 自动生成的方法存根
 60
 61             }
 62         });
 63
 64         //创建一个空白的图片,以图片为模板创建一个画板
 65         bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
 66         //创建画板
 67         canvas  = new Canvas(bitmap);
 68         //创建画笔
 69         paint = new Paint();
 70         paint.setColor(Color.BLACK);
 71
 72         canvas.drawColor(0x22888888);
 73         iv.setImageBitmap(bitmap);
 74         iv.setOnTouchListener(new OnTouchListener() {
 75              //手在屏幕上的初始化坐标
 76             int startX;
 77             int startY;
 78             public boolean onTouch(View v, MotionEvent event) {
 79                 switch (event.getAction()) {
 80                 case MotionEvent.ACTION_DOWN://手指按下
 81                     startX = (int) event.getX();
 82                     startY = (int) event.getY();
 83                     break;
 84                 case MotionEvent.ACTION_MOVE://手指滑动
 85                     int newX = (int) event.getX();
 86                     int newY = (int) event.getY();
 87                     canvas.drawLine(startX, startY, newX, newY, paint);
 88                     //重新更新UI
 89                     iv.setImageBitmap(bitmap);
 90                     //很重要,重新给开始坐标赋值
 91                     startX = (int) event.getX();
 92                     startY = (int) event.getY();
 93                     break;
 94                 case MotionEvent.ACTION_UP://手指离开屏幕
 95                     break;
 96                 }
 97
 98                 return true ;//true ---表示监听事件处理完了,   false---表示没有出来完监听事件
 99             }
100         });
101     }
102     public void onClick(View v) {
103         switch (v.getId()) {
104         case R.id.red:
105             paint.setColor(Color.RED);
106             Toast.makeText(this, "设置画笔颜色为红色", 0).show();
107             break;
108         case R.id.green:
109             paint.setColor(Color.GREEN);
110             Toast.makeText(this, "设置画笔颜色为绿色", 0).show();
111             break;
112         case R.id.blue:
113             paint.setColor(Color.BLUE);
114             Toast.makeText(this, "设置画笔颜色为蓝色", 0).show();
115             break;
116         default:
117             break;
118         }
119     }
120
121     //保存图片
122     public void save(View view) {
123         try {
124             File file = new File(Environment.getExternalStorageDirectory(),SystemClock.uptimeMillis()+".png");
125             FileOutputStream stream = new FileOutputStream(file);
126             //第一个参数是保存的图片类型;第二个参数是画质(100是完美画质),第三个参数是输出流
127             //保存图片类型为PNG支持透明度
128             bitmap.compress(CompressFormat.PNG, 100, stream);
129             stream.close();
130             Toast.makeText(this, "保存成功,文件路径为:"+file.getAbsolutePath(), 0).show();
131
132             //Android手机系统自带"图库",里面只有开机的时候  或者是 插入SD卡时候才会扫描里面的资源,这里我们可以欺骗系统,模拟发送SD插入的广播给系统
133             Intent intent = new Intent();
134             intent.setAction(Intent.ACTION_MEDIA_MOUNTED);
135             intent.setData(Uri.fromFile(Environment.getExternalStorageDirectory()));
136             sendBroadcast(intent);
137         } catch (Exception e) {
138             // TODO 自动生成的 catch 块
139             e.printStackTrace();
140             Toast.makeText(this, "保存失败,请检查路径", 0).show();
141         }
142     }
143 }

运行结果如下:

保存图片:

SD保存数据如下:

导出图片1244274.png到桌面上,如下:

时间: 2024-10-21 21:05:49

Android(java)学习笔记238:多媒体之图片画画板案例的相关文章

Android学习笔记进阶之在图片上涂鸦(能清屏)

Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java [java] view plaincopy package xiaosi.handWriting; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import andro

java/android 设计模式学习笔记(2)---观察者模式

这篇来讲一下观察者模式,观察者模式在实际项目中使用的也是非常频繁的,它最常用的地方是GUI系统.订阅--发布系统等.因为这个模式的一个重要作用就是解耦,使得它们之间的依赖性更小,甚至做到毫无依赖.以GUI系统来说,应用的UI具有易变性,尤其是前期随着业务的改变或者产品的需求修改,应用界面也经常性变化,但是业务逻辑基本变化不大,此时,GUI系统需要一套机制来应对这种情况,使得UI层与具体的业务逻辑解耦,观察者模式此时就派上用场了. PS:对技术感兴趣的同鞋加群544645972一起交流. 设计模式

java/android 设计模式学习笔记(4)---抽象工厂模式

再来介绍一下抽象工厂模式(Abstact Factory Pattern),也是创建型模式之一,上篇博客主要介绍了工厂方法模式.抽象工厂模式和工厂方法模式稍有区别.工厂方法模式中工厂类生产出来的产品都是具体的,也就是说每个工厂都会生产某一种具体的产品,但是如果工厂类中所生产出来的产品是多种多样的,工厂方法模式也就不再适用了,就要使用抽象工厂模式了. 抽象工厂模式的起源或者最早的应用,是对不同操作系统的图形化解决方案,比如在不同操作系统中的按钮和文字框的不同处理,展示效果也不一样,对于每一个操作系

java/android 设计模式学习笔记(14)---外观模式

这篇博客来介绍外观模式(Facade Pattern),外观模式也称为门面模式,它在开发过程中运用频率非常高,尤其是第三方 SDK 基本很大概率都会使用外观模式.通过一个外观类使得整个子系统只有一个统一的高层的接口,这样能够降低用户的使用成本,也对用户屏蔽了很多实现细节.当然,在我们的开发过程中,外观模式也是我们封装 API 的常用手段,例如网络模块.ImageLoader 模块等.其实我们在开发过程中可能已经使用过很多次外观模式,只是没有从理论层面去了解它. 转载请注明出处:http://bl

java/android 设计模式学习笔记(10)---建造者模式

这篇博客我们来介绍一下建造者模式(Builder Pattern),建造者模式又被称为生成器模式,是创造性模式之一,与工厂方法模式和抽象工厂模式不同,后两者的目的是为了实现多态性,而 Builder 模式的目的则是为了将对象的构建与展示分离.Builder 模式是一步一步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细地控制对象的构造流程.一个复杂的对象有大量的组成部分,比如汽车它有车轮.方向盘.发动机.以及各种各样的小零件,要将这些部件装配成一辆汽车,这个装配过

java/android 设计模式学习笔记(一)---单例模式

前段时间公司一些同事在讨论单例模式(我是最渣的一个,都插不上嘴 T__T ),这个模式使用的频率很高,也可能是很多人最熟悉的设计模式,当然单例模式也算是最简单的设计模式之一吧,简单归简单,但是在实际使用的时候也会有一些坑. PS:对技术感兴趣的同鞋加群544645972一起交流 设计模式总目录 java/android 设计模式学习笔记目录 特点 确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的使用很广泛,比如:线程池(threadpool).缓存(cache).对

java/android 设计模式学习笔记(7)---装饰者模式

这篇将会介绍装饰者模式(Decorator Pattern),装饰者模式也称为包装模式(Wrapper Pattern),结构型模式之一,其使用一种对客户端透明的方式来动态的扩展对象的功能,同时它也是继承关系的一种替代方案之一,但比继承更加灵活.在现实生活中也可以看到很多装饰者模式的例子,或者可以大胆的说装饰者模式无处不在,就拿一件东西来说,可以给它披上无数层不一样的外壳,但是这件东西还是这件东西,外壳不过是用来扩展这个东西的功能而已,这就是装饰者模式,装饰者的这个角色也许各不相同但是被装饰的对

java/android 设计模式学习笔记(13)---享元模式

这篇我们来介绍一下享元模式(Flyweight Pattern),Flyweight 代表轻量级的意思,享元模式是对象池的一种实现.享元模式用来尽可能减少内存使用量,它适合用于可能存在大量重复对象的场景,缓存可共享的对象,来达到对象共享和避免创建过多对象的效果,这样一来就可以提升性能,避免内存移除和频繁 GC 等. 享元模式的一个经典使用案例是文本系统中图形显示所用的数据结构,一个文本系统能够显示的字符种类就是那么几十上百个,那么就定义这么些基础字符对象,存储每个字符的显示外形和其他的格式化数据

java/android 设计模式学习笔记(12)---组合模式

这篇我们来介绍一下组合模式(Composite Pattern),它也称为部分整体模式(Part-Whole Pattern),结构型模式之一.组合模式比较简单,它将一组相似的对象看作一个对象处理,并根据一个树状结构来组合对象,然后提供一个统一的方法去访问相应的对象,以此忽略掉对象与对象集合之间的差别.这个最典型的例子就是数据结构中的树了,如果一个节点有子节点,那么它就是枝干节点,如果没有子节点,那么它就是叶子节点,那么怎么把枝干节点和叶子节点统一当作一种对象处理呢?这就需要用到组合模式了. 转