昨日はその方法を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ブラウザ手書き機能についてでした！
