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);}

??????????? 這樣，就實現了手寫的功能，下節就實現手寫字的撤銷，恢復，以及清空的功能。

????????? ???????

????????????

??????????????

?

?

?

??????