Canvas と Path による手書き View の簡単な実装

先日 Evernote などの人気アプリケーションにもハンドライティング (手書き) による、メモ機能が追加されました。

モバイルデバイスでは、従来の PC で用いられるキーボード入力の他、スタイラスペン（あるいは指で直接書く）等による入力も人気です。

ハンドライティングによる描画はどのようにすればよいでしょうか。

ここではキャンバス上に、ハンドライティングによる入力を行なうサンプルコードを示します。

次のスクリーンショットのようになります。

Canvas と Path による手書き View の簡単な実装

ではさっそく、実装をみていきましょう。

アクティビティについては、前回の例「タップ時に Canvas に矩形を描画する単純なサンプル」と同様に単純です。 setContentView で自前のビューをセットしているだけです。

package com.example.canvastest2;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new CanvasTest2View(this));
  }

}

View は次の通り。

package com.example.canvastest2;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.view.MotionEvent;
import android.view.View;

public class CanvasTest2View extends View {
  
  private Paint  paint;
  private Path  path;
    
  public CanvasTest2View(Context context) {
    super(context);
    path = new Path();
    
    paint = new Paint();
    paint.setColor(0xFF008800);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeCap(Paint.Cap.ROUND);
    paint.setStrokeWidth(10);
  }

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

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    
    float x = event.getX();
    float y = event.getY();
        
    switch(event.getAction()){
    case MotionEvent.ACTION_DOWN:
      path.moveTo(x, y);      
      invalidate();
      break;
    case MotionEvent.ACTION_MOVE:
      path.lineTo(x, y);
      invalidate();
      break;
    case MotionEvent.ACTION_UP:
      path.lineTo(x, y);
      invalidate();
      break;
    }
    return true;
  }  

}

onTouchEvent で Path オブジェクトに線を追加していっています。

ACTION_DOWN でタッチした場所に移動して、ACTION_MOVE で移動場所に次々と線を引きます。ACTION_UP では最後に離れた場所に線を引きます。

それぞれのアクションのあとに invalidate を呼び出し、画面全体を再描画しています。再描画のたびに全ての線を引きなおすことになります。