Android塗鴉畫板原理詳解——從初級到高階（一）

貝塞爾曲線安卓開發 · 發表 2018-09-20 16:37:47

摘要：準備前段時間，釋出了開源框架Doodle ，得到了一些小夥伴的關注。但由於框架程式碼較多，一開始較難理解，有不少人詢問了相關的實現細節。我發現不少初學者對基本的塗鴉原理不熟悉，因此我決定寫一些簡單的例子，用於說明最基本的的塗鴉原理，這也是開源框架Doodle 最核心的地方。 ...

準備

前段時間，釋出了 ofollow,noindex">開源框架Doodle ，得到了一些小夥伴的關注。但由於框架程式碼較多，一開始較難理解，有不少人詢問了相關的實現細節。我發現不少初學者對基本的塗鴉原理不熟悉，因此我決定寫一些簡單的例子，用於說明最基本的的塗鴉原理，這也是開源框架Doodle 最核心的地方。

好的，在講解之前，我希望小夥伴們對View的繪製流程有一定的瞭解，還不熟悉的同學可以先看看我之前的文章《View的繪製流程》，因為下面的塗鴉我們用到了自定義View的知識。

初級塗鴉

我們要實現最簡單的塗鴉，手指在螢幕上滑動時繪製滑動軌跡。思路如下：

建立自定義View: SimpleDoodleView
使用TouchGestureDetector識別滑動手勢。（TouchGestureDetector在我另一個專案Androids中，使用時需要匯入依賴）
將手勢滑動的點記錄在系統類Path中。Path可以支援貝塞爾曲線等各種圖形的繪製。
在自定義View的onDraw方法中通過Canvas.drawPath()繪製記錄的Path，把塗鴉軌跡繪製出來。

實現效果：

simple.gif

程式碼如下：

public class SimpleDoodleView extends View {

private final static String TAG = "SimpleDoodleView";

private Paint mPaint = new Paint();
private List<Path> mPathList = new ArrayList<>(); // 儲存塗鴉軌跡的集合
private TouchGestureDetector mTouchGestureDetector; // 觸控手勢監聽
private float mLastX, mLastY;
private Path mCurrentPath; // 當前的塗鴉軌跡

public SimpleDoodleView(Context context) {
super(context);
// 設定畫筆
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(20);
mPaint.setAntiAlias(true);
mPaint.setStrokeCap(Paint.Cap.ROUND);

// 由手勢識別器處理手勢
mTouchGestureDetector = new TouchGestureDetector(getContext(), new TouchGestureDetector.OnTouchGestureListener() {

@Override
public void onScrollBegin(MotionEvent e) { // 滑動開始
Log.d(TAG, "onScrollBegin: ");
mCurrentPath = new Path(); // 新的塗鴉
mPathList.add(mCurrentPath); // 新增的集合中
mCurrentPath.moveTo(e.getX(), e.getY());
mLastX = e.getX();
mLastY = e.getY();
invalidate(); // 重新整理
}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // 滑動中
Log.d(TAG, "onScroll: " + e2.getX() + " " + e2.getY());
mCurrentPath.quadTo(
mLastX,
mLastY,
(e2.getX() + mLastX) / 2,
(e2.getY() + mLastY) / 2); // 使用貝塞爾曲線 讓塗鴉軌跡更圓滑
mLastX = e2.getX();
mLastY = e2.getY();
invalidate(); // 重新整理
return true;
}

@Override
public void onScrollEnd(MotionEvent e) { // 滑動結束
Log.d(TAG, "onScrollEnd: ");
mCurrentPath.quadTo(
mLastX,
mLastY,
(e.getX() + mLastX) / 2,
(e.getY() + mLastY) / 2); // 使用貝塞爾曲線 讓塗鴉軌跡更圓滑
mCurrentPath = null; // 軌跡結束
invalidate(); // 重新整理
}

});
}

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
boolean consumed = mTouchGestureDetector.onTouchEvent(event); // 由手勢識別器處理手勢
if (!consumed) {
return super.dispatchTouchEvent(event);
}
return true;
}

@Override
protected void onDraw(Canvas canvas) {
for (Path path : mPathList) { // 繪製塗鴉軌跡
canvas.drawPath(path, mPaint);
}
}
}

使用時直接在佈局檔案XML裡新增自定義SimpleDoodleView，或者通過如下程式碼新增到父容器中：

// 初級塗鴉
ViewGroup simpleContainer = findViewById(R.id.container_simple_doodle);
SimpleDoodleView simpleDoodleView = new SimpleDoodleView(this);
simpleContainer.addView(simpleDoodleView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

程式碼很簡單，這裡沒有涉及到座標換算，直接就是滑到View的哪裡就直接在該位置繪製塗鴉，希望小夥伴們把上面的程式碼手動敲一遍，接下來就開始講中級塗鴉啦。

中級塗鴉

中級塗鴉要實現的效果：在初級塗鴉的基礎上，單擊時可以選擇某個塗鴉，進行移動。思路如下：

建立自定義View: MiddleDoodleView
定義PathItem類，封裝塗鴉軌跡，包括Path和偏移值等資訊。

class PathItem {
Path mPath = new Path(); // 塗鴉軌跡
float mX, mY; // 軌跡偏移值
}

單擊時需要判斷是否點中某個塗鴉，Path提供了介面computeBounds()計算當前圖形的矩形範圍，可以通過判斷單擊的點是否在矩形範圍內判斷。使用TouchGestureDetector識別單擊和滑動手勢。（TouchGestureDetector在我另一個專案Androids中，使用時需要匯入依賴）

滑動過程中需要判斷當前是否有選中的塗鴉，如果有則對該塗鴉進行移動，把偏移值記錄在PathItem中；沒有則繪製新的塗鴉軌跡。

在MiddleDoodleView的onDraw方法中，繪製每個PathItem之前根據偏移值移動畫布。

實現效果：

middle.gif

程式碼如下：

public class MiddleDoodleView extends View {

private final static String TAG = "MiddleDoodleView";

private Paint mPaint = new Paint();
private List<PathItem> mPathList = new ArrayList<>(); // 儲存塗鴉軌跡的集合
private TouchGestureDetector mTouchGestureDetector; // 觸控手勢監聽
private float mLastX, mLastY;
private PathItem mCurrentPathItem; // 當前的塗鴉軌跡
private PathItem mSelectedPathItem; // 選中的塗鴉軌跡

public MiddleDoodleView(Context context) {
super(context);
// 設定畫筆
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(20);
mPaint.setAntiAlias(true);
mPaint.setStrokeCap(Paint.Cap.ROUND);

// 由手勢識別器處理手勢
mTouchGestureDetector = new TouchGestureDetector(getContext(), new TouchGestureDetector.OnTouchGestureListener() {

RectF mRectF = new RectF();

@Override
public boolean onSingleTapUp(MotionEvent e) { // 單擊選中
boolean found = false;
for (PathItem path : mPathList) { // 繪製塗鴉軌跡
path.mPath.computeBounds(mRectF, true); // 計算塗鴉軌跡的矩形範圍
mRectF.offset(path.mX, path.mY); // 加上偏移
if (mRectF.contains(e.getX(), e.getY())) { // 判斷是否點中塗鴉軌跡的矩形範圍內
found = true;
mSelectedPathItem = path;
break;
}
}
if (!found) { // 沒有點中任何塗鴉
mSelectedPathItem = null;
}
invalidate();
return true;
}

@Override
public void onScrollBegin(MotionEvent e) { // 滑動開始
Log.d(TAG, "onScrollBegin: ");
if (mSelectedPathItem == null) {
mCurrentPathItem = new PathItem(); // 新的塗鴉
mPathList.add(mCurrentPathItem); // 新增的集合中
mCurrentPathItem.mPath.moveTo(e.getX(), e.getY());
mLastX = e.getX();
mLastY = e.getY();
}
invalidate(); // 重新整理
}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // 滑動中
Log.d(TAG, "onScroll: " + e2.getX() + " " + e2.getY());
if (mSelectedPathItem == null) { // 沒有選中的塗鴉
mCurrentPathItem.mPath.quadTo(
mLastX,
mLastY,
(e2.getX() + mLastX) / 2,
(e2.getY() + mLastY) / 2); // 使用貝塞爾曲線 讓塗鴉軌跡更圓滑
mLastX = e2.getX();
mLastY = e2.getY();
} else { // 移動選中的塗鴉
mSelectedPathItem.mX = mSelectedPathItem.mX - distanceX;
mSelectedPathItem.mY = mSelectedPathItem.mY - distanceY;
}
invalidate(); // 重新整理
return true;
}

@Override
public void onScrollEnd(MotionEvent e) { // 滑動結束
Log.d(TAG, "onScrollEnd: ");
if (mSelectedPathItem == null) {
mCurrentPathItem.mPath.quadTo(
mLastX,
mLastY,
(e.getX() + mLastX) / 2,
(e.getY() + mLastY) / 2); // 使用貝塞爾曲線 讓塗鴉軌跡更圓滑
mCurrentPathItem = null; // 軌跡結束
}
invalidate(); // 重新整理
}

});
}

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
boolean consumed = mTouchGestureDetector.onTouchEvent(event); // 由手勢識別器處理手勢
if (!consumed) {
return super.dispatchTouchEvent(event);
}
return true;
}

@Override
protected void onDraw(Canvas canvas) {
for (PathItem path : mPathList) { // 繪製塗鴉軌跡
canvas.save(); // 1.儲存畫布狀態，下面要變換畫布
canvas.translate(path.mX, path.mY); // 根據塗鴉軌跡偏移值，偏移畫布使其畫在對應位置上
if (mSelectedPathItem == path) {
mPaint.setColor(Color.YELLOW); // 點中的為黃色
} else {
mPaint.setColor(Color.RED); // 其他為紅色
}
canvas.drawPath(path.mPath, mPaint);
canvas.restore(); // 2.恢復畫布狀態，繪製完一個塗鴉軌跡後取消上面的畫布變換，不影響下一個
}
}

/**
* 封裝塗鴉軌跡物件
*/
private static class PathItem {
Path mPath = new Path(); // 塗鴉軌跡
float mX, mY; // 軌跡偏移值
}
}

使用時直接在佈局檔案XML裡新增自定義MiddleDoodleView，或者通過如下程式碼新增到父容器中：

// 中級塗鴉
ViewGroup middleContainer = findViewById(R.id.container_middle_doodle);
MiddleDoodleView middleDoodleView = new MiddleDoodleView(this);
middleContainer.addView(middleDoodleView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

中級塗鴉的程式碼也不多，由於先前的塗鴉可以移動，所以在繪製塗鴉時需要根據移動的偏移值偏移畫布。這裡簡單應用了矩陣變換的知識，如果不太理解的小夥伴也不用著急，後面的高階塗鴉中會降到矩陣變換的知識。

後續

初中級的塗鴉並沒有涉及到對圖片的操作，所以相對簡單點，希望大夥可以理解透他們的原理，後面的高階塗鴉講涉及到圖片操作，對圖片進行縮放移動，就相對複雜很多，我會盡全力講解明白的~因此後面會單獨出一篇文章講解，請大家多多關注和支援！謝謝！！！

上面的程式碼在我的開源框架的Demo裡 >>>>Doodle塗鴉原理教程程式碼。

最後請大家多多支援我的專案 >>>>開源專案Doodle！一個功能強大，可自定義和可擴充套件的塗鴉框架。

Android塗鴉畫板原理詳解——從初級到高階（一）

準備

初級塗鴉

中級塗鴉

後續

您可能也會喜歡…