實現手寫功能的主要步驟：
1. 自定義兩個View,壹個是TouchView,用於在上面畫圖，另壹個是EditText,用於將手寫的字顯示在其中，並且，要將兩個自定義View通過FrameLayout幀式布局重疊在起，以實現全屏手寫的功能。
2 在TouchView中實現寫字，並截取畫布中的字以Bitmap保存。
3. 設置定時器，利用handle更新界面。
下面是實現的細節：
1. 手寫的界面設計：
如上圖所示，和上節的畫板界面壹致，底部分選項菜單欄，有5個選項，分別是調整畫筆大小，畫筆顏色，撤銷，恢復，以及清空，對於這些功能，之後幾節再實現。
布局文件activity_handwrite.xml
<!--?xml version=1.0 encoding=utf-8?-->
<relativelayout android:background="@android:color/white" android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="/apk/res/android"><imageview android:layout_above="@+id/paintBottomMenu" android:layout_height="wrap_content" android:layout_width="match_parent" android:src="@drawable/line">?
</imageview></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 stub
super(context,attrs);
mRect = new Rect();
mPaint = new Paint();
mPaint.setColor(Color.GRAY);
}
?
@Override
protected 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();
}
//設置handler
public 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){
//得到手寫字的四周位置，並向外延伸10px
float 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() {
?
@Override
public 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(){?@Override
?public 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中,具體如下：
1
private LineEditText et_handwrite;
1
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);
}