android項目 之 記事本（6）----- 添加手寫

android項目 之 記事本（6）----- 添加手寫

想必大家都用過QQ的白板功能，裡面主要有兩項，一個是塗鴉功能，其實類似於上節的畫板功能，而另一個就是手寫，那記事本怎麼能沒有這個功能呢，今天就來為我們的記事本添加手寫功能。

先，看看效果：

看了，是不是心動了呢？那就趕緊著手做吧，其實，手寫功能並不難實現，大體就是全屏書寫，定時發送handle訊息，更新activity。

實現手寫功能的主要步驟：

1. 自訂兩個View,一個是TouchView,用於在上面畫圖，另一個是EditText,用於將手寫的字顯示在其中，並且，要將兩個自訂View通過FrameLayout幀式布局重疊在起，以實現全屏手寫的功能。

2 在TouchView中實現寫字，並截取畫布中的字以Bitmap儲存。

3. 設定定時器，利用handle更新介面。

 

下面是實現的細節：

1. 手寫的介面設計：

如所示，和上節的畫板介面一致，底部分選項功能表列，有5個選項，分別是調整畫筆大小，畫筆顏色，撤銷，恢複，以及清空，對於這些功能，之後幾節再實現。

布局檔案activity_handwrite.xml

可以看出，裡面有兩個自訂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();}    @Override    protected 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();//清空path        mPath.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() {        @Override    public 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}            }        //處理介面事件    @Override    public 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);   }    

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