Android觸控事件實現筆觸畫布

摘要： 任何View都有觸控事件,經常在自定義控制元件時重寫setOnTouchListener 本篇通過手繪圖片來講述這個知識點 本篇分為三個等級：一覽圖： 直線 曲線 筆觸 ...

任何View都有觸控事件,經常在自定義控制元件時重寫setOnTouchListener

本篇通過手繪圖片來講述這個知識點

本篇分為三個等級：一覽圖：

直線	曲線	筆觸
LEVEL1.png	LEVEL2.png	LEVER3.png

LEVEL1:基礎實現

在Activity中通過一個全屏的Bitmap建立的Canvas繪製

為ImageView新增觸控事件監聽。

1.成員變數

ImageView mIdIvShow;
float downX = 0;
float downY = 0;
float upX = 0;
float upY = 0;
private Canvas mCanvas;
private Paint mPaint;

2.建立畫布

//獲取螢幕尺寸
Point point = new Point();
getWindowManager().getDefaultDisplay().getSize(point);

//建立一個和螢幕一樣大的Bitmap
Bitmap bitmap = Bitmap.createBitmap(point.x, point.y, Bitmap.Config.ARGB_8888);
//建立Canvas物件
mCanvas = new Canvas(bitmap);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.RED);
//將bitmap用ImageView展示
mIdIvShow.setImageBitmap(bitmap);

3.監聽事件

mIdIvShow.setOnTouchListener((v, event) -> {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
L.d("按下:(" + downX + "," + downY + ")" + L.l());
break;
case MotionEvent.ACTION_CANCEL:
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
upX = event.getX();
upY = event.getY();
L.d("抬起:(" + upX + "," + upY + ")" + L.l());
mCanvas.drawLine(downX, downY, upX, upY, mPaint);
mIdIvShow.invalidate();//更新檢視
break;
}
return true;
});
}

升級版：LEVER2

mIdIvShow.setOnTouchListener((v, event) -> {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
break;
case MotionEvent.ACTION_CANCEL:
break;
case MotionEvent.ACTION_MOVE:
upX = event.getX();
upY = event.getY();
mCanvas.drawLine(downX, downY, upX, upY, mPaint);
mIdIvShow.invalidate();
//更新點位
downY = upY;
downX = upX;
break;
case MotionEvent.ACTION_UP:
//抬起點Y>1100,清除筆跡
if (upY > 1100) {
Paint paint = new Paint();
paint.setColor(Color.WHITE);
mCanvas.drawRect(0, 0, mPoint.x, mPoint.y, paint);
}
break;
}
return true;
});

再升級版：LEVER3

筆觸根據繪製的速度動態改變畫筆粗細

float movingX = 0;
float movingY = 0;
private long lastTimestamp = 0L;//最後一次的時間戳

mIdIvShow.setOnTouchListener((view, event) -> {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
lastTimestamp = System.currentTimeMillis();
downX = event.getX();
downY = event.getY();
break;
case MotionEvent.ACTION_CANCEL:
break;
case MotionEvent.ACTION_MOVE:
movingX = event.getX();
movingY = event.getY();
long curTimestamp = System.currentTimeMillis();
//計算時間差
long detaT = curTimestamp - lastTimestamp;
//計算距離差
float detaS = Logic.disPos2d(movingX, movingY, downX, downY);
//由於速度是 px/ms
double v = detaS / detaT;
//速度轉化為畫筆寬度的等式
float width = 14/(float)v;
L.d(width + L.l());
//限制極值情況
if ((width > 0) && width < 30) {
mPaint.setStrokeWidth(width);
}
mCanvas.drawLine(downX, downY, movingX, movingY, mPaint);
mIdIvShow.invalidate();
downX = movingX;
downY = movingY;
lastTimestamp = curTimestamp;//更新時間
movePos.add(new PointF(event.getX(), event.getY()));
break;
}
return true;
});

拓展

1.其中可以改變求寬度的等式實現不同的筆觸:如

float width = (float) Math.log10(v) * 40;

2.在圖片上繪畫

//圖片原型
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.iv_500x400);
//圖片副本
Bitmap mNewBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
//用副本生成Canvas
mCanvas = new Canvas(mNewBitmap);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStrokeCap(Paint.Cap.ROUND);//直線圓頭
mCanvas.drawBitmap(bitmap, new Matrix(), mPaint);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.parseColor("#88164BE6"));
//設定副本圖片到ImageView
mIdIvShow.setImageBitmap(mNewBitmap);

後記：捷文規範

1.本文成長記錄及勘誤表

專案原始碼	日期	備註
V0.1--無	2018-10-30	ofollow,noindex">Android觸控事件實現筆觸畫布

2.更多關於我

筆名	QQ	微信	愛好
張風捷特烈	1981462002	zdl1994328	語言
我的github	我的簡書	我的CSDN	個人網站

3.宣告

1----本文由張風捷特烈原創,轉載請註明

2----歡迎廣大程式設計愛好者共同交流

3----個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正

4----看到這裡，我在此感謝你的喜歡與支援