Android画板

    最近Android刚刚上手，还没有很熟练，只写了一个小小的画板。Android画板其实实现方法跟以前的Java中的画板也差不太多，只是具体细节有所差异，思想还是一样的。

 

    先来了解一下要用到的几个重要的类，跟Java画板一个graphics类不太一样。

     1、Bitmap，字面意思是位图，相当于一个图片用来存放要画的东西，也就是图片的存储空间。

     2、Canvas，意思是画布，一直不太理解这个的作用所以特地百度了一下。意思是可以把它看做一种处理过程，运用各种方法来管理Bitmap，跟Bitmap联系十分紧密，所以实例化canvas对象的时候一般要传bitmap参数进去。

     3、Paint，画笔。这个应该是比较好理解的，就是笔刷啊，画笔之类的工具，可见也是不可或缺的。

 

     首先这个画板是有用自定义组件来实现的，因为直接用Android里的组件的话触屏的坐标是不准的，原因不详。自定义组件首先定义一个DrawView类，让它继承View类，在类里面把View 的三个构造方法都要重写一遍，然后在里面定义上面三个类的对象，这里三个构造方法最好是在前两个里面调用第三个。  然后在类里面重写onDraw和onTouchEvent两个方法，onDraw函数是用来绘制图形界面的，onTouchEvent函数是用来处理手机屏幕事件的。所以在onTouchEvent函数里面处理完手机屏幕事件要加上this.invalidate()，也就是调用onDraw方法。

package com.example.drawview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class DrawView extends View {
	private Bitmap bitmap;
	private Canvas canvas;
	public Paint paint;
	public String shape ="直线";
	private float x1, x2, y1, y2;

	// 构造方法
	public DrawView(Context context) {
		this(context,null,0);
	}

	public DrawView(Context context, AttributeSet attrs) {
		this(context, attrs,0);
		paint = new Paint();
	}

	public DrawView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		canvas.drawColor(Color.GRAY);
		// 判读bitmap是否为null
		if (bitmap == null) {
			// 创建bitmap对象
			bitmap = Bitmap.createBitmap(getWidth(), getHeight(),Config.ARGB_8888);
			//实例化canvas对象
			this.canvas = new Canvas(bitmap);
		}
		canvas.drawBitmap(bitmap, 0, 0, paint);

	}

	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN://按下
			x1 = event.getX();
			y1 = event.getY();
			break;
		case MotionEvent.ACTION_UP://松开
			x2 = event.getX();
			y2 = event.getY();
			if(shape.equals("直线")){
				canvas.drawLine(x1, y1, x2, y2, paint);
			}else if (shape.equals("矩形")){
				canvas.drawRect(x1,y1,x2,y2, paint);
			}else if (shape.equals("圆")){
				canvas.drawCircle(x1, y1, Math.abs(x1-x2), paint);
			} 
			break;
		case MotionEvent.ACTION_MOVE://移动
			x2 = event.getX();
			y2 = event.getY();
			if(shape.equals("曲线")){
				this.canvas.drawLine(x1, y1, x2, y2, paint);
				x1 = x2;
				y1 = y2;
			}
			break;
		}
		this.invalidate();//调用onDraw方法
		return true;
	}

}

 

     然后可以添加菜单来提供颜色、图形、画笔粗细等选项。

    先找到res文件夹，然后找到values文件夹下的strings.xml文件，添加窗体中显示的文本值。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">DrawView</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    
    
    <string name="color">颜色选择</string>
    <string name="color_red">红色</string>
    <string name="color_green">绿色</string>
    <string name="color_blue">蓝色</string>
    
    <string name="shape">图形选择</string>
    <string name="shape_line">直线</string>
     <string name="shape_curve">曲线</string>
    <string name="shape_circle">园</string>
    <string name="shape_rect">矩形</string>
    
    <string name="stroke">线条粗细</string>
    <string name="stroke_1">1个像素</string>
    <string name="stroke_3">3个像素</string>
    <string name="stroke_5">5个像素</string>

</resources>

 

     然后在menu文件夹下的main.xml文件里就可以添加菜单了。

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/color" android:enabled="true"
        android:title="@string/color">
        <menu>
            <group android:checkableBehavior="single" android:enabled="true">
                <item android:id="@+id/color_red"
                      android:title="@string/color_red"/>
                <item android:id="@+id/color_green"
                      android:title="@string/color_green"/>
                <item android:id="@+id/color_blue"
                      android:title="@string/color_blue"/>
            </group>
        </menu>
    </item>
    
    <item android:id="@+id/shape" android:title="@string/shape">
        <menu>
            <group android:checkableBehavior="single" android:enabled="true">
                <item android:id="@+id/shape_line"
                      android:title="@string/shape_line"/>
                <item android:id="@+id/shape_circle"
                      android:title="@string/shape_circle"/>
                <item android:id="@+id/shape_rect" android:checkable="true"
                    
                      android:title="@string/shape_rect"/>
                <item android:id="@+id/shape_curve"
                      android:title="@string/shape_curve"/>
            </group>
        </menu>
    </item>
 
     <item android:id="@+id/stroke" android:title="@string/stroke">
        <menu>
            <group android:checkableBehavior="single" android:enabled="true">
                <item android:id="@+id/stroke_1"
                      android:title="@string/stroke_1"/>
                <item android:id="@+id/stroke_3"
                      android:title="@string/stroke_3"/>
                <item android:id="@+id/stroke_5"
                      android:title="@string/stroke_5"/>
            </group>
        </menu>
    </item>
    
</menu>

 

     最后在MainActivity里调用onMenuItemSelected函数来实现对菜单选择的操作。

package com.example.drawview;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {
	
	private DrawView dv;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		dv = (DrawView) this.findViewById(R.id.drawView1);
	}


	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		
		return true;
	}

	public boolean onMenuItemSelected(int featureId, MenuItem item) {
		//System.out.println("item.getItemId()"+item.getItemId());
		switch(item.getItemId()){
		case R.id.color_blue:
			dv.paint.setColor(Color.BLUE);
			break;
		case R.id.color_green:
			dv.paint.setColor(Color.GREEN);
			break;
		case R.id.color_red:
			dv.paint.setColor(Color.RED);
			break;
		case R.id.shape_circle:
			dv.shape = "圆";
			break;
		case R.id.shape_line:
			dv.shape = "直线";
			break;
		case R.id.shape_curve:
			dv.shape = "曲线";
			break;
		case R.id.shape_rect:
			dv.shape = "矩形";
			break;
		case R.id.stroke_1:
			dv.paint.setStrokeWidth(1);
			break;
		case R.id.stroke_3:
			dv.paint.setStrokeWidth(3);
			break;
		case R.id.stroke_5:
			dv.paint.setStrokeWidth(5);
			break;
		}
		
		return super.onMenuItemSelected(featureId, item);
	}
}