ImageView实现画画板的功能

1，使用虚拟机加载的图片是只读的，不能对其进行其他的操作。这在上一篇文章中已介绍，要想对其进行其他操作，还是同一个方法，就是创建其副本，对副本进行操作。

2，下面通过此知识点，再介绍一个通过ImageView实现画画板的功能。

3，先用作图工具画出一个画板的底色图（rt.png），作为原图：

4,以底色图为原图，创建其副本，在副本上实现画画板的功能：

a，实现类中的java代码：

public class MainActivity extends Activity{

private  ImageView  iView;
private  Paint  paint;
private  Canvas  canvas;
private  Bitmap  bmCopy;
private  int  startX;
private  int  startY;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_main);
//加载资源id的图片
Bitmap bmSrc = BitmapFactory.decodeResource(getResources(), R.drawable.rt);
//创建副本
//1，创建一个和原图大小一样的白纸
bmCopy = Bitmap.createBitmap(bmSrc.getWidth(), bmSrc.getHeight(), bmSrc.getConfig());
//2，创建画笔
paint = new Paint();
//3，创建画板
canvas = new Canvas(bmCopy);
//4，开始绘画
canvas.drawBitmap(bmSrc, new Matrix(), paint);

iView = (ImageView) findViewById(R.id.iv);
//把拷贝的图片显示在视图上
iView.setImageBitmap(bmCopy);

//设置触摸监听
iView.setOnTouchListener(new  OnTouchListener() {
@Override
public boolean onTouch(View  v, MotionEvent  event) {
// 获取当前触摸事件的Action
int action = event.getAction();
switch (action) {
//手指按下
case MotionEvent.ACTION_DOWN:
//获取绘画开始的位置
startX = (int) event.getX();
startY = (int) event.getY();
break;
//手指滑动
case MotionEvent.ACTION_MOVE:
//获取手指滑动到新的位置
int newStartX = (int) event.getX();
int newStartY = (int) event.getY();
//开始绘画
canvas.drawLine(startX, startY, newStartX, newStartY, paint);
//手指滑动过程要不断初始化开始位置，不然开始位置不变
startX = newStartX;
startY = newStartY;
//重新设置iv显示副本
iView.setImageBitmap(bmCopy);
break;
//手指抬起
case MotionEvent.ACTION_UP:
System.out.println("手指离开了屏幕");
break;
}
//如果设置为true，那么这个触摸事件由该组件控制
return true;
}
});
}
//改变画笔的颜色及粗细
//绿色画笔
public void doGreen(View v){
paint.setColor(Color.GREEN);
}
//红色画笔
public void doRed(View v){
paint.setColor(Color.RED);
}

//黄色画笔
public void doYellow(View v){
paint.setColor(Color.YELLOW);
}
//改变粗细
public void doBrush(View v){
paint.setStrokeWidth(10);
}
}

b，layout布局文件：

<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.example.painter.MainActivity$PlaceholderFragment" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/rt" />

    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_below="@id/iv"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">
        
        <Button 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:onClick="doGreen"
            android:text="绿色"
            android:textSize="20sp"
            android:textColor="#00ffff"/>
        <Button 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:onClick="doRed"
            android:text="红色"
            android:textSize="20sp"
            android:textColor="#ff0000"/>

    <Button 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:onClick="doYellow"
            android:text="黄色"
            android:textSize="20sp"
            android:textColor="#ffff00"/>
        <Button 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:onClick="doBrush"
            android:text="刷子"
            android:textSize="20sp" />
        
    </LinearLayout>
</RelativeLayout>

c，最终的实现效果：