androidcanvas撤銷

① android開發中如何實現手寫輸入的記事本

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

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="http://schemas.android.com/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.schele(task, 1000, 1000); //2200秒後發送消息給handler更新Activity

}

}else {

timer = new Timer(true);

timer.schele(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);

}

② android canvas.drawcircle 為什麼畫不出圓

繪制圓的話,drawcircle需要傳圓心坐標和半徑大小/畫筆進去,我猜你缺少對應的參數,可以參考如下代碼:
mPaint.setAntiAlias(false); //設置畫筆為無鋸齒
mPaint.setColor(Color.BLACK); //設置畫筆顏色
canvas.drawColor(Color.WHITE); //白色背景
mPaint.setStrokeWidth((float) 3.0); //線寬
mPaint.setStyle(Paint.Style.STROKE); //空心效果

canvas.drawCircle(50, 50, 10, mPaint); //繪制圓形
canvas.drawCircle(100, 100, 20, mPaint); //繪制圓形
canvas.drawCircle(150, 150, 30, mPaint); //繪制圓形
canvas.drawCircle(200, 200, 40, mPaint); //繪制圓形
canvas.drawCircle(250, 250, 50, mPaint); //繪制圓形
canvas.drawCircle(300, 300, 60, mPaint); //繪制圓形
canvas.drawCircle(350, 350, 70, mPaint); //繪制圓形

③ android 上用canvas繪圖之後，我想清除怎麼辦

canvas繪圖是在onDraw里觸發的。而每次onDraw的時候，其實是重新繪制canvas數據的，也就是如果你什麼都不畫，canvas上就沒有東西了。因此你只要在每次觸發onDraw之後，把需要畫的內容畫出來即可。比如，假設人頭的數據是bitmapHead，兩種發型分別是bitmapStyle1, bitmapStyle 2,你就可以這樣畫(偽代碼)：

intcurrentType=0;
onDraw(canvas){
canvas.draw(bitmapHead);//這個是必定要畫的
switch(currentType){
caseSTYLE1:
canvas.draw(bitmapStyle1);
break;
caseSTYLE2:
canvas.draw(bitmapStyle2);
break;
}
}

④ android canvas的drawText方法 如何設置字體大小和格式。

Canvas相當於畫布，字體的大小格式在Paint上設置才正確， Paint 相當於畫筆。代碼如下，沒有具體參數：

Paint paint = new Paint();

paint.setTextSize(textSize);//設置字體大小

paint.setTypeface(typeface);//設置字體類型

canvas.drawText(text, x, y, paint);//使用畫筆paint

@Override

public void onDraw (Canvas canvas) {

Rect targetRect = new Rect(50, 50, 1000, 200);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

paint.setStrokeWidth(3);

paint.setTextSize(80);

String testString = "測試：ijkJQKA:1234";

paint.setColor(Color.CYAN);

canvas.drawRect(targetRect, paint);

paint.setColor(Color.RED);

FontMetricsInt fontMetrics = paint.getFontMetricsInt();

(4)androidcanvas撤銷擴展閱讀：

Screen Space - Camera

此模式類似Screen Space - Overlay，但區別是此模式將Canvas放置於某個Camera前固定距離。此Camera負責渲染所有UI元素，則攝像機參數（Camera Settings）直接影響UI表現。

比如Camera是透視模式（Perspective），則UI元素會基於Field of View的值而扭曲變形。同樣的，若屏幕解析度變更，或者視覺平截體（CameraFrustrum）改變，則Canvas自動調整自身尺寸作自適應。

⑤ Android繪圖之Canvas變換（6）

前面講解了Canvas的基本概念， Android繪圖之Canvas概念理解（5） ，
對Canvas的概念進行了分析，但是沒有說明和屏幕的關系，Canvas不等於屏幕，屏幕不會動的，我們也無法對屏幕進行（平移，縮放等）操作，只能對Canvas進行操作，所以對Canvas進行操作，屏幕不動，最終會導致看到的圖像不同。

下面開始講解Canvas的變幻操作：
包括：translate,rotate,scale,skew,clip，clipout，matrix

先從最簡單的平移開始：

對Canvas進行平移，
dx: x軸方向進行平移,正值向屏幕右側
dy：y軸方向進行平移，正值向屏幕下方

繪制兩個點查看原點位置。

原點顯然改變了，以後再繪制任何形狀都是以translate後的原點開始繪制。

參數說明
sx:橫向的縮放，默認為1，小數縮小，整數放大
sy:縱向的縮放，默認為1，小數縮小，整數放大

px，py，看源碼知道是先translate，執行sx,sy然後再translate反方向。
第二次translate的坐標為（-px sx,-px sy）,最終的效果就是px,py是縮放後不動的點。

縮放後坐標減半。

如果想控制縮放後的位置，如何控制呢，這就需要第二個函數。

還可以控制其他位置，例如控制縮放後在中心。

rotate有兩個函數：
rotate(float degrees)
rotate(float degrees, float px, float py)
Degree:旋轉的角度，正值為順時針，負值為逆時針
Px,py:旋轉的中心，如果不指定旋轉中心默認為（0,0）點

指定旋轉中心為矩形中心

參數說明：
sx:畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，
sy:畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值，

根據矩形或者路徑裁剪畫布，畫布被切割之後，只有部分區域可用，其他區域無法繪制內容。
Clip函數切割的區域可用，clipOut未被切割的區域可用。（過時函數不再講解）

Matrix提供了一些方法來控制變換：

android繪圖之Paint(1)
android繪圖之Canvas基礎（2）
Android繪圖之Path（3）
Android繪圖之drawText繪制文本相關（4）
Android繪圖之Canvas概念理解（5）
Android繪圖之Canvas變換（6）
Android繪圖之Canvas狀態保存和恢復（7）
Android繪圖之PathEffect （8）
Android繪圖之LinearGradient線性漸變（9）
Android繪圖之SweepGradient（10）
Android繪圖之RadialGradient 放射漸變（11）
Android繪制之BitmapShader（12）
Android繪圖之ComposeShader，PorterDuff.mode及Xfermode（13）
Android繪圖之drawText,getTextBounds,measureText,FontMetrics,基線（14）
Android繪圖之貝塞爾曲線簡介（15）
Android繪圖之PathMeasure（16）
Android 動態修改漸變 GradientDrawable