【Android】WebViewに手書き線を書く一つの方法

WebBrowserに手書きしたいなぁなんて思っている人も多いのではないかと思います。 

昨日はその方法をiPhoneにて実現する方法を書きましたが、
今日はAndroid編です！

 まず、Androidのサンプルに、FingerPaintというものがあります。
 このサンプルは、指でなぞった軌跡を表示するというサンプルです。

これをベースにして、そのサンプルとWebViewを融合させます！

 では、まず画像！！！

昨日とあまり代わり映えしないじゃんかぁ！！！
そりゃそうです^^;;;

iPhoneと同じ機能をAndroidで実現する訳ですから^^
こんな感じで、Webブラウザに手書きが出来てしまいます！！！

このマップ等で、この手書きが役にたちそうですね！
マップ等で場所を○て囲んで、そのスクリーンショットを送るとか！
いろんな使い方が出来るんじゃないでしょうかね？

今回はとっても簡単です！
Androidの場合は、WebViewを拡張すればすぐにできるのです！

ではソースです！
今回はポイントは特にないですかねぇ;;;
onTouchEventにてタッチイベントを取得して、そのイベントに応じて
線を書いていくだけの処理になります！

　
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.webkit.WebView;


public class WritableWebView extends WebView {

 private Path _writedPath = null;
 private Paint _paint = null;
 
 public WritableWebView(Context context) {
  super(context);
  
  _writedPath = new Path();
  _paint = new Paint(Paint.DITHER_FLAG);
  _paint.setAntiAlias(true);
  _paint.setDither(true);
  _paint.setColor(0xFFFF0000);
  _paint.setStyle(Paint.Style.STROKE);
  _paint.setStrokeJoin(Paint.Join.ROUND);
  _paint.setStrokeCap(Paint.Cap.ROUND);
  _paint.setStrokeWidth(12);
 }
 
 public WritableWebView(Context context, AttributeSet attrs) {
  super(context, attrs);
  
  _writedPath = new Path();
  _paint = new Paint(Paint.DITHER_FLAG);
  _paint.setAntiAlias(true);
  _paint.setDither(true);
  _paint.setColor(0xFFFF0000);
  _paint.setStyle(Paint.Style.STROKE);
  _paint.setStrokeJoin(Paint.Join.ROUND);
  _paint.setStrokeCap(Paint.Cap.ROUND);
  _paint.setStrokeWidth(12);
 }
 
 public WritableWebView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  
  _writedPath = new Path();
  _paint = new Paint(Paint.DITHER_FLAG);
  _paint.setAntiAlias(true);
  _paint.setDither(true);
  _paint.setColor(0xFFFF0000);
  _paint.setStyle(Paint.Style.STROKE);
  _paint.setStrokeJoin(Paint.Join.ROUND);
  _paint.setStrokeCap(Paint.Cap.ROUND);
  _paint.setStrokeWidth(12);
 }
 
 
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  
  canvas.drawPath(_writedPath, _paint);
 }
 
 private float mX, mY;
 private static final float TOUCH_TOLERANCE = 4;
 
 private void touch_start(float x, float y) {
  _writedPath.reset();
  _writedPath.moveTo(x, y);
  mX = x;
  mY = y;
 }

 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) {
   _writedPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
   mX = x;
   mY = y;
  }
 }

 private void touch_up() {
  _writedPath.lineTo(mX, mY);
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  if (_writable == true) {
   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;
  }
  else {
   return super.onTouchEvent(event);
  }
 }
}

こんな感じです！
あとは、このViewに対して、HTMLを読み込むようにすれば良いだけです！

こんな感じ

　
  WritableWebView webview = (WritableWebView)findViewById(R.id.webview);
  webview.getSettings().setJavaScriptEnabled(true);
  webview.loadUrl("http://developerwaiwai.blogspot.jp/");

どうです？
簡単でしょ？

画像に落としたい場合には、DrawCacheを取得して、保存すればOK！

いじょ、Android版のWebブラウザ手書き機能についてでした！