Android-day program: painting Program-painting finger path, android-day program

Android-day program: painting Program-painting finger path, android-day program

This program achieves the effect of drawing with your fingers in a canvas.

Knowledge required:

1 Canvas, dynamically save and update the current screen

2 Path: Record and draw the Path through which the shot contacts the screen.

As shown below:

You only need to create a project according to the default settings, and then enter the java code:

package com.example.sugestures;import android.app.Activity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.os.Bundle;import android.util.Log;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;public class MainActivity extends Activity {DrawingView dv;private Paint mPaint;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);dv = new DrawingView(this);dv.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View arg0, MotionEvent arg1) {// TODO Auto-generated method stubreturn false;}});setContentView(dv);mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setDither(true);mPaint.setColor(Color.GREEN);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeJoin(Paint.Join.ROUND);mPaint.setStrokeCap(Paint.Cap.ROUND);mPaint.setStrokeWidth(12);Log.d("onCreate", "onCreateActivityMain=========================");}public class DrawingView extends View {public int width;public int height;private Bitmap mBitmap;private Canvas mCanvas;private Path mPath;private Paint mBitmapPaint;Context context;private Paint circlePaint;private Path circlePath;public DrawingView(Context c) {super(c);context = c;mPath = new Path();mBitmapPaint = new Paint(Paint.DITHER_FLAG);mBitmapPaint.setColor(Color.BLUE);circlePaint = new Paint();circlePath = new Path();circlePaint.setAntiAlias(true);circlePaint.setColor(Color.RED);circlePaint.setStyle(Paint.Style.STROKE);circlePaint.setStrokeJoin(Paint.Join.MITER);circlePaint.setStrokeWidth(4f);Log.d("DrawingView", "DrawingView=========================");}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);mCanvas = new Canvas(mBitmap);Log.d("OnSizeChanged", "OnSizeChanged=========================");}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);canvas.drawPath(mPath, mPaint);canvas.drawPath(circlePath, circlePaint);Log.d("onDraw", "onDraw================================");}private float mX, mY;private static final float TOUCH_TOLERANCE = 4;private void touch_start(float x, float y) {mPath.reset();mPath.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) {mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);//mPath.quadTo(mX, mY, x, y);mX = x;mY = y;circlePath.reset();circlePath.addCircle(mX, mY, 30, Path.Direction.CW);}}private void touch_up() {mPath.lineTo(mX, mY);circlePath.reset();// commit the path to our offscreenmCanvas.drawPath(mPath, mPaint);// kill this so we don't double drawmPath.reset();}@Overridepublic boolean onTouchEvent(MotionEvent event) {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;}}}

Key knowledge points:

The DrawingView class extends the View class, so that you can reload the onTouchEvent function and track the current Touch event. Here there are three main events:

1 ACTION_DOWN: Click Start

2 ACTION_MOVE: Click the screen to move the event

3 ACTION_UP: Release the Click Event

Use the touch_start, touch_move, and touch_up functions to process these three events respectively.

It is mainly the Path. quadTo function that draws the Path through the finger. Here, the Path is drawn using the besell curve of the quadratic equation. LineTo is used to draw a straight line. Therefore, quadTo is better. And moveTo is the starting point of the setting, which is why touch_start uses moveTo.

A TOUCH_TOLERANCE is added here for optimization. The path is updated only when the moving value exceeds this value. In fact, this judgment is not used.

Path. reset () is used to clear paths;

When you create a Canvas, a Bitmap object is input to allow the Canvas to use this Bitmap to save temporary data. You can re-draw the Bitmap image when invalid is used. If there is no Bitmap, the path will disappear immediately.

You can record the call status of each function by using the dashboard. d (). You can know that onResize is called before onDraw when the program is started. OnDraw calls are very frequent when drawing, and the Path must be constantly updated.

Similar to drawing programs using frameworks such as MFC, the logic is basically the same.

Do not use the drawPath function of Canvas to add the currently drawn path to Bitmap. Otherwise, the current path cannot be saved temporarily.

Reference: http://stackoverflow.com/questions/16650419/draw-in-canvas-by-finger-android

This is the simplest drawing program, but it is a lot of programs, especially the foundation of game programs. There are many other functions that will be added later.