How to customize the View of Android to realize the track of finger Movement

This article is about how Android customizes views to achieve finger movement trajectories. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

What is a Bezier curve?

A Bézier curve, also known as a Bezier curve or Bézier curve, is a mathematical curve applied to two-dimensional graphics applications. General vector graphics software through it to accurately draw curves, Betz curve by segments and nodes, nodes are draggable fulcrum, segments like elastic rubber band, we see in the drawing tool pen tool is to do this vector curve. Bezier curve is a very important parametric curve in computer graphics. There are also Bezier curve tools in some mature bitmap software, such as PhotoShop.

II. Bezier curve formula

Third, the finger trajectory principle

Because we are using custom controls, so we create a finger class integration View, override onDraw onTouchEvent these two methods

public finger(Context context, @Nullable AttributeSet attrs) requires this constructor

In fact, the principle of finger trajectory is also very simple, that is, through onTouchEvent to obtain the position of the finger, to draw the path path.

IV. Analysis code

Here I write all the code first, and then I will analyze the function of the code one by one:

All codes:

package com.campus.shopping.drawtext; import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View; /** * Created by sang on 2018/6/24. */ public class MyView extends View { private Path mPath = new Path(); private float mPreX,mPreY; public MyView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { mPath.moveTo(event.getX(), event.getY()); mPreX = event.getX(); mPreY = event.getY(); return true; } case MotionEvent.ACTION_MOVE: float endX = (mPreX+event.getX())/2; float endY = (mPreY+event.getY())/2; mPath.quadTo(mPreX,mPreY,endX,endY); mPreX = event.getX(); mPreY = event.getY(); invalidate(); break; default: break; } return super.onTouchEvent(event); } public void reset(){ mPath.reset(); invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint paint = new Paint(); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.STROKE); canvas.drawPath(mPath, paint); }}

onTouchEvent method:

public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { mPath.moveTo(event.getX(), event.getY()); mPreX = event.getX(); mPreY = event.getY(); return true; } case MotionEvent.ACTION_MOVE: float endX = (mPreX+event.getX())/2; float endY = (mPreY+event.getY())/2; mPath.quadTo(mPreX,mPreY,endX,endY); mPreX = event.getX(); mPreY = event.getY(); invalidate(); break; default: break; } return super.onTouchEvent(event); }

When the finger press triggers ACTION_DOWN, here I draw the first point with the moveTo method, which must be used because otherwise this point will start at (0,0), and finally we go back to xy as the control point, and finally use the return true method to let the ACTION_MOVE,ACTION_UP event continue to pass events to this control.

When Action_MOVE is triggered, because the Bezier curve is composed of segments, the ending point is in the middle of the segment, so the calculation method here is (starting point + last point)/2 to get the middle point.

Usage:

Thank you for reading! About "Android how to customize the view to achieve finger movement track" This article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!