![[Androidアプリ開発] ちょっとなめらかな線でお絵かきしてみる](https://devio2023-media.developers.io/wp-content/uploads/2013/09/android.png)
[Androidアプリ開発] ちょっとなめらかな線でお絵かきしてみる
2016.07.07
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
そーとー間が空いてしまいましたが、前回の [Androidアプリ開発] タッチでお絵かきしてみた(undo付) の続きです。カクカクになってしまう線を少しだけなめらかにしてみます。
ちょっとだけなめらかな線に変更
iOS版ではすでに同じようなことをやっていて、それをAndroidでやってみた感じですね。ちなみにiOS版のブログはこちら。 [iOSアプリ開発] ちょっとなめらかな線でお絵かきしてみる
まず、フィールドに必要な変数を追加します。
DrawSurfaceView.java
public class DrawSurfaceView extends SurfaceView implements Callback {
private SurfaceHolder mHolder;
private Paint mPaint;
private Path mPath;
private Bitmap mLastDrawBitmap;
private Canvas mLastDrawCanvas;
private Deque<Path> mUndoStack = new ArrayDeque<Path>();
private Deque<Path> mRedoStack = new ArrayDeque<Path>();
private float mLastTouchX;
private float mLastTouchY;
private boolean mFirstMovedFlg;
public DrawSurfaceView(Context context) {
super(context);
init();
}
次にタッチ系の処理を修正します。
DrawSurfaceView.java
private void onTouchDown(float x, float y) {
mPath = new Path();
mPath.moveTo(x, y);
mLastTouchX = x;
mLastTouchY = y;
mFirstMovedFlg = false;
}
private void onTouchMove(float x, float y) {
// mPath.lineTo(x, y);
if (!mFirstMovedFlg) {
mFirstMovedFlg = true;
mLastTouchX = x;
mLastTouchY = y;
return;
}
float middlePointX = (mLastTouchX + x) / 2;
float middlePointY = (mLastTouchY + y) / 2;
mPath.quadTo(mLastTouchX, mLastTouchY, middlePointX, middlePointY);
drawLine(mPath);
mLastTouchX = x;
mLastTouchY = y;
}
private void onTouchUp(float x, float y) {
// mPath.lineTo(x, y);
mPath.quadTo(mLastTouchX, mLastTouchY, x, y);
drawLine(mPath);
mLastDrawCanvas.drawPath(mPath, mPaint);
mUndoStack.addLast(mPath);
mRedoStack.clear();
}
はい、これで完成です。iOS版でやったのとほぼ同じ考え方で、タッチした座標の中点を曲線でつないでいくという簡単な方法です。
動作確認は割愛しますが、時間のある方は実際に試してみてもらえたらと思います。。
ではでは。
