Android（java）学习笔记181：多媒体之图片画画板案例

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

1. <RelativeLayout 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"
       tools:context="com.himi.painter.MainActivity" >
       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:id="@+id/iv" />
   </RelativeLayout>

2.初步编写MainActivity.java，如下：

1. package com.himi.painter;
   import android.app.Activity;
   import android.graphics.Bitmap;
   import android.graphics.Canvas;
   import android.graphics.Color;
   import android.graphics.Paint;
   import android.os.Bundle;
   import android.view.MotionEvent;
   import android.view.View;
   import android.view.View.OnTouchListener;
   import android.widget.ImageView;
   public class MainActivity extends Activity {
       private ImageView iv;
       private Canvas canvas;
       private Paint paint;
       private Bitmap bitmap;
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           iv = (ImageView) findViewById(R.id.iv);
           //创建一个空白的图片，以图片为模板创建一个画板
           bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
           //创建画板
           canvas  = new Canvas(bitmap);
           //创建画笔
           paint = new Paint();
           paint.setColor(Color.BLACK);
           
           canvas.drawColor(0x22888888);
           iv.setImageBitmap(bitmap);
           iv.setOnTouchListener(new OnTouchListener() {
                //手在屏幕上的初始化坐标
               int startX;
               int startY;
               public boolean onTouch(View v, MotionEvent event) {
                   switch (event.getAction()) {
                   case MotionEvent.ACTION_DOWN://手指按下
                       startX = (int) event.getX();
                       startY = (int) event.getY();
                       break;
                   case MotionEvent.ACTION_MOVE://手指滑动
                       int newX = (int) event.getX();
                       int newY = (int) event.getY();
                       canvas.drawLine(startX, startY, newX, newY, paint);
                       //重新更新UI
                       iv.setImageBitmap(bitmap);
                       break;
                   case MotionEvent.ACTION_UP://手指离开屏幕
                       break;
                   }
                   
                   return true ;//true ---表示监听事件处理完了,   false---表示没有出来完监听事件
               }
           });
       }
   }

   运行效果如下：

 

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

 

MainActivity修改如下：

1. package com.himi.painter;
   import android.app.Activity;
   import android.graphics.Bitmap;
   import android.graphics.Canvas;
   import android.graphics.Color;
   import android.graphics.Paint;
   import android.os.Bundle;
   import android.view.MotionEvent;
   import android.view.View;
   import android.view.View.OnTouchListener;
   import android.widget.ImageView;
   public class MainActivity extends Activity {
       private ImageView iv;
       private Canvas canvas;
       private Paint paint;
       private Bitmap bitmap;
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           iv = (ImageView) findViewById(R.id.iv);
           //创建一个空白的图片，以图片为模板创建一个画板
           bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
           //创建画板
           canvas  = new Canvas(bitmap);
           //创建画笔
           paint = new Paint();
           paint.setColor(Color.BLACK);
           
           canvas.drawColor(0x22888888);
           iv.setImageBitmap(bitmap);
           iv.setOnTouchListener(new OnTouchListener() {
                //手在屏幕上的初始化坐标
               int startX;
               int startY;
               public boolean onTouch(View v, MotionEvent event) {
                   switch (event.getAction()) {
                   case MotionEvent.ACTION_DOWN://手指按下
                       startX = (int) event.getX();
                       startY = (int) event.getY();
                       break;
                   case MotionEvent.ACTION_MOVE://手指滑动
                       int newX = (int) event.getX();
                       int newY = (int) event.getY();
                       canvas.drawLine(startX, startY, newX, newY, paint);
                       //重新更新UI
                       iv.setImageBitmap(bitmap);
                       //很重要,重新给开始坐标赋值
                       startX = (int) event.getX();
                       startY = (int) event.getY();
                       break;
                   case MotionEvent.ACTION_UP://手指离开屏幕
                       break;
                   }
                   
                   return true ;//true ---表示监听事件处理完了,   false---表示没有出来完监听事件
               }
           });
       }
   }

   这时候画图板就正常了，如下：

 

 

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

其中 activity_main.xml：

 

<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="com.himi.painter.MainActivity" >
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <View 
            android:id="@+id/red"
            android:layout_width="20dip"
            android:layout_height="20dip"
            android:background="#ff0000"/>
         <View
             android:id="@+id/green" 
            android:layout_width="20dip"
            android:layout_height="20dip"
            android:background="#00ff00"/>
          <View
              android:id="@+id/blue"
              android:layout_width="20dip"
              android:layout_height="20dip"
              android:background="#0000ff" />
            
    </LinearLayout>
<!-- android:max="20" 进度条范围对应于  这里是针对画笔粗细范围设置为0~20 -->
    <SeekBar
        android:id="@+id/seekBar1"
        android:max="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:onClick="save" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="保存图片"/>
        
        
</LinearLayout>

其次是MainActivity.java：

 

package com.himi.painter;
import java.io.File;
import java.io.FileOutputStream;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.Bitmap.CompressFormat;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.os.SystemClock;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Toast;
public class MainActivity extends Activity implements OnClickListener {
    private ImageView iv;
    private Canvas canvas;
    private Paint paint;
    private Bitmap bitmap;
    private View red,green,blue;
    private SeekBar seekBar1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
        seekBar1 = (SeekBar) findViewById(R.id.seekBar1);
        red = (View) findViewById(R.id.red);
        green = (View) findViewById(R.id.green);
        blue = (View) findViewById(R.id.blue);
        
        red.setOnClickListener(this);
        green.setOnClickListener(this);
        blue.setOnClickListener(this);
        
        seekBar1.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            
            public void onStopTrackingTouch(SeekBar seekBar) {//停止拖动进度条，调用的方法
                int size = seekBar.getProgress();
                //设置画笔的粗细
                paint.setStrokeWidth(size);
            }
            
            public void onStartTrackingTouch(SeekBar seekBar) {//刚刚接触进度条，调用的方法
                // TODO 自动生成的方法存根
                
            }
            
            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) {//拖动进度条过程中，调用的方法
                // TODO 自动生成的方法存根
                
            }
        });
        
        //创建一个空白的图片，以图片为模板创建一个画板
        bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
        //创建画板
        canvas  = new Canvas(bitmap);
        //创建画笔
        paint = new Paint();
        paint.setColor(Color.BLACK);
        
        canvas.drawColor(0x22888888);
        iv.setImageBitmap(bitmap);
        iv.setOnTouchListener(new OnTouchListener() {
             //手在屏幕上的初始化坐标
            int startX;
            int startY;
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN://手指按下
                    startX = (int) event.getX();
                    startY = (int) event.getY();
                    break;
                case MotionEvent.ACTION_MOVE://手指滑动
                    int newX = (int) event.getX();
                    int newY = (int) event.getY();
                    canvas.drawLine(startX, startY, newX, newY, paint);
                    //重新更新UI
                    iv.setImageBitmap(bitmap);
                    //很重要,重新给开始坐标赋值
                    startX = (int) event.getX();
                    startY = (int) event.getY();
                    break;
                case MotionEvent.ACTION_UP://手指离开屏幕
                    break;
                }
                
                return true ;//true ---表示监听事件处理完了,   false---表示没有出来完监听事件
            }
        });
    }
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.red:
            paint.setColor(Color.RED);
            Toast.makeText(this, "设置画笔颜色为红色", 0).show();
            break;
        case R.id.green:
            paint.setColor(Color.GREEN);
            Toast.makeText(this, "设置画笔颜色为绿色", 0).show();
            break;
        case R.id.blue:
            paint.setColor(Color.BLUE);
            Toast.makeText(this, "设置画笔颜色为蓝色", 0).show();
            break;
        default:
            break;
        }
    }
    
    //保存图片
    public void save(View view) {
        try {
            File file = new File(Environment.getExternalStorageDirectory(),SystemClock.uptimeMillis()+".png");
            FileOutputStream stream = new FileOutputStream(file);
            //第一个参数是保存的图片类型;第二个参数是画质(100是完美画质),第三个参数是输出流
            //保存图片类型为PNG支持透明度
            bitmap.compress(CompressFormat.PNG, 100, stream);
            stream.close();
            Toast.makeText(this, "保存成功，文件路径为："+file.getAbsolutePath(), 0).show();
            
            //Android手机系统自带"图库",里面只有开机的时候  或者是 插入SD卡时候才会扫描里面的资源，这里我们可以欺骗系统,模拟发送SD插入的广播给系统
            Intent intent = new Intent();
            intent.setAction(Intent.ACTION_MEDIA_MOUNTED);
            intent.setData(Uri.fromFile(Environment.getExternalStorageDirectory()));
            sendBroadcast(intent);
        } catch (Exception e) {
            // TODO 自动生成的 catch 块
            e.printStackTrace();
            Toast.makeText(this, "保存失败,请检查路径", 0).show();
        }
    }
}

运行结果如下：

 

保存图片：

SD保存数据如下：

导出图片1244274.png到桌面上，如下：