Improve the handwriting smoothness of Android applications (basic)

Improve the handwriting smoothness of Android applications (basic)

When using android-based handwriting applications, the overall impression is as follows: android handwriting is not smooth and unnatural, which is far different from Apple apps. Based on the author's personal experience, this article introduces several methods to effectively improve the smoothness of handwriting:

1. Handwriting effects not processed:

This is a custom view. By capturing the touch point information of the system callback in the onTouchEvent time and refreshing it in the onDraw method, you can obviously feel the lines are stiff, in addition, in the process of handwriting, the user experience is poor and the response is slow. The specific code is as follows:

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHByZSBjbGFzcz0 = "brush: java;"> package com. mingy. paint. view; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. path; import android. util. attributeSet; import android. view. motionEvent; import android. view. view; public class PaintOrignalView extends View {public PaintOrignalView (Context context, AttributeSe T attrs, int defStyle) {super (context, attrs, defStyle); initPaintView ();} public PaintOrignalView (Context context, AttributeSet attrs) {super (context, attrs ); initPaintView ();} public PaintOrignalView (Context context) {super (context); initPaintView ();} public void clear () {if (null! = MPath) {mPath. reset (); invalidate () ;}} private void initPaintView () {mPaint. setAntiAlias (true); mPaint. setColor (Color. BLACK); mPaint. setStyle (Paint. style. STROKE); mPaint. setStrokeJoin (Paint. join. ROUND); mPaint. setStrokeWidth (5f);} @ Overrideprotected void onDraw (Canvas canvas) {canvas. drawPath (mPath, mPaint) ;}@ Overridepublic boolean onTouchEvent (MotionEvent event) {float eventX = event. getX (); float eventY = event. getY (); switch (event. getAction () {case MotionEvent. ACTION_DOWN: {mPath. moveTo (eventX, eventY); invalidate () ;}return true; case MotionEvent. ACTION_MOVE: {mPath. lineTo (eventX, eventY); invalidate ();} break; case MotionEvent. ACTION_UP: {mPath. lineTo (eventX, eventY); invalidate ();} break; default: {} return false;} return true;} private Paint mPaint = new Paint (); private Path mPath = new Path ();}
Through analysis, we find that the cause of inefficiency is:

(1) the number of points in the underlying callback to the onTouchEvent method is too small (a small number of internal point information in the unit time leads to a low degree of parallelism, and the distance between the quick handwriting time points is too long );

(2) When the View is refreshed after the point information is captured, the refresh is not timely (the refresh area is too large );

Combined with the MotionEvent and View api documentation, we found that we can improve the handwriting experience in the following two ways:

2. Increase the number of touch points:

Obviously, we cannot improve the number of calls to the onTouchEvent system. Therefore, we can only increase the number of touch points by interpolation. Unfortunately, the points calculated by interpolation do not have pressure values, it is not convenient to perform the pen-front effect. You can check the MotionEvent api documentation to find that Android handles touch-screen events in batches. Each MotionEvent passed to onTouchEvent () contains several coordinate points captured between the previous onTouchEvent () call. If you add these points to the painting, the handwriting effect can be smoother. Android Developers introduces MotionEvent as follows:

These points are obviously improved as you feel, and the distance between quick handwriting points decreases as the number of points increases in the unit time, which looks smoother:

The modified code is as follows:

package com.mingy.paint.view;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class PaintMorePointsView extends View {public PaintMorePointsView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);initPaintView();}public PaintMorePointsView(Context context, AttributeSet attrs) {super(context, attrs);initPaintView();}public PaintMorePointsView(Context context) {super(context);initPaintView();}public void clear( ){if( null != mPath ){mPath.reset( );invalidate( );}}private void initPaintView() {mPaint.setAntiAlias(true);mPaint.setColor(Color.BLACK);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeJoin(Paint.Join.ROUND);mPaint.setStrokeWidth(5f);}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawPath(mPath, mPaint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {float eventX = event.getX();float eventY = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN: {mPath.moveTo(eventX, eventY);invalidate();}return true;case MotionEvent.ACTION_MOVE: {int historySize = event.getHistorySize();        for (int i = 0; i < historySize; i++) {          float historicalX = event.getHistoricalX(i);          float historicalY = event.getHistoricalY(i);          mPath.lineTo(historicalX, historicalY);        }        mPath.lineTo(eventX, eventY);invalidate();}break;case MotionEvent.ACTION_UP: {int historySize = event.getHistorySize();        for (int i = 0; i < historySize; i++) {          float historicalX = event.getHistoricalX(i);          float historicalY = event.getHistoricalY(i);          mPath.lineTo(historicalX, historicalY);        }        mPath.lineTo(eventX, eventY);invalidate();}break;default: {}return false;}return true;}private Paint mPaint = new Paint();private Path mPath = new Path();}

3. Reduce the area of each Refresh:

2 improves the smoothness and smoothness of handwriting, but can be further improved. by reducing the area refreshed each time (using the invalidate (Rect rect) method), the refresh efficiency can be improved, the above code refreshes the entire view. When the view is too large (such as filling the screen), the handwriting process can still feel dull. The improved effect is as follows:

The Code is as follows:

package com.mingy.paint.view;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.RectF;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class PaintInvalidateRectView extends View {public PaintInvalidateRectView(Context context, AttributeSet attrs,int defStyle) {super(context, attrs, defStyle);initPaintView();}public PaintInvalidateRectView(Context context, AttributeSet attrs) {super(context, attrs);initPaintView();}public PaintInvalidateRectView(Context context) {super(context);initPaintView();}public void clear() {if (null != mPath) {mPath.reset();invalidate();}}private void initPaintView() {mPaint.setAntiAlias(true);mPaint.setColor(Color.BLACK);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeJoin(Paint.Join.ROUND);mPaint.setStrokeWidth(5f);}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawPath(mPath, mPaint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {float eventX = event.getX();float eventY = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN: {mPath.moveTo(eventX, eventY);mLastTouchX = eventX;mLastTouchY = eventY;}return true;case MotionEvent.ACTION_MOVE:case MotionEvent.ACTION_UP: {resetDirtyRect(eventX, eventY);int historySize = event.getHistorySize();for (int i = 0; i < historySize; i++) {float historicalX = event.getHistoricalX(i);float historicalY = event.getHistoricalY(i);getDirtyRect(historicalX, historicalY);mPath.lineTo(historicalX, historicalY);}mPath.lineTo(eventX, eventY);invalidate((int) (mDirtyRect.left - HALF_STROKE_WIDTH),(int) (mDirtyRect.top - HALF_STROKE_WIDTH),(int) (mDirtyRect.right + HALF_STROKE_WIDTH),(int) (mDirtyRect.bottom + HALF_STROKE_WIDTH));mLastTouchX = eventX;mLastTouchY = eventY;}break;default:return false;}return true;}private void getDirtyRect(float historicalX, float historicalY) {if (historicalX < mDirtyRect.left) {mDirtyRect.left = historicalX;} else if (historicalX > mDirtyRect.right) {mDirtyRect.right = historicalX;}if (historicalY < mDirtyRect.top) {mDirtyRect.top = historicalY;} else if (historicalY > mDirtyRect.bottom) {mDirtyRect.bottom = historicalY;}}private void resetDirtyRect(float eventX, float eventY) {mDirtyRect.left = Math.min(mLastTouchX, eventX);mDirtyRect.right = Math.max(mLastTouchX, eventX);mDirtyRect.top = Math.min(mLastTouchY, eventY);mDirtyRect.bottom = Math.max(mLastTouchY, eventY);}private static final float STROKE_WIDTH = 5f;private static final float HALF_STROKE_WIDTH = STROKE_WIDTH / 2;private float mLastTouchX = 0;private float mLastTouchY = 0;private final RectF mDirtyRect = new RectF();private Paint mPaint = new Paint();private Path mPath = new Path();}

Postscript:
Due to the message transmission mechanism of Android, some of the points transmitted by the driver layer to the upper layer will be lost due to the delay, which greatly reduces the points obtained by the upper layer application compared with those given by the system, although the human eyes cannot see choppy as long as they see more than 24 frames in one second, the refreshing mechanism and other reasons (such as UI thread blocking) make it appear discontinuous. After adding touch points and decreasing the refresh area, the handwriting efficiency and effect are significantly improved. Of course, the handwriting effect can be further improved through further processing of the software, this requires interpolation by software (the pressure value can also be calculated using the interpolation algorithm.