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 }

    运行效果如下:

 
Android(java)学习笔记181:多媒体之图片画画板案例_bundle
这个画板程序是有问题的,就是他开始固定了划线的起始点(就是我们刚刚接触屏幕的点),然后就像如图那样好像散射一样。这是不行的。我们要不断地更新我们的划线的起始点;
 
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 }

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

Android(java)学习笔记181:多媒体之图片画画板案例_保存图片_02
 
 
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 }

运行结果如下:

 

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

 

保存图片:

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

 

SD保存数据如下:

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

 

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

Android(java)学习笔记181:多媒体之图片画画板案例_保存图片_06