Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android項目 之 記事本(6)----- 添加手寫

android項目 之 記事本(6)----- 添加手寫

編輯:關於Android編程

想必大家都用過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 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中,具體如下:

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

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

 

 

 

 

 

 

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved