Android應用中平滑的手寫效果實現

原文章地址：http://blog.csdn.net/ekeuy/article/details/37962845#comments

在信用卡支付流程中，使用手寫簽名能夠提高支付的安全性，並有效降低過程成本。使用Square在手機上進行支付，用戶可以用手指在屏幕上簽名，無需拿出筆來在收據上簽字。

小竅門：該界面中提供了手機搖一搖清屏的功能

用戶在該界面提供的簽名，將簽署在電子郵件收據中，以幫助Square監測和防止消費欺詐。

下面我們嘗試在Android客戶端上實現該界面，先嚐試從最簡單可行的方式開始：生成一個自定義View，能夠監聽觸屏事件，並根據觸摸路徑畫出點。

 

public class SignatureView extends View {
  private Paint paint = new Paint();
  private Path path = new Path();

  public SignatureView(Context context, AttributeSet attrs) {
    super(context, attrs);

    paint.setAntiAlias(true);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeWidth(5f);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    canvas.drawPath(path, paint);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    float eventX = event.getX();
    float eventY = event.getY();

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        path.moveTo(eventX, eventY);
        return true;
      case MotionEvent.ACTION_MOVE:
      case MotionEvent.ACTION_UP:
        path.lineTo(eventX, eventY);
        break;
      default:
        return false;
    }

    // Schedules a repaint.
    invalidate();
    return true;
  }
}

可以看到實現出來的效果與預期有一定的差距——簽名的筆畫呈硬邦邦的鋸齒狀，而且與用戶交互遲鈍。

下面我們嘗試從兩個不同的途徑解決這個問題。

觸屏事件丟失

該實現效果的問題之一是，自定義View的響應與繪製未能跟上用戶手指的觸屏動作。我們一開始的顧慮是：

1.Android對觸屏事件的採樣率過低

2.繪製事件阻塞了觸屏事件的採樣

幸運的是，經過實驗考證，這兩個顧慮都沒有發生。同時，我們發現Android對觸屏事件進行批量處理。傳遞給onTouchEvent()的每一個MotionEvent都包含上至前一個onTouchEvent()調用之間捕獲的若干個座標點。如果將這些點都加入到繪製中，可使簽名效果更加平滑。

隱藏的座標數組可以通過以下MotionEvent類的方法獲取

·getHistorySize()

·getHistoricalX(int)

·getHistoricalY(int)

下面我們利用這些方法，將中間點包含進SignatureView的繪製：

 

public class SignatureView extends View {
  public boolean onTouchEvent(MotionEvent event) {
    ...
    switch (event.getAction()) {
      case MotionEvent.ACTION_MOVE:
      case MotionEvent.ACTION_UP:

        // When the hardware tracks events faster than they are delivered,
        // the event will contain a history of those skipped points.
        int historySize = event.getHistorySize();
        for (int i = 0; i < historySize; i++) {
          float historicalX = event.getHistoricalX(i);
          float historicalY = event.getHistoricalY(i);
          path.lineTo(historicalX, historicalY);
        }

        // After replaying history, connect the line to the touch point.
        path.lineTo(eventX, eventY);
        break;
    ...
  }
}

這個簡單的改進，使簽名效果外觀有了顯著的提升。但該View對用戶觸屏的響應能力仍然不足。

局部刷新

我們的SignatureView在每一次調用onTouchEvent()時，會在觸屏座標之間畫線，並進行全屏刷新——即使只是很小的像素級變動，也需要全屏重繪。

顯然，全屏重繪效率低下且沒有必要。我們可以使用 View.invalidate(Rect) 方法，選擇性地對新添畫線的矩形區域進行局部刷新，可以顯著提高繪製性能。

採用的算法思路如下：

1.創建一個代表髒區域的矩形；

2.獲得 ACTION_DOWN 事件的 X 與 Y 座標，用來設置矩形的頂點；

3.獲得 ACTION_MOVE 和 ACTION_UP 事件的新座標點，加入到矩形中使之拓展開來（別忘了上文說過的歷史座標點）；

4.刷新髒區域。

採用該算法後，我們能夠明顯感覺到觸屏響應性能的大幅提升。

出爐

以上我們對SignatureView進行了兩方面的改造提升：將觸屏事件的中間點加入繪製，使筆畫更加流暢逼真；以局部刷新取代全屏刷新，提高繪圖性能，使觸屏響應更加迅速。

最終出爐的效果：

下面是SignatureView的最終完成代碼，我們去掉了一些無關的方法（如搖動檢測）

 

public class SignatureView extends View {

  private static final float STROKE_WIDTH = 5f;

  /** Need to track this so the dirty region can accommodate the stroke. **/
  private static final float HALF_STROKE_WIDTH = STROKE_WIDTH / 2;

  private Paint paint = new Paint();
  private Path path = new Path();

  /**
   * Optimizes painting by invalidating the smallest possible area.
   */
  private float lastTouchX;
  private float lastTouchY;
  private final RectF dirtyRect = new RectF();

  public SignatureView(Context context, AttributeSet attrs) {
    super(context, attrs);

    paint.setAntiAlias(true);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeWidth(STROKE_WIDTH);
  }

  /**
   * Erases the signature.
   */
  public void clear() {
    path.reset();

    // Repaints the entire view.
    invalidate();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    canvas.drawPath(path, paint);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    float eventX = event.getX();
    float eventY = event.getY();

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        path.moveTo(eventX, eventY);
        lastTouchX = eventX;
        lastTouchY = eventY;
        // There is no end point yet, so don't waste cycles invalidating.
        return true;

      case MotionEvent.ACTION_MOVE:
      case MotionEvent.ACTION_UP:
        // Start tracking the dirty region.
        resetDirtyRect(eventX, eventY);

        // When the hardware tracks events faster than they are delivered, the
        // event will contain a history of those skipped points.
        int historySize = event.getHistorySize();
        for (int i = 0; i < historySize; i++) {
          float historicalX = event.getHistoricalX(i);
          float historicalY = event.getHistoricalY(i);
          expandDirtyRect(historicalX, historicalY);
          path.lineTo(historicalX, historicalY);
        }

        // After replaying history, connect the line to the touch point.
        path.lineTo(eventX, eventY);
        break;

      default:
        debug("Ignored touch event: " + event.toString());
        return false;
    }

    // Include half the stroke width to avoid clipping.
    invalidate(
        (int) (dirtyRect.left - HALF_STROKE_WIDTH),
        (int) (dirtyRect.top - HALF_STROKE_WIDTH),
        (int) (dirtyRect.right + HALF_STROKE_WIDTH),
        (int) (dirtyRect.bottom + HALF_STROKE_WIDTH));

    lastTouchX = eventX;
    lastTouchY = eventY;

    return true;
  }

  /**
   * Called when replaying history to ensure the dirty region includes all
   * points.
   */
  private void expandDirtyRect(float historicalX, float historicalY) {
    if (historicalX < dirtyRect.left) {
      dirtyRect.left = historicalX;
    } else if (historicalX > dirtyRect.right) {
      dirtyRect.right = historicalX;
    }
    if (historicalY < dirtyRect.top) {
      dirtyRect.top = historicalY;
    } else if (historicalY > dirtyRect.bottom) {
      dirtyRect.bottom = historicalY;
    }
  }

  /**
   * Resets the dirty region when the motion event occurs.
   */
  private void resetDirtyRect(float eventX, float eventY) {

    // The lastTouchX and lastTouchY were set when the ACTION_DOWN
    // motion event occurred.
    dirtyRect.left = Math.min(lastTouchX, eventX);
    dirtyRect.right = Math.max(lastTouchX, eventX);
    dirtyRect.top = Math.min(lastTouchY, eventY);
    dirtyRect.bottom = Math.max(lastTouchY, eventY);
  }
}