android项目 之 记事本（6）----- 加入手写

       想必大家都用过QQ的白板功能，里面主要有两项，一个是涂鸦功能，事实上类似于上节的画板功能，而还有一个就是手写，那记事本怎么能没有这个功能呢，今天就来为我们的记事本加入手写功能。

       先上图，看看效果：

       看了效果图，是不是心动了呢？那就赶紧着手做吧，事实上，手写功能并不难实现，大体就是全屏书写，定时发送handle消息，更新activity。

       实现手写功能的主要步骤：

             1. 自己定义两个View,一个是TouchView,用于在上面绘图，还有一个是EditText,用于将手写的字显示在当中，而且，要将两个自己定义View通过FrameLayout帧式布局重叠在起，以实现全屏手写的功能。

             2  在TouchView中实现写字，并截取画布中的字以Bitmap保存。

             3. 设置定时器，利用handle更新界面。

       

        以下是实现的细节：

            1. 手写的界面设计：

                      如上图所看到的，和上节的画板界面一致，底部分选项菜单条，有5个选项，各自是调整画笔大小，画笔颜色，撤销，恢复，以及清空，对于这些功能，之后几节再实现。

                    布局文件activity_handwrite.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/white"><FrameLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:id="@+id/finger_layout"  ><com.example.notes.LineEditTextandroid:id="@+id/et_handwrite"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbars="vertical"android:fadingEdge="vertical"android:inputType="textMultiLine"android:gravity="top"android:textSize="20sp"android:layout_margin="5dp"android:focusable="true"android:lineSpacingExtra="10dp"android:textColor="#00000000"android:background="#00000000"/><com.example.notes.TouchViewandroid:id="@+id/touch_view"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@android:color/transparent" ></com.example.notes.TouchView></FrameLayout><ImageView android:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/line"android:layout_above="@+id/paintBottomMenu"/><GridView android:id="@+id/paintBottomMenu" android:layout_width="match_parent"android:layout_height="45dp"android:numColumns="auto_fit"android:background="@drawable/navigationbar_bg"android:horizontalSpacing="10dp"android:layout_alignParentBottom="true"></GridView></RelativeLayout>

                 能够看出，里面有两个自己定义view，而且通过FrameLayout重叠在一起。       

           

                先来看com.example.notes.LineEditText，这个事实上和加入记事中的界面一样，就是自己定义EditText,而且在字的以下画一条线。

         LineEditText.java

public class LineEditText extends EditText {private Rect mRect;private Paint mPaint;public LineEditText(Context context, AttributeSet attrs) {// TODO Auto-generated constructor stubsuper(context,attrs);mRect = new Rect();mPaint = new Paint();mPaint.setColor(Color.GRAY);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//得到EditText的总行数int lineCount = getLineCount();Rect r = mRect;Paint p = mPaint;//为每一行设置格式 for(int i = 0; i < lineCount;i++){//取得每一行的基准Y坐标，并将每一行的界限值写到r中int baseline = getLineBounds(i, r);//设置每一行的文字带下划线canvas.drawLine(r.left, baseline+20, r.right, baseline+20, p);}}
}

         还有一个就是com.example.notes.TouchView，实现了绘制，及定时更新界面的功能，详细看代码

         TouchView.java

public class TouchView extends View {private Bitmap  mBitmap,myBitmap;private Canvas  mCanvas;private Path    mPath;private Paint   mBitmapPaint;private Paint mPaint;private Handler bitmapHandler;GetCutBitmapLocation getCutBitmapLocation;private Timer timer;DisplayMetrics dm;private int w,h;public TouchView(Context context) {super(context);dm = new DisplayMetrics();((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);w = dm.widthPixels;h = dm.heightPixels;initPaint();}public TouchView(Context context, AttributeSet attrs) {super(context,attrs);dm = new DisplayMetrics();((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);w = dm.widthPixels;h = dm.heightPixels;initPaint();}//设置handlerpublic void setHandler(Handler mBitmapHandler){bitmapHandler = mBitmapHandler;}//初始化画笔，画布private void initPaint(){mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setDither(true);mPaint.setColor(0xFF00FF00);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeJoin(Paint.Join.ROUND);mPaint.setStrokeCap(Paint.Cap.ROUND);mPaint.setStrokeWidth(15);  getCutBitmapLocation = new GetCutBitmapLocation();//画布大小 mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);mCanvas = new Canvas(mBitmap);  //全部mCanvas画的东西都被保存在了mBitmap中mCanvas.drawColor(Color.TRANSPARENT);mPath = new Path();mBitmapPaint = new Paint(Paint.DITHER_FLAG);timer = new Timer(true);}/*** 处理屏幕显示*/Handler handler = new Handler(){public void handleMessage(Message msg) {switch (msg.what) {			case 1:	myBitmap = getCutBitmap(mBitmap); Message message = new Message();message.what=1;Bundle bundle = new Bundle();;bundle.putParcelable("bitmap",myBitmap);message.setData(bundle);bitmapHandler.sendMessage(message);RefershBitmap();break;}super.handleMessage(msg);}};/*** 发送消息给handler更新ACTIVITY		*/TimerTask task = new TimerTask() {public void run() {Message message = new Message();message.what=1;Log.i("线程", "来了");handler.sendMessage(message);}};//分割画布中的字并返回public Bitmap getCutBitmap(Bitmap mBitmap){//得到手写字的四周位置，并向外延伸10pxfloat cutLeft = getCutBitmapLocation.getCutLeft() - 10;float cutTop = getCutBitmapLocation.getCutTop() - 10;float cutRight = getCutBitmapLocation.getCutRight() + 10;float cutBottom = getCutBitmapLocation.getCutBottom() + 10;cutLeft = (0 > cutLeft ? 0 : cutLeft);cutTop = (0 > cutTop ? 0 : cutTop);cutRight = (mBitmap.getWidth() < cutRight ? mBitmap.getWidth() : cutRight);cutBottom = (mBitmap.getHeight() < cutBottom ? mBitmap.getHeight() : cutBottom);//取得手写的的高度和宽度 float cutWidth = cutRight - cutLeft;float cutHeight = cutBottom - cutTop;Bitmap cutBitmap = Bitmap.createBitmap(mBitmap, (int)cutLeft, (int)cutTop, (int)cutWidth, (int)cutHeight);if (myBitmap!=null ) {myBitmap.recycle();myBitmap= null;}return cutBitmap;}//刷新画布private void RefershBitmap(){initPaint();invalidate();if(task != null)task.cancel();}@Overrideprotected void onDraw(Canvas canvas) {            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);     //显示旧的画布       canvas.drawPath(mPath, mPaint);  //画最后的path}private float mX, mY;private static final float TOUCH_TOLERANCE = 4;//手按下时private void touch_start(float x, float y) {mPath.reset();//清空pathmPath.moveTo(x, y);mX = x;mY = y;if(task != null)task.cancel();//取消之前的任务task = new TimerTask() {@Overridepublic void run() {Message message = new Message();message.what=1;Log.i("线程", "来了");handler.sendMessage(message);}};getCutBitmapLocation.setCutLeftAndRight(mX,mY);}//手移动时private void touch_move(float x, float y) {float dx = Math.abs(x - mX);float dy = Math.abs(y - mY);if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {mPath.quadTo(mX, mY, x, y);// mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);//源码是这样写的，但是我没有弄明确，为什么要这样？mX = x;mY = y;if(task != null)task.cancel();//取消之前的任务task = new TimerTask() {@Overridepublic void run() {Message message = new Message();message.what=1;Log.i("线程", "来了");handler.sendMessage(message);}};getCutBitmapLocation.setCutLeftAndRight(mX,mY);}}//手抬起时private void touch_up() {//mPath.lineTo(mX, mY);mCanvas.drawPath(mPath, mPaint);mPath.reset();if (timer!=null) {if (task!=null) {task.cancel();task = new TimerTask() {public void run() {Message message = new Message();message.what = 1;handler.sendMessage(message);}};timer.schedule(task, 1000, 1000);				//2200秒后发送消息给handler更新Activity}}else {timer = new Timer(true);timer.schedule(task, 1000, 1000);					//2200秒后发送消息给handler更新Activity}}//处理界面事件@Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:touch_start(x, y);invalidate(); //刷新break;case MotionEvent.ACTION_MOVE:touch_move(x, y);invalidate();break;case MotionEvent.ACTION_UP:touch_up();invalidate();break;}return true;}}

        这里面的难点就是利用TimerTask和Handle来更新界面显示，须要在onTouchEvent的三个事件中都要通过handle发送消息来更新显示界面。

        

       接下来就是在activity里通过handle来得到绘制的字，并加入在editText中。

       关于配置底部菜单，以及顶部标题栏，这里不再赘述，直接怎样将绘制的字得到，并加入在edittext中：

      

         得到绘制字体的Bitmap

	   //处理界面Handler handler = new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);Bundle bundle = new Bundle();bundle = msg.getData();Bitmap myBitmap = bundle.getParcelable("bitmap");	InsertToEditText(myBitmap);}};

          当中myBitmap就是取得的手写字，保存在Bitmap中，  InsertToEditText(myBitmap);是将该图片加入在edittext中,详细例如以下：

	private LineEditText et_handwrite;      

	et_handwrite = (LineEditText)findViewById(R.id.et_handwrite);

                   

	   //将手写字插入到EditText中private void InsertToEditText(Bitmap mBitmap){int imgWidth = mBitmap.getWidth();int imgHeight = mBitmap.getHeight();//缩放比例float scaleW = (float) (80f/imgWidth);float scaleH = (float) (100f/imgHeight);Matrix mx = new Matrix();//对原图片进行缩放mx.postScale(scaleW, scaleH);mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, imgWidth, imgHeight, mx, true);//将手写的字插入到edittext中SpannableString ss = new SpannableString("1");ImageSpan span = new ImageSpan(mBitmap, ImageSpan.ALIGN_BOTTOM);ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);et_handwrite.append(ss);}

            这样，就实现了手写的功能，下节就实现手写字的撤销，恢复，以及清空的功能。